ステップ４〜イメージ画像とぼやきの作成〜

いよいよメインコンテンツ部分に突入です。
まずはイメージ画像と日記から取り掛かりましょう。

HTMLを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

<!-- *************メイン ****************-->
<DIV id="main">
<DIV id="intro">
<IMG id="photo" src="./img/img.jpg" width="290" height="150" alt="ようこそ">
<div id="mes">
<h2>管理人のぼやき</h2>
<p>
制作実習編LV3ではテーブルタグを一切使わないフルスタイルシートデザインに挑戦！<BR>
方法はいろいろありますが、今回は一番とっつきやすい手法でやります。<BR>
今回の実習では、レイアウトの組み方だけでなく、スタイルシートの効率的な書き方や、
ページを作っていく手順も合わせてものにしてください。<BR>
ここを終了すれば、あなたもCSSデザイナーに仲間入りです！
</p>
</div>
</DIV>
</DIV>

CSSを書く

次の原稿を参考にやってみましょう。（コピーして貼り付けてもいいです）

/* イントロ */
#intro{
    width:650px;
    height:150px;
}
#photo{
    float:left;
    background-color:#DDDDDD;
    width:290px;
    height:150px;
}
#mes{
    float:left;
    background-color:#DDDDDD;
    width:360px;
    height:150px;
    overflow:auto;
}
#mes h2{
    margin:0.3em 3em;
}
#mes p{
    margin:0.3em 1em;
}

ポイント

ここでのポイントは、

1. floatを使って写真と日記を並べる
2. overflow:auto;を使ってフレームっぽく見せる

の２つです。

今回はサイズが厳密に決めてあるので、position:abusoluteを使った配置も可能なのですが、 計算の手間や更新のことを考えるとfloatで寄せたほうが賢明です。 floatは使いこなせるようになるまで、時間がかかります。慣れるためにも積極的に使ってみましょう。

overflowプロパティには様々な値がありますが、私の一押しがautoです。これならば必要なときにだけスクロールバーが表示され、 読めない部分が出るということはありません。 また、フレームを使っているように見せることも可能なため、ちょっとした演出にも使えます。

確認

できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。

ステップ４終了時点

次はメニュー部分の作成にとりかかります。