つれづれ日記

２０１１年４月１日～８月１５日まで育児休業を取りしました。この期間の生活を日記のまとめです。また、育児休業期間が終わったので、他にも挑戦しているものや日常のメモなどもこの日記に載せようと思います。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

(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属性値に使える文字については、次のように考えておくといいと思います。