ステップ５〜右サイドのデコレーション〜

前回に続いてスタイルシートでデコレーションをしていきます。
結構長いですが、基本的にコピペするだけなので、安心してください。
今回は右側のデコレーションをします。

---

原稿をセルの上部に引き上げる

つかうプロパティはvertical-align:top;で、これをtd#main-rightに追加します。

td#main-right{
    width:400px;
    vertical-align:top;
}

見出しデコ＆余白調整

見出しのデコレーションと、本文の余白を調整します。
左側とは見た目を変えたいので、classを使用することにします。
テクニックとしてボーダーで装飾、 リストのインデントを使用しています。

h2.r-side{
    margin:0px;
    font-size:large;
    border-color:#663300;
    border-width:1px 100px 1px 10px;
    border-style:solid;
    background-image:url(./img/head-menu-back.gif);
    padding:2px 0px 2px 2em;
}
p.comment{
    border-style:none solid solid none;
    border-width:1px;
    border-color:#663300;
    padding:3px;
    margin:10px 1em;
}

リストのデコレーション

コンテンツリストのデコレーションをします。
テクニックとして リストのマーカーに画像を使う、 リストのインデントを使用しています。

ul.contents{
    list-style:none;
    margin:0px;
    padding:0px 1em;
}
li.content{
    list-style:none;
    background-image:url(./img/point-s.gif);
    background-repeat:no-repeat;
    padding:0px 20px;
    margin:3px;
}

HTMLにclassを設定する

見出しデコ＆余白調整で作ったclassをHTMLに適用させるためindex.htmlに手を加えます。 （赤字が手を加えた部分）

<!--======メイン右====== -->
<td id="main-right">
<!-- 初心者の館 -->
<DIV id="beginer">
<h2 class="r-side">初心者の館</h2>
<p class="comment">
スタイルシートでデザインされたページに興味のある方へ贈るページ。
CSSでページをデザインしていく工程や知っておきたい知識紹介しています。
ここを読めばあなたも「脱・CSS初心者」
</p>
<ul class="contents">
<li class="content"><A href="#">一覧　現在??項目</A></li>
<li class="content">最新のデーター</li>
<li class="content"><A href="#">制作実習編LV1</A></li>
<li class="content"><A href="#">制作実習編LV2</A></li>
</ul>
</DIV>

<!-- 私的デザイン論 -->
<DIV id="design">
<h2 class="r-side">私的デザイン論</h2>
<p class="comment">
デザインに関するよもやま話がいろいろ。
もっとカッコいいページを作りたいっ！という人が見るとヒントがあるかもね。
</p>
<ul class="contents">
<li class="content"><A href="#">一覧　現在??項目</A>
<li class="content">最新のデーター</li>
<li class="content"><A href="#">見た目か？中身か？</A></li>
<li class="content"><A href="#">フォント de 素材</A></li>
</ul>
</DIV>

<!-- CSSテクニック -->
<DIV id="css-tec">
<h2 class="r-side">スタイルシートテクニック</h2>
<p class="comment">
スタイルシートでどんなことができるのかをあれこれ試した成果です。
ワンランク上の使い方を知りたい方はぜひご覧あれ。
</p>
<ul class="contents">
<li class="content"><A href="#">一覧　現在??項目</A></li>
<li class="content">最新のデーター</li>
<li class="content"><A href="#">四角を描く</A></li>
<li class="content"><A href="#">ulタグでメニュー</A></li>
</ul>
</DIV>

</td>
</tr>

ボックスのデコレーション

デコレーションとは言っても枠線をつけて余白を設定するだけです。 marginやborder-styleの上下左右の指定順序に気をつけましょう。 上、右、下、左の順です。

#beginer{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}
#design{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}
#css-tec{
    margin:10px 10px 10px 5px;
    border-color:#663300;
    border-width:1px;
    border-style:none none solid solid;
}

ポイント

ここでのポイントは、

1. 上下左右の指定順序
2. こまめに確認すること

の２つです。
上下左右の指定方法を覚えると、いちいちmargin-top、margin-leftなどと書かなくていいので
時間の短縮や、ファイルサイズの軽減をすることができます。ぜひ使えるようになってください。
LV1では4章に分けてやってきたことを1章でやってしまっています。
各段階ごとにどのように変化をしていくのかを確かめながらやってみてください。
こまめにチェックしながら作っていくことで、上手くいかないときも早く修正できます。

確認

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

ステップ５終了時点

ほとんど完成ですね。あとは著作権のところをちょっといじるだけです。

---