(X)HTML,CSS覚書
～領域の設定について その２～
前回に引き続き、領域の設定についての説明です。
今回は前回設定した領域の設定（ index.html ）を利用して、さらにそれぞれの領域に背景色を着けることを行います。
まずは、前回の設定を利用して背景色を設定した例文です。
<div id="header">
<h1>タイトル</h1>
</div>
<div id="main">
<h2>サブタイトル</h2>
<p>ちょっとした説明</p>
<h3>内容１</h3>
<p>内容１の説明</p>
<h3>内容２</h3>
<p>内容２の説明</p>
</div>
<div id="menu">
メニュー
内容１
内容２
</div>
<div id="footer">
<p>copy right(C) 2011 All rights reserved.</p>
</div>
前回紹介した内容の「<div>」のところに「 <div id="ｘｘｘ"> 」と変更しただけです。
次に、idを利用したＣＳＳの記述です。
@charset "Shift_JIS"
* {
margin: 0;
padding: 0;
}
div#header {
background-color: #9acbfa;
}
div#main {
background-color: #cffd63;
}
div#menu {
background-color: #ffbaac;
}
div#footer {
background-color: #caacff;
}
以上の内容を「 main.css 」に保存することにします。
index.htmlを見てみると、 main.css の設定が反映されて、それぞれの領域が色で区切られているのが見てわかります。
まだ、横に４色色分けしているだけです。
ＣＳＳファイルの説明です。
文頭の部分については、「20111003ｗｅｂサイト作成について ０５」で説明しているので、ここでは省略します。
div#header が <div id="header"> と連動しています。
ＣＳＳファイルに記述した＃記号は、ＨＴＭＬファイルに記述した id="" を指し示します。
＃記号が記述された場所はセレクタ（どこのに当たる部分）ですので、
「 id="header" がある div 」の
「 background-color プロパティー」を
「#9acbfa の色にする」となります。
このような＃を使ったセレクタをidセレクタといいます。
ちなみに、9acbfa というのは色の指定なのですが、カラーコードと呼ばれています。ここでは９ａが赤の度合い、ｃｂが緑の度合い、ｆａが青の度合いというように３つの色の度合いを指定しています。色の指定をするときには、９ａ，ｃｂ，ｆａのようにそれぞれ１６進数で表すことになっています。
☆id属性について
一つの id は、そのＨＴＭＬファイルに一つしか記述することができません。
今回の例でいうと、 id="header" は２ヶ所あってはいけません。
ちなみに、これはＨＴＭＬファイルに限ったことであり、ＣＳＳファイルには関係ありません。また、「 index.html 」と「 profile.html 」のように別々のＨＴＭＬファイルに一度ずつ記述することも問題ありません。
id属性値の名前の付け方は自由なのですが、内容が同じものをひとまとまりにしているのが普通です。ですので、id属性値が複数存在してはならないのです。
id属性値に使える文字については、次のように考えておくといいと思います。
-
使用する文字は半角英数とハイフンのみ
-
１文字目は必ず英字にする
-
英字の大文字と小文字は別の文字として扱われる
特に大文字と小文字の件についてときどきミスをすることがあるので注意してください。
ここで別々の背景色を指定した理由は、作業を進める上で視覚的にわかりやすくするためです。あくまで作業のための一時的な指定なので、先の段階では削除することになります。
[0回]
