ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

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

メインコンテンツ内のスタイルを作成しよう

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

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

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

メインコンテンツの完成イメージ

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

覚えておきたいポイント

7つのスタイルを作成

このページではメインコンテンツ用のスタイルを7つ作成します(結構大変です…)
疲れたら休憩をとりながら、じっくり学習しましょう。

更新情報のスタイル

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

更新情報の表示部

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

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

[更新情報の構成]
更新情報の構成図

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

#newsboxの作成

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

newsboxのスタイル図
[入力するコード]
#newsbox {
width:593px;
height:auto;
border:solid 1px #CCC;
padding:10px;
margin-bottom:15px;
background-color:#FFF;
}

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

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

[CSSの記述例]
CSSの入力例

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

#newsbox pの作成

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

newsboxのpだけに適用されるスタイル

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

[入力するコード]
#newsbox p {
border-bottom:dashed 1px #CCC;
}

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

[CSSの記述例]
下線を表示するスタイル

.midashiの作成

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

見出し文字のスタイル

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

[入力するコード]
.midashi {
border-bottom:dashed 2px #C30;
font-weight:bold;
color:#C30;
font-size:1.2em;
}

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

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

[CSSの記述例]
midashiスタイルの記述例

覚えておきたいポイント

.と#に気をつけよう

.(ドット)と#(シャープ)に気をつけましょう。.(ドット)は複数回使うスタイルに、#(シャープ)は一度しか使用しないスタイルに付けます。

下線で読みやすさUP

更新情報にはホームページの更新履歴や新着情報などが入ります。
時系列でわかりやすく表現したかったので、文字の下に点々線を入れてみました。これがあると、少しオシャレに見えます!

コンテンツエリアのスタイル

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

コンテンツエリアのスタイル

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

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

[コンテンツエリアの構成]
コンテンツスタイルの構成図

.contentsboxの作成

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

contentsboxのスタイル図
[入力するコード]
.contentsbox {
width:593px;
height:auto;
border:solid 1px #CCC;
padding:10px;
margin-bottom:15px;
background-color:#FFF;
}

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

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

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

[CSSの記述例]
contentsスタイル

.imgboxの作成

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

imgboxのスタイル

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

[入力するコード]
.imgbox {
width:230px;
height:167px;
float:right;
margin:10px 0px 10px 25px;
}

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

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

[CSSの記述例]
imgboxのCSS記述例

.clearの作成

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

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

[入力するコード]
.clear {
clear:both;
}

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

[CSSの記述例]
float解除のCSS

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

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

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

[入力するコード]
h2 {
font-size:0.9em;
margin:0px 0px 20px 0px;
}

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

h2に適用するスタイル

まとめ

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

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

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

覚えておきたいポイント

こまめに確認しよう

一度に沢山のスタイルを作成するので、間違いがないかこまめに確認しましょう。
ここで間違えたまま次に進むと、index.htmlで間違ったスタイルを呼び出したり、呼び出しができないなどの不具合が出る可能性があります。

メインコンテンツの組み立てと確認
« 前のページへ メインビジュアルの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。