div#a4内の編集
div#a4内には、画像とパンくずリスト、そしてコンテンツを配置します。
画像は、サイトが緑ベースなので、緑が入ったシンプルな写真がいいと思います。
<div id="a4">
<p id="b2"><img src="gif/32.gif" alt="境界線" /></p>
<p id="b3">>>ホームページ作成講座TOP</p>
<h2>画像を並べただけの例</h2>
<p class="b5">略</p>
<h2>画像ビュアーの形にした例</h2>
<p class="b5">略</p>
<h2>z-indexを使った例</h2>
<p class="b5">略</p>
</div>
スタイルは特に難しいところはないので、解説はしません。
h2 { font-size:15px; color:#494; margin:20px 0 10px 20px; border-left:solid 10px #272; border-bottom:dotted 1px #272; width:450px; padding-left:5px; } #a4 p#b2 img { border-bottom:solid 3px #494; } #a4 p#b3 { height:20px; background:#8c8; font-size:13px; line-height:20px; padding-left:20px; } #a4 p.b5 { font-size:13px; margin:5px 0 5px 30px; }
ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)
Lesson9~画像ビュアーの作成~
- XHTMLの骨格を記述する
- divとfloatで骨格を作る
- div#a1内の編集
- div#a2内の編集
- div#a3内の編集
- div#a4内の編集
- div#a5内の編集・最終調整
- 画像viewerを配置する
コメントor補足情報orご指摘あればをお願いします。
- << 前のページ
- 次のページ >>