manekineko倉金家ホームページ

趣味の部屋／ホームページ余話

HTML5への対応 <font>タグ

２０１１年４月２０日 ２０１１年１１月４日 修正
　HTML5では<font>タグがなくなる。かわりにstyle指定をすることになる。
で、外部cssのclassによく使う色や文字のサイズなどを定義して使うことにした。
結果、前よりかえって楽になった。もっと早く気がつけばよかった。

　HTML5でのフレーム対応 がうまくできて、次に問題となるのが<font>タグ。
これについても対策を考えるとしよう。

　実を言うと私はページの中の文章などのスタイル指定には昔から外部スタイルシートは使わない。必要があればその場で指定するようにしている。そもそもページをつくるときはブラウザの編集窓から文章(必要ならタグも含めて)を打ち込むだけなので、基本的にはそうせざるをえない。で、文字(フォント)の色(color)やサイズ(size)を変えるのに時折<font>タグを使用してきた。

　HTML5ではこの<font>タグはなくなるので、どうしようか。
いちいち<span style="color:red; background-color:white; font-size:small; font-weight:bold;">...</span>などと書くのも長々しくてめんどいな。
単にみてくれをちょっと変えるだけなのになんでいちいちこんな面倒なことをしなくてはならんのだ？

　で、何かいい方法はと考えて今回は外部スタイルシートを使用することにした。
みてくれを表現するキーワードをそのままクラスとして定義してしまおう。

外部スタイルシートの内容
default.css として、以下を定義。
/*
よく使う文字色と背景色(HTML標準16色)、書体、サイズなどの指定をclassとして定義。
<tag class="red bg-silver large bold">などと列挙して使用。
*/

/* 文字色 */
.black    { color:black; }
.gray     { color:gray; }
.silver   { color:silver; }
.white    { color:white; }
.aqua     { color:aqua; }
.blue     { color:blue; }
.fuchsia  { color:fuchsia; }
.green    { color:green; }
.lime     { color:lime; }
.maroon   { color:maroon; }
.navy     { color:navy; }
.olive    { color:olive; }
.purple   { color:purple; }
.red      { color:red; }
.teal     { color:teal; }
.yellow   { color:yellow; }

/* 背景色 */
.bg-black   { background-color:black; }
.bg-gray    { background-color:gray; }
.bg-silver  { background-color:silver; }
.bg-white   { background-color:white; }
.bg-aqua    { background-color:aqua; }
.bg-blue    { background-color:blue; }
.bg-fuchsia { background-color:fuchsia; }
.bg-green   { background-color:green; }
.bg-lime    { background-color:lime; }
.bg-maroon  { background-color:maroon; }
.bg-navy    { background-color:navy; }
.bg-olive   { background-color:olive; }
.bg-purple  { background-color:purple; }
.bg-red     { background-color:red; }
.bg-teal    { background-color:teal; }
.bg-yellow  { background-color:yellow; }

/* 文字の大きさ */
.xx-large { font-size:xx-large; }
.x-large  { font-size:x-large; }
.large    { font-size:large; }
.medium   { font-size:medium; }
.small    { font-size:small; }
.x-small  { font-size:x-small; }
.xx-small { font-size:xx-small; }
.larger   { font-size:larger; }
.smaller  { font-size:smaller; }

/* 書体等 */
.normal     { font-weight:normal;font-style:normal;text-decoration:none; }
.bold       { font-weight:bold; }
.italic     { font-style:italic; }
.monospace  { font-family:monospace; }
.underline  { text-decoration:underline; }
.strike     { text-decoration:line-through; }

/* 空白文字,改行の表示指定 */
.nowrap     { white-space:nowrap; }
.pre        { white-space:pre; }
.pre-wrap   { white-space:pre-wrap; }
.pre-line   { white-space:pre-line; }

/* レイアウト関係 */
.block-left   { margin-left:0px;margin-right:auto; }
.block-center { margin:auto; }
.block-right  { margin-left:auto;margin-right:0px; }
.text-left    { text-align:left; }
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.text-top     { vertical-align:top; }
.text-middle  { vertical-align:middle; }
.text-bottom  { vertical-align:bottom; }
.left   { margin-left:0px;margin-right:auto;text-align:left; }
.center { margin:auto;text-align:center; }
.right  { margin-left:auto;margin-right:0px;text-align:right; }
.top    { vertical-align:top; }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }
.hidden { visibility:hidden; } /* 表示しないだけで領域は確保。レイアウト調整用。*/

これにその他多少のHTML5対応項目やサイトのディフォルト設定なども追加した。
(ダウンロード用ファイルは「ダウンロードの小部屋」に置いてあります。その他お薦めのファイルなども置いてありますのでぜひ覗いてみてください。)

