ステップ４〜ヘッドと左サイドのデコレーション〜
ここからはスタイルシートを使ってデコレーションします。
結構長いですが、基本的にコピペするだけなので、安心してください。
まずは上と左側からとりかかります。
リンクの色を設定する
最初にリンクの色を設定します。
ソースをコピーしてstyle.cssに貼り付けてください。
/*リンク関係*/
a:link {/*リンクされた文字の色*/
color:0000ff;/*文字の色：青*/
font-style:normal;
text-decoration:underline;/* 下線 */
}
a:visited {/*訪問後の色*/
color:#934C7B;/*文字の色：紫*/
text-decoration:underline;/* 下線 */
}
a:hover {/*カーソルを合わせたときの色*/
color:#ff0000;/*文字の色：赤*/
font-style:normal;
text-decoration:underline;/* 下線 */
}
a:active {/*クリック中の色*/
text-decoration:none;/* なし */
}
ヘッド部分に背景色をつける
続いてロゴなどのあるヘッド部分に背景色をつけて画像の隙間を埋めます。
td#headにbackground-colorを設定します。
td#head{
width:700px;
background-color:#7F2D00;
}
イメージ画像を引き上げる
左サイドのデコレーションに移りましょう。まずはイメージ画像をセルの上部に引き上げます。
つかうプロパティはvertical-align:top;で、これをtd#main-leftに追加します。
それだけだと隙間が全く無いので、イメージ画像のボックスにmarginも追加します。
td#main-left{
width:300px;
vertical-align:top;
}
#img{
margin-top:10px;
}
見出しデコ＆余白調整
見出しのデコレーションと、本文やリストの余白を調整します。
右側とは見た目を変えたいので、classを使用することにします。
テクニックとしてボーダーで装飾、
リストのインデントを使用しています。
h2.l-side{
margin:0px;
font-size:large;
border-color:#663300;
border-width:1px 10px;
border-style:solid;
text-align:center;
}
ul.new{
list-style:none;
margin:0px;
padding:0.5em 1em;
}
p.l-side{
margin:10px 1em;
}
HTMLにclassを設定する
見出しデコ＆余白調整で作ったclassをHTMLに適用させるためindex.htmlに手を加えます。 （赤字が手を加えた部分）
<!--======メイン左====== -->
<td id="main-left">
<!-- イメージ画像 -->
<DIV id="img">
<IMG src="./img/img.jpg" alt="ようこそ" width="290" height="150">
</DIV>
<!-- 更新履歴 -->
<DIV id="new">
<h2 class="l-side">What's New !</h2>
<ul class="new">
<li>9/30 初心者の館基礎知識編を刷新</li>
<li>9/26 デザイン論１つ、CSSテク１つ追加</li>
</ul>
</DIV>
<!-- ぼやっきー -->
<DIV id="mes">
<h2 class="l-side">管理人のぼやき</h2>
<p class="l-side">
制作実習編LV2ではテーブルタグを使って、
ハイブリッドデザインに挑戦。<BR>
ハイブリッドデザインは、レイアウトが簡単にできる上に
デザインも崩れにくく、スタイルシートをほとんど使用しない
テーブルデザインよりも更新のしやすさが数段上です。<BR>
スタイルシートの使い方に慣れてきたら、
このタイプのデザインに挑戦することをおすすめします。
</p>
</DIV>
</td>
ボックスのデコレーション
デコレーションとは言っても枠線をつけるだけですが、なかなか重要なポイントが含まれています。
全体の横幅を290pxにしたいのですが、widthは288pxになっています。理由は分かるでしょうか？
全体の横幅はwidthの値＋左右のborderの値の和＋左右の余白の値の和で決まるので、
今回の場合は左右のborderの値の和＝2pxぶんwidthを縮める必要があるのです。
？という人はボックスを理解しようの図を見てみましょう。
#new{
width:288px;
margin-top:10px;
border-color:#663300;
border-width:1px;
border-style:solid;
}
#mes{
width:288px;
margin-top:10px;
border-color:#663300;
border-width:1px;
border-style:solid;
}
ポイント
ここでのポイントは、
- 全体の幅の計算方法を間違えない
- こまめにチェックをする
の２つです。
複雑なレイアウトを組む場合は幅の設定に気を配る必要があります。
（とは言っても自分ではどうしようもないブラウザーのバグもありますが）
LV1では4章に分けてやってきたことを1章でやってしまっています。
各段階ごとにどのように変化をしていくのかを確かめながらやってみてください。
こまめにチェックしながら作っていくことで、上手くいかないときも早く修正できます。
確認
できたらindex.htmlをブラウザーでどのように表示されるか見てみましょう。
これで半分完成です。次は右側のデコレーションをします。