05-04-02.html<header><header><p class="logo"></p><p class="address"></p><p class="logo"></p>

ロゴを入れるボックス<p class="address"></p>

住所を入れるボックス</header></header>
図 11 header 要素内に入れるコンテンツのボックスを記述

ここでのポイントは、div 要素ではなく p 要素自体をボックスとして扱っていることです。div 要素を使わなくても、段落（p 要素）などに対して直接 class 属性をつけてレイアウトの制御ができれば、HTML を簡素化できます。

POINT
id 属性、class 属性の値については文法的に決まったものがなく、半角英数字で構成される文字列であれば、任意の名前をつけることができます。現場でも定番の書き方が定まっていないのが現状で、名前づけのルールは作成者によってさまざまです。大きな方針としては、以下を想定して名前をつけていくとよいでしょう。
■■「そのブロックの内容が何か」が属性名から（誰でも）わかること
属性値を新たに作成した際、意図しないところで名前が重複しないようにすること②グローバルナビゲーションにボックスを入れる
nav 要素が記述されているグローバルナビゲーションには、Web サイト内の各ページの名前をリストアップして、最終的にはそれにリンクをはることになります 図12 。このため、nav 要素の中には順不同リストを示す ul要素が入ります。さらに ul 要素の中に、li 要素で項目をリストアップすることになります。

参照

102 ページ参照。

05-04-02.html<nav class="gNavi"><nav class="gNavi"><ul></ul><ul></ul></nav></nav>
図12

nav 要素内に ul 要素のボックスを記述

246

Lesson 5

HTML で Web ページの構造を作る

順不同リストのボックス

図12 の nav 要素の class 属性値「gNavi」は「global Navigation」の略でMEMOす。このように長い英単語になる場合は一部を省略することも多くありま

近年は属性値のつけ方にも「流派」のようなものが出てきているようですが、本書では解説のわかりやすさを重視して、ブロックの内容がわかるように平易な英単語をつける方針にしています。

す。また「global Navigation」といった 2 単語に分かれるようなときには、2 単語目の最初の文字を大文字にすることで区切りを見やすくするといった書き方もよく行われます。

③メインコンテンツ部分にボックスを入れる
main 要素が記述された中身には、メインコンテンツとなる 3 つのボックスが入ります 図13 。この 3 つを入れ込んでみましょう。
05-04-02.html

メインビジュアルのボックス<main><main><div id="topMainVisual"><div id="topMainVisual"></div></div><div class="topLinkBox"></div></div></main><div class="topContentsBox"><div class="topLinkBox"></main>3 段組みのボックス 2 段組みのボックス

HTML<div class="topContentsBox"></div>
Lesson 5</div>

Webで図 13 main 要素内に div 要素のボックスを記述

ページの構造を作る

図13 では、<main> タグの中にコンテンツが入るボックスとして 3 つの div 要素で記述しています。それぞれの div 要素の中に見出し、画像、文章などがレイアウトされて入ることになります。このように複数の要素をまとめてグループ化し、レイアウトを調整したい場合は、div 要素を使って透明のボックスで囲みます。

④フッター部分にボックスを入れる
最後に、footer 要素の中身にボックスを入れていきます 図14 。ここには、「ロゴ」「ナビゲーション」「SNS へのリンク」「著作権表記」が入ります。

04

構造を作る HTMLを書いてみよう

247

共通部分に中身を入れる
サンプルファイル「07-01-01.html」は、ヘッダー、グローバルナビゲーショ

POINTン（以下、ナビゲーション）、メインコンテンツ、フッターという大きなブロックがあり、それぞれの内部に中身を入れるボックスができている状態です。
ここでは、サイト全体で共通する部分（ヘッダー、ナビゲーション、フッター）に中身を入れていきます。

① HTMLに原稿を貼りつける
ます 図 2

実践

サンプルファイル「07-01-01.html」と「07-01-01.txt」を Brackets で開き

Lesson 7

ヘッダー、ナビゲー
ション、メインコンテ
ンツ、フッターというページ構造は全ページで共通ですが、メインコンテンツの中身はページごとに異なります。メインコンテンツの中身を入れる過程は次節で解説します。

図 3 。そして、「07-01-01.txt」の内容（テキスト）を「07-01-01.

