Semi-long Communication:今日の料理--HTML文書のCSS添え

(published: May. 18, 2001)

「こんばんは、今日の料理の時間です。今日のお献立は、HTML文書のCSS添えLynx風です。それでは先生、宜しくお願いします。」

「ハイどーも。それではまず材料を紹介しますネ。まず、鮮度の良いHTML文書を用意しますネ」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
 <head>
  <title>新鮮なHTML文書</title>
 </head>
 <body>
  <h1>新鮮なHTML文書</h1>
   <p>
    これは、新鮮なHTML文書です。
   </p>
   <h2>新鮮なHTML文書とは</h2>
    <p>
     鮮度の良いHTML文書を、新鮮なHTML文書といいます。
    </p>
 </body>
</html>

「これは、HTML 4.01 strict準拠の文書ですね」

「ハイそーです。文書の構造は明確に示されていて、それ以外の物理指定が何一ツ入っていないのがポイントですネ」

「今日はどんな味付けをするのですか」

「それについてはこのリストを見て下さいネ」

背景は白、文字の色は黒
文字のサイズは中ぐらい
天地左右に2文字分のマージン
行間に0.5文字分の隙間
見出しは大きめの文字でボールド(全レベル共通)
第1見出しはセンタリング、それ以下の見出しは左マージンの深さで差別化
段落の先頭行は1文字分下げる

「見出しの文字のサイズを統一するのが、Lynx風なのですね」

「ハイそーです。こうやって予め全体のイメージをまとめておくと、調理がしやすいンですネ」

「あっ、早速スタイル宣言の調理を始めていますね」

「ハイ、まず文書全般のスタイル宣言ですネ」

body{ color: #000000;
      background-color: #ffffff;
      font-size: medium;
      margin-left: 2em;
      margin-right: 2em;
      margin-top: 2em;
      margin-bottom: 2em;
      line-height: 1.5 }

「ここで殆どの宣言を済ませてしまっていますね」

「ハイ、こうしますと、文字の色や行間の幅などが文書全体に行き渡りますので、以下の調理が非常に簡単になるンですネ。これを継承て言うンですネ」

h1,h2,h3,h4,h5,h6{ font-size: larger;
                   font-weight: bold }

「次は見出しのスタイル宣言ですね」

「ここでは見出し要素全体に共通する宣言を行っていますネ」

h1{ text-align: center }
h2{ margin-left: 0em }
h3{ margin-left: 1em }
h4{ margin-left: 2em }
h5{ margin-left: 3em }
h6{ margin-left: 4em }

「そして、各レベルの見出し要素の特徴となるスタイル宣言を行うンですネ」

「成る程、先に共通の宣言をして、細かい宣言は後で行うのですね」

「ハイそーです」

p{ text-indent: 1em }

「最後に、段落要素のスタイル宣言ですネ。こうして出来あがったスタイル宣言がこちらにありますネ」

body{ color: #000000;
      background-color: #ffffff;
      font-size: medium;
      margin-left: 2em;
      margin-right: 2em;
      margin-top: 2em;
      margin-bottom: 2em;
      line-height: 1.5 }
h1,h2,h3,h4,h5,h6{ font-size: larger;
                   font-weight: bold }
h1{ text-align: center }
h2{ margin-left: 0em }
h3{ margin-left: 1em }
h4{ margin-left: 2em }
h5{ margin-left: 3em }
h6{ margin-left: 4em }
p{ text-indent: 1em }

「このスタイル宣言を先のHTML文書に添えれば、出来あがりなンですネ。例えばスタイル宣言をsoemono.cssという形式で保存したなら、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
 <head>
  <link rel="stylesheet" href="soemono.css" type="text/css">
  <title>新鮮なHTML文書</title>
 </head>
 <body>
  <h1>新鮮なHTML文書</h1>
   <p>
    これは、新鮮なHTML文書です。
   </p>
   <h2>新鮮なHTML文書とは</h2>
    <p>
     鮮度の良いHTML文書を、新鮮なHTML文書といいます。
    </p>
 </body>
</html>

という風に、リンク要素を使って添えるだけで、文書全体にスタイルが行き渡るンですネ」

「わぁ、本当に美味しそうに出来あがりましたね。それでは、今日のまとめです」

予め全般のスタイルの設計図を作っておく
一般的な(大まかな)指定を先に行い、特殊な(細かな)指定は後で行う

「先生、今日はありがとうございました」

「ハイどーも」

「それではまた明日」

おしらせ

番組で紹介したHTML文書とスタイル宣言、そして出来あがりの品のダウンロードサービスがございます。どうぞご利用下さい。

H-man AND NOW
作：Nishino Tatami (ainosato@vc-net.ne.jp)