スタイルシート（CSS）基礎講座
スタイルシートのデザインを完成させよう
さて後は細かいところを修正していきましょう。 まずは、タイトルの下に左部分の色が少し回りこんでいるのが気に入らないので、h1の部分に1行追加して以下のようにします。
h1 {
color: #FFFFFF;
background-color: #669900;
padding: 15px;
text-align: center;
margin: 0px; ←ここが追加
}
「サイトマップ」をデザインします。<h3></h3>で囲まれた部分ですのでスタイルシートに以下のように追加します。
h3 {
color: #FFFFFF;
background-color: #CC0000;
text-align: center;
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
次はテーブルの写真の表示です。まず、HTMLの画像表示の記述部分に「class="top_img"」を以下のように追加します。
<div class="top_img"><img src="image/table.jpg" alt="店内写真" width="240" height="180"></div>
そしてさらに、スタイルシートに以下の記述を追加します。
.top_img {
background-color: #B2947A;
text-indent: 30px;
display: block;
}
ちょっと駆け足でしたが最後の微調整です。サイトを確認してみましょう。こうなっていますか？あとは同様の手順でリンク先のページを作っていけばよいわけです。 スタイルシートファイルは同じファイルを使えば良いですから制作のスピードも上がるでしょう。
最初はデザインがうまくいかないでしょう。まずスタイルシートとHTMLになれるためにも「HTMLテンプレート」の利用がおすすめ。 タグの記述法も説明していますから、よーくご覧になって少しずつ身に付けていきましょう。まずはやってみないと覚えられませんよ。