：サイトを作る
Webhtml」に貼りつけていきます 図 4 〜 図 6 。画像が入る部分は、この段階では原稿内にある画像データのパスをそのまま貼りつけておきましょう。

POINT
実際に Web サイトを制作するときも、このようにサイトで使うテキストを原稿としてあらかじめ別ファイルにして作成しておきましょう。HTML に中身を入れる作業を効率的に進められます。

図 2 「07-01-01.html」
を Brackets で開いた

図 3 「07-01-01.txt」
を Brackets で開いた

ヘッダー、ナビゲーション、メインコンテンツ、フッターの容れ物ができており、中身はまだ入っていない状態

HTML の中身となる原稿（テキスト）が記述されている

01

HTMLで共通部分の中身を作る

295

07-01-01.html

07-01-01.html<!--ヘッダー --><!--グローバルナビゲーション --><header><nav class="gNavi"><p class="logo"><ul>images/header_logo.png

HOME<p class="address">

定番のパン

ひまわりのこだわり</p>〒 160-0022

アクセス

東京都新宿区新宿 1-99-300
TEL : 03-9900-6802

ご予約・お問い合わせ</ul></p></nav></header>
図 5 ナビゲーション部分に原稿を貼りつけた
図 4 ヘッダー部分に原稿を貼りつけた<ul></ul> の内側に原稿を貼りつける<p class="logo"></p> の内側にロゴ画像のファイル名を貼りつけ、<p class="address"></p> の内側には住所を貼りつける

07-01-01.html<!--フッター --><footer><p>

images/logo.png
</p>

<nav>
<ul>

HOME

ひまわりのこだわり
定番のパン
アクセスご予約・お問い合わせ</ul></nav><ul class="snsBtn">

images/twitter.png
images/facebook.png</ul><p class="copyright">

Copyright© ひまわりパン</p></footer>

296

Lesson 7

実践： Webサイトを作る

図 6 フッター部分に原稿を貼りつけた<p></p> の内側にロゴ画像のファイル名を、nav 要素内の <ul></ul> 内にはナビゲーションの項目を貼りつける。
<ul class="snsBtn"></ul> の内側には 2 つの画像のファイル名を、<p class="copyright"></p> 内にはコピーラ
イト表記のテキストを貼りつける

07-01-03.html

07-01-03.html<nav class="gNavi">

<ul>

<ul>

<li class="current"><a href="index.html">HOME</a></li><li><a href="kodawari.html">ひまわりのこだわり </a></li><li><a href="teiban.html">定番のパン </a></li><li><a href="access.html">アクセス </a></li><li><a href="contact.html">ご予約・お問い合わせ </a>
</li>

HOME
ひまわりのこだわり
定番のパン
アクセスご予約・お問い合わせ</ul></nav></nav>
図10：
サイトを作るWeb</ul>実践<!--グローバルナビゲーション --><nav class="gNavi">

Lesson 7<!--グローバルナビゲーション -->nav 要素内の原稿をマークアップ

ナビゲーションの項目となるテキストを <li></li> でマークアップ。<li></li> の内側に、さらに <a></a> でリンクをはる

ul 要素の内側に li 要素を記述して、ナビゲーションで移動するサイト内の各ページ名のリストを作ります。そして、li 要素の内側に a 要素で各ページへのリンクをはっていきます。
ここでは「HOME」の li 要素だけに class 属性を指定しています。あとあと CSS でスタイル指定を行う際、この class 属性を目印にして CSS の設定を行います。ナビゲーションのリスト項目の中で「現在見ている（表示している）ページ」を、ほかのページとは別の見た目にするための class ですので、この class 属性を指定する li 要素はページによって変わります。
図10 のように「HOME」の li 要素だけに「class="current"」をつけると「トップページを見ているとき」の状態ということになり、この「class="current"」を利用して、 図11 の状態のように「HOME」だけ下線の色が違う見た目になるよう CSS を設定していきます。トップページ以外の、たとえば「ご予約・お問い合わせ」ページの HTML を記述する際には、「ご予約・お問い合わせ」をマークアップしている li 要素（5 つ目の li 要素）にこの class 属性をつけます。

図11 トップページを表示している状態のナビゲーション（CSS 適用後の完成形）
現在見ているページ（この場合はトップページ）の下線が、ほかの項目と違う色になる
よう CSS でスタイル指定を行う

01

HTMLで共通部分の中身を作る

299