|
今回のポイント CSSはタグに対しての書式指定である CSSはプロパティ指定で記述して元の形を上書きする |
今回は，実際に生のテキストをHTML化してCSSを適用するまでを見てみることにします。デザインを適用する流れを理解してください。
ベースになるテキスト・ファイルをブラウザで開いてみました（図1）。ブラウザは生のテキスト・ファイルでも開くことができます。テキスト・ファイルをブラウザで開いた場合は右端での折り返しがなく，水平スクロールバーが長く出ているのがわかります。
 |
| 図1●プレーンテキストをブラウザで開いたところ。当然何の飾りもない [画像のクリックで拡大表示] |
このテキストは私のブログのある1日の記事を取り出してきています。長めではありますが，ありえないほどの長文ということもありません。いろいろなブログで散見されるように1文ずつ改行を入れるといったことはせず，段落をドンとまとめて書くタイプの文章です。
このテキストをHTML化します。今回は<h1>と<p>，一部に<strong>を使用します。見出しは冒頭部だけで，あとはすべて段落という構成です。HTML化してブラウザで確認すると図2のようになります。
 |
| 図2●HTML化したテキスト。この段階で見た目の大きな変化は右端が折り返されるようになったこと [画像のクリックで拡大表示] |
HTML化すると文章は右端で自動的に折り返すようになります。さらに，<h1>は大きく太字に，<strong>は太字になっています。これは先に説明したようにブラウザが勝手にやっていることです。HTMLレベルで考えると書体指定ではなく意味指定しかしていません。
図2はブラウザを縦長にして表示しています。ブラウザの縦横比をどういう感じで開くかは個人差が大きいところですが，身内の話を許していただけるなら，うちの嫁などは全画面で，しかもワイド表示のディスプレイですので横長になります（図3）。
 |
| 図3●横長にするとどう見えるかも確認する [画像のクリックで拡大表示] |
横長にしても縦長にしても生HTMLなのでさほど印象に違いはありません。ただし文字は常にブラウザの右端までいってから折り返しますので，横長にすると1行の文字数は長大です。1行の文字数が長すぎると読むのは少し苦痛になってきます。この感覚を感じ取ってください。
ブログなどで1文ずつ改行を入れている方達は，おそらく直感的に横に長いテキストが読みにくいということを知っています。そこで1文ずつ改行することで，1行当たりの文字数を削り，読みやすさを確保しようとしているのだと思われます。1文ずつ空改行を入れるという人たちも，おそらくは1行ずつの読みにくさを避ける意図があるんでしょう。つまり横に長すぎる文章というのは，とても読みづらいということです。