　そしてページの<head>...</head>内に、
<link rel="stylesheet" type="text/css" href="default.css">
などと書いてこの定義を取り込むか、ページにincludeする。

　これで<font>の代わりに<span>などで、たとえば
<span style="color:red; background-color:white; font-size:small; font-weight:bold;">
と書くべきところを、
<span class="red bg-white small bold">
といった具合に適用したいスタイルの定義を空白で区切って列挙すればＯＫ。
もちろん<span>以外のタグにも使えるし、自分独自の定義をいろいろ追加してもいい。

　はっきり言って前よりもずっと楽になった。もっと早く気がつけばよかった。

<font>タグはファイル内を検索して<span class="...">とかに書き直した。これがけっこうあった。

　またその他のタグの属性指定(width=, align=, border= など)もなるべくstyle="..."の形に書換えたが、そうするとMSIE７以下ではうまく設定が反映されずレイアウトが崩れてしまうことが友人からの連絡でわかって一部元に戻し、結局古い書き方も随所に残ってしまってはいる。
　MSIE7以下のユーザはいまだに多いし、まして友人知人が使っているとなるとこれは対応せざるを得ない。概ね私と同じ年金生活者だから新しいパソコンに買い替えろなどとはとても言えない。

　HTML5完全対応というのはまだちょっと時期尚早だな。これにてしばし休止！
そうは言ってもいずれどこかで古いブラウザはきっぱり無視する決断をしないと結局完全なHTML5対応などできないようだ。

　さらに言うと、この方法は基本的には古い視覚制御用タグである<font>などを一見使わずにCSSに置き換えただけで、実質的にはやっていることは変わりません。
最近のHTMLではより意味づけ、構造化などにタグの性質が変化してきていますので、本来ならばそれを遵守して付帯的な視覚効果としてこのようなCSSを使うのがいいのだそうです。
プロを目指す人は安易に<div>や<span>などを使ってこんな真似をせずに、本来のタグとCSSの使い方をされた上で、それでも必要な場合にのみこんな手も使うというのが正解かと思います。
　もっとも私は読んでくれる人(人間)に自分の意志を伝えるのが第一、ただし使えないタグは使わないなど最低限の文法ルールは守りましょうというだけのことで、それ以上に人に何も伝わらない意味づけタグや構造化タグに労力を割いて情報収集ロボットなどに媚びへつらおうなどとははなから思ってはおりません。
(もちろんちゃんとやった方がいいんだろうけどネ。W3Cの規範を盾にやたら偉そうなこと言う人もいるし。)
でも私はあまり意味のないものは重要視しません。意味があると思うようになったらやればいいし。

でもこれでやるとほんと楽なんだわ！
(楽にできるということが特に個人がホームページを続ける上で非常に大事な要素なんです。)


　余談ながら私はHTML5の方向性には多少の不満と疑問を持っています。情報収集ロボット向けと思われる(読者には見えない)意味づけタグなどがやたら増えた代わりに人間に微妙なニュアンスを伝えられる簡潔な視覚制御タグが削除されてcssへと押し込められていきます。今のロボットはcssファイルなど読んではいません。効率よく情報収集しようとするどこかの情報収集機関の意向が入っているのではとさえ疑いたくなります。
　そういう私は上記の大まかなcssファイルは使いますが、なるべく直近のタグに都度その場でそのときの気分に最大限マッチした視覚制御スタイルを記述するよう、あえて努めています。
　...古来より人は、限られた手段の中であらゆる努力と工夫をし、自分の気持を人に伝えようとしてきました。
もし意味づけタグやスタイルシートだけでそれをやろうとすると、人間の感情すべてについてそれを定義しなくてはなりません。
でも時に応じてその場その場でstyleを駆使して文字の大きさや太さや色を変えたり枠で囲ったり...、その方が細やかな表現ができるというもの。さらによい方法(もちろん楽にできなくてはだめだね)も提示せずそれはよくないというだけの単なる権威主義者の主張には私は全く応じることはできませんでした。
　最近この思いに似たようなことを書いてあるサイトに行き当たりました。
なんと言ってもサイトの他の記事の内容も本質的に的を得ているように思うし、またとってもおもしろいのでブックマークして毎日すこしずつ読んでいます。これを書いている人は多岐にわたって深い見識のあるすごい人だな。きっと。

お薦めです！ → HTML5対応：divで乗り切れ: 万象酔歩

なおHTML5対応を検討していく中で書いた以下のページもぜひご覧ください。
　HTML5への対応 フレーム
　ページのレイアウトに<table>を使ってはいけない？