シリーズ記事「初心者もできる！プログラミング基礎講座」の第6回は、ページレイアウトの基礎です。サイトの目的によって変わってくる部分ですが、基本的なレイアウトについてご説明いたします。また、レイアウトを作るためのHTMLの記述方法についても書いています。
基本レイアウト
どのサイトにも共通という観点では、以下の3つの部分で構成されます。
- ヘッダー
- メイン
- フッター
上から順番にこの3つが並ぶイメージです。それぞれをひとまとまりの要素としてHTMLに記述する場合、どうすると良いでしょうか。
<div>要素を使用する
レイアウトは<div>要素を使って作っていきます。divとはdivisionの略で、このタグで囲まれた部分をひとまとまりの要素としてグループ化できます。
<div>要素を使ってHTMLを書いていく時に関係してくるのが、classです。
classによる名前付け
classとは、CSSでスタイルの対象を指定するセレクタの一種です。
これまでの説明では、h1（見出し）や p（段落）といったHTMLのデフォルトで決まっている要素をセレクタとして指定することについて書いてきました。その場合、セレクタとして指定したすべての部分で同じスタイルが適用されてしまいます。例えば、p（段落）に対してフォントの色をオレンジにした場合、pが使われているすべての場所でオレンジ色になるということです。
しかし、実際には特定の部分だけにスタイルを適用したいということのほうが多いです。そうした場合にclassを使うと便利です。特定の要素にclassで名前を付け、その名前が付けられている部分だけにCSSのスタイルを適用していくイメージです。今回のレイアウトで考えると、div要素で囲むヘッダー、メイン、フッターごとにCSSを適用できるようになるというわけです。
HTMLでの記述
画像のように記述します。<div>要素の中にclassで名前をつけます。半角英数小文字が基本で分かりやすい名前をつけましょう。名前はダブルコーテーションで囲みます。これで3つのグループが出来上がりました。今後それぞれのレイアウトの中にさらに情報を入れていきます。
CSSでの記述
.(ドット)をつけてclass名を記述し、その後、{ } で囲んでスタイルを指定します。画像の場合、class名「header」に対し背景色を灰色（#dddddd）に指定するための記述です。
このように記述すると、同じclass名をつけたすべてのHTML要素に指定したCSSが適用されることになります。つまり、他の要素で同じclass名を使っていると、同じCSSのスタイルが適用されるということです。覚えておきましょう。
headerとfooterタグ
オチではないのですが… headerとfooterは一般によく使われるため、divを使用せずに記述できます。
<header> </header>
<footer> </footer>
今回はレイアウトの概念をつかむためdivで囲む方法を説明してきましたが、div要素を使用しないでタグとして記述するほうが現在では一般的です。CSSでも、headerタグやfooterタグをセレクタとして使用できます。
CSSでHTMLのタグをセレクタとして指定する場合は、タグの前に.(ドット)は不要です。前述の通り、class名をつけた場合は、class名の前に.(ドット)が必要ですので忘れないようにしましょう。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第6回】はいかがでしたか。今回はサイトの基本的なレイアウトについて解説してきました。また、レイアウト作成をする際のHTMLやCSSの書き方についてもご説明してきました。
次回は、ヘッダー内にロゴやメニューを配置する方法についてです。次回もお楽しみに！
