★ ホームページを作ってみよう
�� ★
管理人が勉強するためのページです よかったら参考にしてね♪ ★ ホームページを作ってみよう
�� ★
お
知 ら せ
|
★ 08/09/28 ＣＳＳで背景を指定する方法をＵＰしました。 |
参考書がメインだけど、今回画像の表示位置や繰り返し表示しない方法を 《 Ｔａｇ ｉｎｄｅｘ 》様のスタイルシートページでお勉強させていただきました♪
|
（ background ） |
内 容 |
|
◆ このページでは、スタイルシート（ＣＳＳ）の背景関係の指定方法を勉強しています ＰＲＯＰＥＲＴＹ （ プロパティ … 何を ） ： ＶＡＬＵＥ （ バリュー … どうするか ） を 具体的に指定する方法です
|
|
|
★ スタイル指定の基本 |
Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ 何を （ 色、大きさ、書体、段落、余白、背景など ）
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ どうするか （ ＰＲＯＰＥＲＴＹの具体的な数値など ）
|
|
★ 記述に使う記号と読み方 |
「 ｛ 」 ・・・ 左中カッコ 「 ｝ 」 ・・・ 右中カッコ 「 ： 」 ・・・ コロン 「 ； 」 ・・・ セミコロン 「 ．」 ・・・ ピリオド 「 ，」 ・・・ コンマ または カンマ 「 ’」 ・・・ アポストロフィー |
|
★ 背景を指定するのに 使える有効な要素タグ |
＜ Ｐ ＞、＜ ＤＩＶ ＞、＜ Ａ ＞、＜ ＳＰＡＮ ＞、＜ ＢＯＤＹ ＞、＜ ＦＯＮＴ ＞、＜ ＴＤ ＞ ＜ ＴＡＢＬＥ ＞、＜ ＦＯＲＭ ＞、＜ Ｈ１ ＞〜＜ Ｈ６ ＞、＜ ＳＥＬＥＣＴ ＞ ＜ ＩＮＰＵＴ ＞、＜ ＴＥＸＴＡＲＥＡ ＞、＜ ＰＲＥ ＞、 など
|
|
背景関係の指定方法
|
◎ 背景の色を指定する |
|
ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ − ｃ ｏ ｌ ｏ ｒ ： カラーネーム または ＃****** （１６進数値） |
|
|
◎ 背景に画像を使う |
|
|
ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ − ｉ ｍ ａ ｇ ｅ ： ｕ ｒ ｌ ( 背景に使う画像のＵＲＬ ) |
|
|
◎ 背景の画像を固定するか固定しないかを設定 |
|
|
ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ − ｉ ｍ ａ ｇ ｅ ： ｕ ｒ ｌ ( 背景に使う画像のＵＲＬ ) ； ｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ − ａ ｔ ｔ ａ ｃ ｈ ｍ ｅ ｎ ｔ ： 背景画像の表示方法（ ｆｉｘｅｄ または ｓｃｒｏｌｌ ） |
|
|
★ 属性値（ＶＡＬＵＥ）は、以下の２つ ｆｉｘｅｄ ・・・ 背景画像を固定する ｓｃｒｏｌｌ ・・・ 背景画像を固定しない |
|
|
|
※ 背景画像の表示方法を指定するプロパティのｂ ａ ｃ ｋ ｇ ｒ ｏ ｕ ｎ ｄ − ａ ｔ ｔ ａ ｃ ｈ ｍ ｅ ｎ ｔ は、私が使ってる古い参考書によると、ＩＥ（インターネット エクスプローラ）しか対応していないと書いてあります。 私のブラウザはＩＥで、友だちもＩＥだし・・・他のブラウザが現在このタグに対応しているかどうか確認できません。 ごめんなさい m(__)m
※ 背景画像を固定しない場合は、別にbackground-attachmentの指定はいりません。 background-image:url(画像のＵＲＬ)を指定するだけでいいです。 上記の指定だけだと、画像はタテヨコに繰り返して表示され、画面全体に敷き詰められた状態になります。
※ 参考書には「背景に指定した画像はタテヨコに繰り返して表示される」としか書いてなかったので、タグインデックス様で調べてみたら、background-repeat: no-repeatを加えることで画像を一つだけ表示できることが分かりました。 表示位置ですが、このページではbackground-position: right topを加えました。 right topは、右(横位置）の上（縦位置）という意味です。半角スペースを入れて区切ります。
このほかにも、左端から何ピクセル上から何ピクセルなど、いくつか表示位置の指定方法がありますので 詳しく知りたい方は、《 Ｔａｇ ｉｎｄｅｘ 》様のスタイルシートページ をご覧くださいね。
|
|
◆ 背景の色を指定
|
◆ このページの一番上のタイトル部分の背景色を、ヘッダーにスタイルを指定して ブルー系にしてみました。
タイトル部分だけ要素タグに＜Ｈ１＞を指定しているので、このタグに対してスタイルを設定しました。
<style type="text/css"> <!-- h1{ background-color:#b2b2ff; text-align:center; color:#000000; } --> </style>
※ 上記のようにヘッダーに記述した場合ページ全体に反映されるので、そのページの他の箇所で＜Ｈ１＞を指定してる時は、同じようにスタイルが反映されます。
文字の色を黒（#000000）にして、テキストの位置を真ん中にするために text-align:center を加えました。 text-align は、テキストの行揃えを指定するプロパティで、バリューは、左揃え（Ｌｅｆｔ）、中央揃え（ｃｅｎｔｅｒ） 右揃え（Ｌｉｇｈｔ）です。行内で均等配置にする属性値ｊｕｓｔｉｆｙもあるみたいですが、ＩＥのみの対応らしいです。
◆ この表の左のセルの数か所の項目の背景をピンクにしてみました。
ヘッダーにキーワード（ＰＩＮＫ）を設定し、ボディ（本文）中にＣＬＡＳＳ属性で反映させています。 キーワードは自分で分かりやすいものを任意で決めます。
<style type="text/css"> <!-- .pink{ background-color:pink; text-align:center; color:#000000; } --> </style>
<body>
<div class="pink">・・・・・・・・・・・・</div>
</body>
|
|
◆ 背景に画像を設定
|
◆ このページ上部のテキストボックスの背景を、ヘッダーにスタイルを指定して 画像を設定しました。
※ 画像を固定しない場合は、background-attachmentで指定しなくてもＯＫ！
背景に画像を指定すると、普通タテヨコに繰り返して画面に敷き詰められて表示されるのですが、見やすくするためにbackground-repeat: no-repeat; background-position: left top;を追加して、一つだけテキストボックスの左上に表示されるように指定しました。
<html>
<head>
<style type="text/css"> <!-- p.infobox { height: 100; width: 500; overflow: auto; border: gray 3px dashed; background-image:url(http://www.geocities.jp/cocoa_py/gazou/1_071201015_90x90.jpg); background-repeat: no-repeat; background-position: left top; color: #000000; } --> </style>
</head>
<body>
<p class="infobox">・・・・・・・・・・・・</p>
</body>
</html>
|
|
◆ 背景画像を固定
|
◆ このページの背景に、ヘッダーにスタイルを指定して背景画像を固定してみました。
このページの上部で、固定されたページの背景と固定されていないテキストボックス背景をそれぞれスクロールして見比べてみてください。違いが分ると思います。
このページのおおまかなソースは下記のようになります。
<html>
<head>
<style type="text/css"> <!-- body { background-image: url(http://www.geocities.jp/cocoa_py/gazou-2/cocoa_py_180x180-nana1.gif); background-attachment:fixed; background-repeat: no-repeat; background-position: right top; } --> </style>
</head>
<body >
</body>
</html>
|
|
|
フリー素材の、この画像を使用しました。
管理人Cocoaのアバターを使用しました。