メインコンテンツのスタイル

更新情報やページコンテンツを表示するエリアのスタイルを作成しましょう。

なお、このメインコンテンツ部分の作成は工数が多いので、スタイル作成とHTML作成を別ページで分けて説明しています。
まずは必要となるスタイルを用意しましょう。

メインコンテンツの出来上がりイメージは以下のようになります。

今回は作成するスタイルが多く、ソースコードも長くなります。混乱しないように、ゆっくりと確実に作業を進めましょう。

まずは更新情報を表示するスタイルを作成しましょう。

ここにはページの更新履歴や新着情報などが表示されます。
用意するスタイルは「#newsbox」「#newsbox p」「.midashi」の3つとなります。

構造的には「newsbox」スタイルで枠を作成し、<h3>で見出しを表示、<p>タグを使ってテキストで更新情報を入力しています。

それでは、style.cssを開いて「#newsbox」「#newsbox p」「.midashi」を作成していきましょう。

#newsboxの作成

「#newsbox」は更新情報を表示するための基本枠となります。

横幅を593pxに指定し、縦幅は自動、1px・#CCCの直線、領域内余白を上下左右10px、領域間余白を下に15px、背景色を#FFFにします。

なお、横幅は「contentsスタイルの作成」で作成した「contents」に合わせて615pxにするのですが、paddingを10px（左右合計20px）、borderを1px（左右合計2px）指定しているため、615-22=593となります。そのため、横幅は593pxと入力しましょう。

入力項目が多いので、間違えないよう確認しながら入力しましょう。

#newsbox pの作成

次に、「#newsbox」の中の<p>にだけ適用されるスタイルを作成しましょう。

このスタイルを付けることにより<p>で囲んだテキストに下線がつき、文書が読みやすくなる効果が生まれます。

border-bottomで下方向だけに1px、#CCCの破線を表示するよう指定します。

.midashiの作成

「.midashi」は名前の通り、見出し文字を装飾するためのスタイルです。

このスタイルを適用することにより、What's New!の文字が上画像のように装飾されます。

下方向に2px、#C30の破線を表示させ、文字を太字に変更、文字色を#C30、文字サイズを1.2emへ指定します。

なお、「.midashi」は使いまわすスタイルなので、先頭が「#」ではなく「.」となります。
間違えないようにしましょう。

次はコンテンツエリアのスタイルを作成しましょう。

用意するスタイルは「.contentsbox」「.imgbox」「.clear」「h2」の4つとなります。

こちらも構造的には「.contentsbox」スタイルで枠を作成し、さきほど作成した「.midashi」で見出しを表示、画像を「.imgbox」の中に表示しています。
また、「.clear」で回り込みを解除します。
h2は次ページで文書構造要素を入力する際に使用します。

.contentsboxの作成

それではまずは「.contentsbox」から作成しましょう。
「.contentsbox」はコンテンツ枠を表示するための基本枠となります。

横幅を593pxに指定し、縦幅は自動、1px・#CCCの直線、領域内余白を上下左右10px、領域間余白を下に15px、背景色を#FFFにします。
セレクタ名が違うだけで、「#newsbox」と中身は一緒です。

こちらも横幅は「contentsスタイルの作成」で作成した「contents」に合わせて615pxにするのですが、paddingを10px（左右合計20px）、borderを1px（左右合計2px）指定しているため、615-22=593となります。そのため、横幅は593pxと入力しましょう。

「#newsbox」と中身は一緒なので、コピー＆貼り付けしてセレクタ名だけ書き換えてしまえば楽チンです。

.imgboxの作成

「.imgbox」はその名の通り、画像をはめ込むための枠です。

「.contentsbox」内の右側に配置され、画像の表示枠として使用します。

横幅230px、縦幅167pxに指定し、右に回りこみ、領域間余白が上10px、下10px、左25pxにします。

この「.imgbox」に後ほど、<img>タグを使って画像を挿入します。

.clearの作成

回りこみを解除するためのスタイルを作成しましょう。

さきほど作成した「.imgbox」は「float:right;」で右へ回り込みさせているので、それを解除するために必要となります。

セレクタ名を「.clear」とし、プロパティに「clear:both;」を入力しましょう。

h2に適用するスタイルの作成

h要素である「h2」に適用するスタイルを作成しましょう。

<h2>のサイズを小さくし、領域間余白を下方だけ20px;に指定するスタイルです。

h2だけに適用するスタイルなので、セレクタ名の前には何もつけません。

まとめ

これでメインコンテンツを構成するための全てのスタイルの完成です。
※「style.css」を保存するのを忘れないようにしましょう。

作成するスタイルも多く入力も少し複雑なので、ゆっくり丁寧に自分のペースで行いましょう。

次のページでは今回作成したスタイルを使い、メインコンテンツを完成させます。