|
カテゴリ:パソコン・ネットワーク・家電・ケータイ
昨日の続編です。
プロのWeb制作者にとっては当たり前のことですが、 僕が作成するWebページはCSSに重きを置いています。 CSSとは「カスケーディング・スタイル・シート」の略。 用語説明はこちらをご覧ください。 文書というのは何からできているでしょうか。 分解していくと、「見出し」があって「本文」がある。 「本文」の中には「箇条書き」も出てくることがありますし、 「表」もあります。 ときには「画像」なんてのも入っていたりします。 そういえば「見出し」にも「大見出し」「中見出し」「小見出し」と ランクの異なる種類がありますよね。 このように文書を構成する要素はさまざま。 で、本来HTMLというのはその構成要素を 定義していく言語なのです。 つまり、 1)「この行は『見出し』だよ」 2)「ここからここまでは『本文』だよ」 3)「これは『箇条書き』だよ」 といった感じ。 で、実際のHTMLはどうなっているかというと、 1)→<h1>●●●</h1>『見出し』 2)→<p>●●●………</p>『本文』 3)→<li>●●●●</li>『箇条書き』 というぐあいに、 『タグ』と呼ばれる<>で表現した記号を挟むことで定義します。 このように文書の構造を取り決めたのがHTMLであり、 もともとは書式情報を持っていません。 ところがこれをブラウザ(インターネット・エクスプローラ等)で 「カラフルに、好きなように表示させたい!」 という要求が出てくるのは当然。 そこで、 「『見出し』は画面上センタリングにして 文字サイズは12ポイントで、文字色は赤で……」 なんていう書式情報をHTMLに埋め込もう、 ということになります。 これをHTMLのタグ内に入れると、こんな感じになります。 <h1 align="center"><font size="12pt" color="red">●●●</font></h1> 実際に表示させると↓ ●●●でもこれ、意外に大変。 というのも同じ属性の見出しタグすべてに これらの要素を入れないといけませんから。 これをCSS化するとどうなるか。 h1{ font-size:12pt; font-color:red; text-aline:center; } ↑こういう記述をCSSファイルに仕込んでおき、 本文のHTMLに関連づけておきます。 すると本文上では単に「<h1>」を入れておくだけ。 あとはブラウザが両方を読み込んできちんと解釈し、 上とまったく同じ体裁で表示するのです。 たとえば車のボディを作るときに、 1台ずつハンマーで打ち出していくのが昔のやりかた。 今は精密な金型を作ってプレスしていく。 どっちが生産性が高いか、言わずもがなですね。 CSSを使ったWeb制作は、さも金型プレスと似たところがあります。 こうなるとHTML側は単に文書構造を記述するのみ。 書式情報はCSSにまとめる、という役割分担ができ、 データ管理がとてもやりやすい。 たとえば見出しの文字サイズを 12ポイントから15ポイントに変更したいとします。 HTMLにすべての書式を書き込んでいると、 すべての見出しに修正を入れないといけない。 人間が手で修正するので修正が漏れることもあります。 しかしCSS化しておけば、CSSの書式定義を1箇所直し、 h1{ font-size:15pt;(←「12pt」を「15pt」に変更) font-color:red; text-aline:center; } とするだけで、すべての見出しが 15ポイントで表示されるようになります。 それに、HTML側のデータが少なくて済むので、 Web画面を開くスピードも心持ち速くなります。 ちなみに「知る会HP」のこちらの画面の見出し。 実際のHTMLでは、 <h1>講演会・寄稿アーカイブ館</h1> としています。なんの変哲もない見出しタグです。 で、CSSの方はどうなっているかというと、 h1 { font-size:1.5em;【文字サイズは基本の1.5倍】 background-image:url(../img/h1.gif);【h1.gifを背景画像に】 background-repeat: no-repeat;【背景画像は繰り返し表示しない】 text-indent: 40px;【テキストは左端から40ピクセル目から開始】 line-height: 50px;【行間は50ピクセル】 margin-bottom: 10px;【下辺と次行の間を10ピクセル空ける】 margin-left: 5px;}【左端と行の左辺の間を5ピクセル空ける】 とまぁこんな感じでかなり細かい書式設定をしています。 今の商用Webは、このCSSを使うことが大前提。 こんなところも「プロ風に見せる」という小ワザを利かしています。 ちゃんとCSSするためのスタイルガイド入門 お気に入りの記事を「いいね!」で応援しよう
[パソコン・ネットワーク・家電・ケータイ] カテゴリの最新記事
|
|