メインコンテンツが入る部分の背景色を白くしようと思います。
CSSで背景色を指定するために、メインコンテンツの入る部分を特定したいのですが、現状では、セレクタにできそうな手頃な要素がありません。
h1要素、p要素、small要素といったいくつかの要素があるのですが、これらの要素をまとめてグループ化する箱のようなものが欲しいところです。
そこで、HTMLファイルにdiv要素を加えて、複数の要素を囲んでしまうことにします。
index に以下の記述を追加してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <h1>ウェブサンプル株式会社</h1> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- インフォメーション --> <h2>新着情報</h2> <h3>新商品のご案内</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <h3>展示会への出展</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <h3>環境への取り組み</h3> <p> あいうえおかきくけこさしすせそ（中略） </p> <!-- フッタ --> <small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small> </div> </body> </html>
追加できたら保存してください。
まだスタイルを指定していないので、画面上の変化は特にありません。
上記のHTMLソースでは、
<div id=”pagebody”> ～ </div>
で複数の要素を囲んでいます。
div要素はそれ自体には特に意味を持たないのですが、特定の範囲を指定したり、複数の要素をグループ化してまとめるコンテナとして使用します。
コンテナ要素で特定範囲を囲むことで、その範囲全体にスタイルを指定できるようになります。
div要素にはid属性でpagebodyというid名を付けていますが、これはスタイル適用対象を特定するセレクタを設計しやすくするためです。
id名はひとつの文書の中で同じものを重複して付けることはできません。
要素にid名を付けることで、ウェブページ内の箇所を一意に特定することが可能になります。
HTMLソース中やCSSソース中では、タブ、ホワイトスペース、改行はブラウザ上の表示には影響しません。
これらをうまく使ってソースが見やすくなるようにしましょう。
上記のHTMLソースの場合、複数の要素を
<div id=”pagebody”> ～ </div>
で囲むことで、div要素の下にh1要素、p要素、small要素などが子要素として配置されたことになりました。
そこで、階層構造が分かりやすいように、内側部分をタブでインデント（字下げ）しています。
字下げはしてもしなくても良いのですが、こうしておくとHTMLソースが見やすくなり、間違いも起こりにくいでしょう。
全角スペースで字下げするとブラウザでの表示に影響してしまうので、必ずタブか半角スペースで字下げするようにしてください。
また、HTMLソース中には適宜コメントを入れて、後から見返したり、他の人が見た場合にも分かりやすいソースになるように心掛けましょう。
| <前へ | 目次へ | 次へ> |
