bodyタグ

ここから実際にブラウザに表示される文章になります。<body>と</body>で文章を囲います。<body>は</head>直後に記述し、</body>は</html>直前に記述します。ＨＴＭＬ部分では<body>と</body>を記述するだけですが、今回は、はじめてスタイルシート部分に記述します。

HTML部分

・
・
</head>
<body>
</body>
</html>

スタイルシート部分

 body {
   background : #ffffff;
   margin : 0px ; padding : 0px;
   font-size : 100%;
   font-family : Geneva,Hiragino Maru Gothic Pro,
VERDANA,ARIAL,SANS-SERIF;
   line-height : 150%;
   color : #000;
 }

HTML部分の解説は冒頭で述べた通りです。スタイルシート部分の解説をします。

bodyで全体の文字サイズや文字色などを指定しています。ここで指定したスタイルは、後に指定するヘッド部分、記事本文部分やメニュー部分などで指定していないスタイルが適用されます。

各セレクタの解説

background: #ffffff;

背景色を指定します。

margin : 0px ; padding : 0px ;

全体のマージンとパディングを指定します。画面一杯に表示させるので0pxにしています。

font-size: 100%;

文字サイズを指定しています。

font-family : Geneva,Hiragino Maru Gothic Pro,VERDANA,ARIAL,SANS-SERIF ;

使用するフォントを指定しています。他の部分では指定していないのでここで指定したフォントが全ての文字に反映されます。また、適用されるフォントは、左から優先されます。閲覧者のPCにGenevaというフォントがインストールされていない場合はHiraginoに、それも無ければMaru Gothic Proになります。

line-height : 150%;

行の高さを指定しています。行の高さとは、改行した場合の行と行の間隔の事です。

color: #000

文字色を指定しています。

ゼロから創るテンプレートトップ

  1. bodyタグ
  2. 全体のリンク色
  3. 全体のレイアウト
  4. 全体をallで囲む
  5. h1-ブログタイトル部分
  6. intro-ブログ紹介文部分
  7. body〜introソース

前後の記事

最近の記事