前提条件：デザインの変更はしない（デザイン変更は中級者以上）
１．色の変更
２．枠の変更
ここでは以上の２項目が重要課題となります。
スポンサードリンク
１．色の変更
コンサルティング系企業をテーマにしてみました。落ち着きのある洗練された配色としました。
青系をメインとサブに使うと落ち着きのあるページになります。
２．枠の変更
ここでは枠を広げ、小さな文字を入れてみました。それでは枠を設定する際のおさらいです。
この余白はパディングpaddingです。一括指定する場合はpadding:上、右、下、左 となります。
個別に指定する場合は、padding-left:、padding-right:、padding-bottom:、padding-left: となります。
padding:3px;
上下左右3pxずつの余白です。
padding-top:5px;
上のみ5pxの余白です。
padding-left:5px;
左のみ5pxの余白です。
この余白はマージンmarginです。一括指定する場合はmargin:上、右、下、左 となります。
個別に指定する場合は、margin-left:、margin-right:、margin-bottom:、margin-left: となります。
margin:20px;
上下左右20pxずつの余白です。
margin-top:5px;
margin-bottom:5px;
margin-left:10px;
margin-right:10px;
は次のよう記述することも出来ます。
margin:5px 10px 5px 10px;
その他
ここではメニュー部分は色を除きサンプルのHTMLとスタイルシートをそのまま使っています。縦には融通が利く事がわかると思います。
Chapter5 TOPに戻る。