ブログコーディング

①contents部分を中央寄せにする

今回中央寄せにしたい要素はdiv要素、つまりブロック要素です。要素を中央寄せにする方法はいくつかありますが、基本は以下の手順で行います。

1.当該の要素の横幅を決める

2.当該の要素にmargin: 0 auto;をあてる

.contents {

width: 940px;

margin: 0 auto;

}

②contents部分の中身(left-contentとright-content)を横並びにする

今回横並びにしたい要素もdiv要素ですので、ブロック要素です。ブロック要素を横並びにするには、以下の手順で行います。

1.横並びにしたい要素2つの横幅の合計を、それらの親要素の横幅以内になるよう指定する。

2.横並びにしたい要素両方にfloatプロパティをあてる

3.横並びにしたい要素の親要素に、clearfixクラスを適用する

.left_content {

width: 700px;

float: left;

}

.right_content {

width: 140px;

float: right;

}

.clearfix:after {

content: "";

clear: both;

display: block;

}

そしてindex.htmlに移り、横並びにしたい要素の親要素、つまりcontentsにclearfixクラスをあててください。<div class="contents clearfix">

③header部分を作成しましょう

続いて、指示書のようなダイナミックなヘッダーを作りましょう。

そのために、先ほど唯一使用しなかったbg_header.pngをheader要素の背景画像として表示します。

その前に、headerタグの子要素であるimgと、p要素の中のtext要素を中央寄せにしましょう。

img要素はインライン要素です。

インライン要素を中央寄せにするには、中央寄せしたいインライン要素の親要素に、text-align: center;とプロパティをあてます。

またこの時、pの中のtext要素もtext-align: centerによって中央によります。

header要素にmainというidを指定します。<header id="main">　これはcssでは#で指定。

背景に敷く画像はCSSで指定する。

background: url(images/bg_header.pngフォルダ/ファイル名) no-repeat center center;

・<hr>罫線

・<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 その中のリスト項目は、<li>タグで指定します。

・padding（css）は内余白のこと

・margin（css）は外余白