レイアウトの作成 (4/6)

続いて、スタイルシートのファイルを用意しましょう。

スタイルシートなどの静的ファイル（プログラムを使い、その場で内容を生成するのではなく、ファイルとして設置したものがそのまま使われるもの）は、「src」フォルダには用意されません。

では、どこにあるのか？というと、「webroot」というフォルダです。この中には、以下のようなフォルダが用意されています。

「css」フォルダ――スタイルシートのファイルを用意するところです。
「img」フォルダ――イメージファイルを用意するところです。
「js」フォルダ――JavaScriptによるスクリプトファイルを用意するところです。

これらの場所にファイルを配置しておき、それらを読み込むためのメソッドを利用することで、Webページ内からファイルを利用できるようになります。

では、「css」フォルダの中に、「sample.css」という名前でファイルを用意しましょう。そして、下のリスト欄のようにソースコードを記述して下さい。

今回は、body、h1のタグと、#header、#footerのそれぞれのIDにスタイルシートを設定してあります。#header、#footerは、先ほど作成したレイアウトテンプレートの中で、ヘッダーとフッターのタグに使っています。

これは、あくまで参考例ですので、これをベースに、それぞれでスタイルシートを用意すると良いでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

body {
    font-size:16px;
    color:#660000;
}

h1 {
    font-size:20px;
    font-style:bold;
    background:#990000;
    color:white;
    padding:5px 10px;
}

#header {
    font-size:9px;
    color:#666666;
    text-align:center;
}

#footer {
    font-size:9px;
    color:#666666;
    text-align:right;
    border:1px solid #999999;
    border-width:1px 0px 0px 0px;
    margin: 50px 0px 0px 0px;
}