CSSの記述

HTMLを書いただけの場合、各タグの表示スタイル(文字色、背景色、サイズなど)はブラウザのデフォルト定義によって決定されます。
この表示スタイルを変更したい場合は、CSSを記述する必要があります。

CSSはテキストファイルで、以下のような形式で記述します。

スタイルを定義したい要素 {
    プロパティ名: プロパティ値;
    ...
}

...(上記の繰り返し)

スタイルを定義したい要素(タグなど)を明示し、プロパティの名前と値の組を記述していきます。
なお、ここでは簡単にしか説明しません。詳しくはWEBなどで調べるようにしてください。

スタイルを定義したい要素には以下のような記述をすることができます。


また、プロパティに指定可能な値には以下のようなものがあります。

プロパティ 用例 説明
font-size
font-size: 12px, font-size: 10.5pt
文字サイズをあらわすプロパティです。
サイズはピクセル単位、ポイント単位などで指定できます。
color
color: #ff0000, color: blue
文字色をあらわすプロパティです。
文字色は#RRGGBB(いずれも16進数値)、色名などで指定できます。
background-color
background-color: #ff0000, background-color: red
背景色をあらわすプロパティです。
背景色は#RRGGBB(いずれも16進数値)、色名などで指定できます。
text-align
text-align: center, text-align: right
文字の配置をあらわすプロパティです。
width, height
width: 100px, width: 10%, height: 100px
タグが占める領域の幅および高さをあらわすプロパティです。
margin
margin: 32px, margin-top: 100px
タグの枠線より外側の余白をあらわすプロパティです。 margin-(top|bottom|left|right)のように特定の上下左右特定の余白のみを定義することもできます。
padding
padding: 32px, padding-top: 100px
タグの枠線より内側の余白をあらわすプロパティです。 padding-(top|bottom|left|right)のように特定の上下左右特定の余白のみを定義することもできます。


ログイン画面CSSの記述

では、さきほどのHTMLファイルにCSSを書き加えてみましょう。

なお、今回はCSSファイル名は todo.cssとします。 具体的には、以下のスタイルを設定することにします。

部位 スタイル
見出し 太字で濃い青色とし、余白を調整する。
水平線 上下の余白を調整する。
テーブル見出し(「ユーザID」、「パスワード」) 背景色を薄い青色とし、文字色を白色とし、余白および幅を調整する。
テキストフィールドがある欄 余白および調整する。
「ログイン」ボタンがある欄 ボタンをテーブル中央に寄せ、余白を調整する。


HTMLファイルに対する変更

HTMLファイルに対する変更点は以下の通りです。

ダウンロード index.css.html
5行目:
  5: <link rel="STYLESHEET" href="todo.css" type="text/css">

CSSファイルへの参照を追加。
CSSファイルへの参照はlinkタグにより記述します。
13~33行目:
 13: <tr>
 14:     <th class="login_field">
 15:         ユーザID
 16:     </th>
 17:     <td class="login_field">
 18:         <input type="text" name="user_id" value="" size="24">
 19:     </td>
 20: </tr>
 21: <tr>
 22:     <th class="login_field">
 23:         パスワード
 24:     </th>
 25:     <td class="login_field">
 26:         <input type="password" name="password" value="" size="24">
 27:     </td>
 28: </tr>
 29: <tr>
 30:     <td colspan="2" class="login_button">
 31:         <input type="submit" value="ログイン">
 32:     </td>
 33: </tr>

各要素にclass属性を追加。
このclass属性に対応するようにCSSファイルを記述します。
ここでは、th, tdタグなどに無条件にスタイルを設定するのではなく、画面ごとにclass属性を用いて設定することを想定しています。


CSSファイルの記述

CSSファイルは以下のように記述します。

ダウンロード todo.css
todo.css
  1: /* 基本のスタイル */
  2: h1 {
  3:     font-size: 32px;
  4:     margin: 0px;
  5:     padding: 4px;
  6:     color: #222288;
  7: }
  8: 
  9: hr {
 10:     margin-top: 8px;
 11:     margin-bottom: 8px;
 12: }
 13: 
 14: /* ページ固有のスタイル */
 15: /* ログインページ */
 16: th.login_field {
 17:     width: 150px;
 18:     text-align: left;
 19:     padding: 8px;
 20:     color: #ffffff;
 21:     background-color: #aaaaff;
 22: }
 23: 
 24: td.login_field {
 25:     padding: 8px;
 26: }
 27: 
 28: td.login_button {
 29:     text-align: center;
 30:     padding: 8px;
 31: }


上記のファイルを適当な場所にダウンロードし、ブラウザで表示を確認してください。
ブラウザには以下のように表示されます。

ログイン画面(2)