デザインを考える

変えたい箇所を考えるで表示したページは非常に殺風景なものです。どのようにしたいかを考え、どのcssプロパティを使えばよいか考えてみましょう。最初にデザインを考えるより、必要な要素をHTMLで記述してから考えたほうが具体的にイメージしやすいのではないでしょうか。

余白を取る

余白を取るのはmarginプロパティでしたね。bodyタグにmarginプロパティを使うことによって、ウインドウの端からの余白を取ることができます。どの程度取るかは内容にもよりますが、ここでは左右200ピクセル、上下50ピクセル空きを取ってみます。実際には表示を確認しながら微鯛藍していくとよいでしょう。スタイルの設定方法ですが、外部スタイルシートファイルを作成する方法にします。右のように記述して、ファイル名をstyle.cssとして、HTMLファイルと同一階層に保存することにします。HTMLファイルのほうにも、スタイルシートを読み込む設定を記述します。ここでいったん表示して、余白が設定されていることを確認します。

見出しを自立たせる

次に見出しに色を設定して、目立つようにしてみましょう。見出しのh1、h2タグの背景色を「#cc66ff」、文字色を自にする設定を加えます。

写真まわりをグループ化する

量後に写真と、その見出し、説明文をコンパクトにまとめてみます。写真にはfloatプ口パティを「left」と指定し、説明文を右に回りこませるようにします。このとき、floatプ口パティの解釈がフラウザによって若干遣うので、写真の見出し、写真、写真の説明をdivタグでグループ化して、高さを設定しておきます(ここでは写真の高さより少し高い200px。また、画像とテキストの聞に少しマージンをとります。最初のうちは面倒でも、1つ設定を行ったら表示を確認するようにして、おかしなところは微調整していきましょう。

トップページにもスタイルを適用

トップページにも同じスタイルシートを読み込ませる設定を記述します。このように、共通のスタイルを複数のページに簡単に設定できるのが外部スタイルシートファイルを使う利点といえます。これでひとまず完成です。あとはいろいろと自分の工夫を加えてみてください。