メインコンテンツの組み立てと確認

必要なスタイルは全て揃ったので、「index.html」ファイルを編集してメインコンテンツを完成させましょう！

まずは更新情報エリアから組み立てます。

更新情報エリアの組み立て

前ページで作成した「#newsbox」「#newsbox p」「.midashi」を使って、見出しと更新情報エリアを作成していきましょう。

「index.html」ファイルをテキストエディタで開いて、<div id="contents">と
</div> の間に以下のコードを入力します。

step.1

はじめにdivを使って「#newsbox」を呼び出し、更新情報エリアの枠を作成します。

step.2

次にh3に「.midashi」を適用し、見出しを作成しましょう。

step.3

最後に<p>タグを使い、更新情報のテキストを入力したら完成です。

入力が完成したら、「index.html」を保存してブラウザで確認してみましょう。
下図のように表示されていれば成功です。

コンテンツエリアの組み立て

次はコンテンツエリアの組み立てを行いましょう。

こちらも前ページで作成したスタイル「.contentsbox」「.imgbox」「.clear」を使って組み立てます。

以下のコードをさきほどの更新情報エリアの下に入力しましょう。

step.1

divを使って「contentsbox」を呼び出し、コンテンツエリアの枠を作成します。

step.2

次にh3に適用する「.midashi」を呼び出し、見出しを作成します。

step.3

divで「.imgbox」を呼び出し、<img src="">を使って「img」フォルダ内の「anshin.jpg」を挿入しましょう。
alt属性も忘れないようにしましょう。

step.4

すべてオーダーを受けてから～・・・のテキストを入力します。

step.5

最後に <p class=”clear”> を使って、「詳細ページへ」とテキストを入力しましょう。ここで「.imgbox」の回り込みを解除しています。

入力が完成したら、「index.html」を保存してブラウザで確認しましょう。
図のように表示されていれば成功です。

2つめのコンテンツエリアの作成

コンテンツエリアは2つあるので、もう1つ作成する必要があります。

なお、入力する画像やテキストが違うだけで後は全て同じです。
先程作成したコンテンツエリアをコピーして、中身だけ書き換えてしまいましょう。

先ほどのコンテンツエリアの下に、以下のソースコードを入力します。

こちらも入力が完了したらブラウザで確認しましょう。問題なく表示されていれば成功です。

コンテンツエリアが完成したら、文書構造要素を追加しましょう。
※文書構造要素が思い出せない場合は「文書構造要素の一覧」を開いて復習しましょう。

セクション要素の追加

まずは先程作成した更新情報エリアとコンテンツエリアにセクション要素を追加しましょう。
この3つは「段落、章など、文章の塊を示すセクション要素」に分類することができます。

これらのコンテンツを<section> で囲んであげましょう。

なお、それぞれの <h3 class=”midashi”> は各セクションのタイトルとして理解されます。

これで、「What’s New！」「安心・安全の素材」「店舗案内」が１つの「文章の塊、もしくは章、段落」として理解されるようになりました。

article要素の追加

次は「article」と<h2>の追加を行います。

<article>は、例えばブログの記事のように「その文章が独立していても意味が通る」もしくは「その内容だけを取り出した場合に、独立したコンテンツとして成り立つ」ような箇所を示す場合に使います。

「さきちんカフェ」だと、下図の部分が「article」に該当します。

これらの該当範囲を「article」で囲ってあげましょう。
また、「article」の下に<h2>を使いテキストを入力します。

<h2>は「article」のタイトルとなります。
なお、この<h2>には前ページで作成した<h2>のスタイルが適用されます。

入力が完了したら、間違いがないか確認して保存しておきましょう。

ちなみに、ブラウザやGoogle、Yahooなどの検索エンジンからは上記のソースコード構造は以下のように見られています。

これで、「article」で囲んだ範囲が「その文章が独立していても意味が通る」もしくは「その内容だけを取り出した場合に、独立したコンテンツとして成り立つ」として理解されます。

すべて入力に間違いがなければ、ブラウザで確認してみましょう。
下図のように表示されていれば成功です。

文書構造要素は「文書構造をより明確化するための要素」なのでブラウザ上では表示されません。
確認するためには「HTML 5 Outliner」などのツールを使う必要があります。
※余裕があったら使ってみてください。構造が視覚的に確認できて、とっても便利です！

ソースコードに間違いがないかよく確認し、問題がなければ次の「サイドナビのスタイルを作成」に移りましょう。