remove
powerd by nog twitter

ORE.CSS 2nd EDITION

<font> の功罪

ホームページビルダーなどの HTML生成ソフトを用いずに、 タグ打ちで HTMLによるマークアップを試みる初心者もいるでしょう。 現に私がそうでしたし、最初の頃、赤子同然であるベイビーエディターは、 <font> などの物理的タグを重宝します。

HTML とは何なのか? そんなコトはどうでもよく、 文章なり画像なりをアップロードして不特定多数の人に見てもらうコトを熱望するものです。 ともかく、理屈よりも見た目重視ですから、<font> の存在は便利で頼もしいわけです。 当然、乱用します。 一方、<h1> <h2> などの見出し系論理タグは、多少なりとも使い方において理解しなければならない点があり難儀します。 躊躇して敬遠するか、間違った使い方を承知で使うかのどちらかになりましょう。

<font> は初心者には有難いタグですが、これが存在するが故に、 論理的構造を無視した HTML構成が可能となってしまいました。 <font> に頼ろうとすれば、見出し、段落、強調といった論理的構造への理解が芽生えません。 <font> による視覚効果は完全にスタイルシートで処理する分野なので、 本来の HTMLタグの役割とは全く異質の論理的なものであります。

近年、スタイルシートの浸透とブログ系ウェブの乱立の2つがウェブにおけるムーブメントだと感じております。 分かる人はスタイルシートを用い、理屈や論理より表現を重んじる人がブログに走るのでしょう。 あるいは、新作映画の予告動画、企業のトップページに表示されるフラッシュ・ムービーといった ブロードバンド普及に乗っかった画像系の発展が目覚しいものです。 うまく言えませんが、この流れで行くと自作系個人サイト業界はドン詰まりになる予感がします。

エディターソフトで作れば似たような構成・レイアウトになり個性が薄れる算段ですし、 タグ打ちを覚えようにもスタイルシートが必須の現在においては初心者にはハードルが高すぎます。 それなら、ブログに行こうかってコトでそれは構わないのですが、 ブログの最大の欠点はサイト内のリンク構造が時系列になっているので、 ビジターが興味を感じる方向にリンクをたどって行くコトが困難なコトです。

何らかの表現を望んだ人が分からんなりに htmlタグを(稚拙に)使って、 しかし、それなりに面白いコンテンツを作成してきた。 スタイルシートとブログの普及はこのような人の(表現の)芽を摘んでいる面があると思います。 だから、内容さえ良ければ <font color="red"> という具合のソースも認める気構えが必要ではないでしょうか。 あとは、fontタグを使う人が徐々にでもスタイルシートへ移行していくコトを祈るのみです。 とにかく、第一に内容ありきだと言わなければ、ウェブの個人サイト業界は閉塞するのみでしょう。


<font> を撤廃する

仮に、HTMLタグで作られたソースがあり、レイアウトも HTMLタグで済ませていたとします。 レイアウトをスタイルシートで再構成すべくソースを書き換えるとしたら、どこから手をつけるか? と、いうハナシになります。 そこで、<font> を撤廃するところからやってみてはどうでしょうか。

<font size="4" color="red">
JAPAN友の会・北米支部・
</font>
<p>
<font size="3" color="black">
ニューヨークに移住したものの寂しくてたまらない。
今日も、バイトの面接で片言英語が通じませんでした。
ジャパン・タワーレコードインシブヤ、
イングリッシュ・ミュージック・コーナーをマネージメント、
スリーイヤーって、言ったのにあのヤロー!
......今度、オフ会しましょう。
</p>

とりあえず、上のようなサンプルを元に手直しを加えてみようと思います。 まず、第一に考えるべきは ”地の文” なんですが、 これはタイトルだとか見出しではないベースとなる文章の体裁です。 要するに、 ”地の文” を指定してしまえば、強調したいような部分だけ文字の体裁をいじればいいわけです。 <font...>雁字搦め</font...> <font...>羽交い絞め</font...> <font...>雁字搦め</font...> という具合にフォントタグを On 、 Off 、 On 、 Off... する手間も省けます。

<style type="text/css">
<!--

body {
      font-size: medium;
      font-family: '平成角ゴシック','MS Pゴシック',sans-serif;
      color: black;
      line-height: 1.5
}

-->
</style> 

このように、<body> に設置する形でフォント関連を指定してやれば ベースとなる文章にフォントを指定する必要が無くなります。

<span style="font-size: larger; color: red">
JAPAN友の会・北米支部・
</span>
<p>
ニューヨークに移住したものの寂しくてたまらない。
今日も、バイトの面接で片言英語が通じませんでした。
ジャパン・タワーレコードインシブヤ、
イングリッシュ・ミュージック・コーナーをマネージメント、
スリーイヤーって、言ったのにあのヤロー!
......今度、オフ会しましょう。
</p>

こんな感じに修正してやれば CSS への移行ができるのではないでしょうか。


CSS 設計事務所(TOP) / 第二部冒頭 / ハッスルコラム