古い感じがしてかっこわるいと思うコードの書き方10例
ホームページを作り始めて8年近く経ち、たくさん作った方が上達するという思いもあって、今まで数多くのサイトを作ってきましたそんなサイトたちを改めて見直してみて、「何か古い感じがするな～」と思ったコードを挙げてみます。
完全にこれがダメと言っているのではなく、個人的な好みもあるので、温かい目で見てもらえればと思います。
1. フレームを使っている
ホームページを作りはじめの頃、サイドにあるメニューが１つ増えるたびにすべてのページで変更しなくてはならず、すごい手間でした。
で、サイドのメニューとメインのコンテンツをフレームで分けて表示していました。
しかし、HTML4.01ではフレームは非推奨で、設定する場合の条件として、文書型宣言（DTD）にFrameset を指定しなくてはいけません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
で、HTML5ではエンドユーザのユーザビリティとアクセシビリティに悪影響を及ぼすという理由で、フレームは廃止されています。
インラインフレームは別ですが。
2. centerタグを使っている
centerタグは以前よく使っていましたが、現在非推奨ですのでCSSで対応したいです。
p { text-align : center; }
基本的にはこんな感じでいいのですが、コンテンツを真ん中に表示する分からずによく使っていました。そんなときはこれで解決です。
#container{
width: 200px;
margin: 0 auto;
}
これで中のコンテンツが真ん中によります。
3. レイアウトにテーブルを使っている
tableは表を表すものであってレイアウトのためのものではないので、レイアウトはCSSでおこなった方が好きです。
最初の頃はdivを使ってfloatで回り込ませて、というのがよく分からず使ってしまってました。
以前は、テーブルレイアウト批判に対する批判なんかもあったみたいですが、今は特に聞かれないような。
4. タグが大文字
HTMLでは大文字と小文字どちらでもいいのですが、XHTMLの場合は小文字のみとなります。
ということでHTMLの場合は間違いではないのですが、最近大文字で記述しているサイトもあまり見かけないですし、個人的にも小文字の方が好きです。
5. 改行を連続して使っている
brタグは改行を表します。 <br /> <br /> <br /> このような改行の連続使用は好きではないです。
直接コードを書いている人はあまりしないと思いますが、リッチエディタを使っているとよくあると思います。しかし、基本brタグは2つ以上連続して使用してはいけません。
<p>brタグは改行を表します。</p> <p>連続して使わずpタグとcssで調整しましょう。</p>
このようにpタグでくくり、cssのpadding、marginやline-heightで調整した方が微妙な調整もできていいと思います。
6. 全角スペースで横の間隔を調整している
横のスペースに全角スペースを連続使用していました。
<div>html css javascript php</div>
こんな場合、リストを使って横に並べる方が好きです。結構手間ですが。
<ul id="menu"> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ul>
#menu {
list-style-type: none;
}
#menu li{
float: left;
width:100px;
}
display:block を使うとこのブログでも使っているようなメニューになります。
7. リストを使っていない
html<br /> css<br /> javascript<br /> php<br />
このように改行で箇条書きを表すのではなく、リストタグを使う方がスマートだと思います。
<ul> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ul>
8. bodyタグに要素を指定している
かなり前に作られたサイトでたまに見かけますが、HTML 4.01では非推奨です。
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
bodyタグの要素として、背景や文字などの色を指定する方法ですね。ホームページを作り始めた頃は当然のように使ってました。
body {
background: #ffffff;
color: #000000;
}
a:link { color: #0000ff; }
a:visited { color: #800080; }
a:active { color: #ff0000; }
という感じにCSSで指定しましょう。
9. ワンポイントの画像にimgタグを使っている
これは個人的な好みです。
<img src="point.gif" alt="ワンポイント" /> ワンポイント
このようにワンポイント画像にimgタグで表示するより、CSSで背景画像として表示する方がかっこいいかなと思います。
<div class="point">ワンポイント</div>
.point {
padding-left: 20px;
background: url(point.png) no-repeat left center;
}
画像を背景に指定し、画像の分右側をpaddingで空けています。
CSS Spritesを使っていけばさらにいいですね。
10. border等を一括で指定していない
別に必ず略す必要はないですが、コードは少しでも短い方がいいですね。
border-width: 1px; border-color: #000000; border-style: solid;
このような場合は、以下のように略した方がスマートですね。
border:1px solid #000;この他にも、backgroundやpaddingなど一括で指定できるプロパティは他にもありますのでご参考に。
まとめ
非推奨なものから単なる個人的な好みまで色々挙げましたが、やっぱりHTMLはできるだけシンプルにして、デザインはCSSでおこなう方がスマートな書き方なのかなと思います。
きれいなコードを見て、信用できるサイトだなと感じる人も多いと思いますので、きれいなコードを書きたいものです。
このブログはまだまだきれいなコードではないですが。
@webpark2さんのツイート
「かっこわるい」とか「リストタグを使う方がスマート」などと言っている時点でHTMLを勘違いしています。
まず前提として、近年HTMLは装飾ではなく「意味付け」のための言語とされています。特にHTML4以降はそれを念頭に言語仕様もまとめられました（そのために多数のタグを廃したStrict DTDが用意された）。
そして見た目の整形はCSSによって行われるべきであり、デザインとHTMLは切り離されなければならない、とされています（つまりHTMLは単なる文章であり、機械的に意味を伝えるだけの存在）。
このような記事では、まずそれを念頭において考えるべきです。
改行タグ(<br/>)による改行の連続は「ダサい」からNGなのではなく、改行の連続という行為自体が正確な意味付けにつながらないからです。
そういう改行の連続はもっぱら「文章の区切り」つまり「段落」という意味で使われるが、それは単なる改行の連続ではなくきちんと「段落である」と明示すべきであって、そのために段落タグ(<p>)によって意味付けしなければならない。というのが正確な理由です。
決して改行の連続が格好悪いとか、<br/>が連続してはならないというルールがあるわけではありません。
リストタグの使用も同様で、改行タグによる箇条書きでは機械的に意味を判断できないため、リストタグによって明示的に意味を与えなければならないというのがその理由です。
またレイアウトのための表タグの使用が誤っているのは、本来表という意味を持っていない箇所（つまりレイアウト）において表タグを使用している為です。
HTML4で中央寄せタグ(<center>)やフォント指定タグ(<font>)などが非推奨(将来的に廃止。Strict DTDでは廃止)となった理由もこの考え方に基づいており、単に見た目を揃えるためだけに存在したタグが整理されたのです。これらのタグはCSSによって代替されるべきだとされました。
同様の理由で装飾のために用意されていた下線タグ(<u>)や取り消し線タグ(<s>,<strike>)が非推奨とされており、代わりに文章に意味をもたせる挿入タグ(<ins>)や削除タグ(<del>)、あるいは装飾としてはCSSの利用が推奨されています。
また太字タグ(<b>)や斜体タグ(<i>)も同様の理由で非推奨ではないがCSSへの移行を行うべきとされました。今後これらのタグの代替として文章に意味をもたせる場合は強調タグ(<em>)や強い強調タグ(<strong>)を利用するのが妥当です。
またこのような考え方を突き詰めれば、画像タグ(<img/>)の使用も「文章の意味付けに不要な画像（つまりデザイン用の画像）はCSSに追い出す」「文章中で示す画像などのみ画像タグなどで参照する」などと考えられます。
要素(タグ)だけでなく、属性も同様の考え方で整理が行われました。
たとえばalignやborder属性、<body>要素のbgcolorやtext属性などはCSSに代替されるべきであり、これらは非推奨となっています。
なぜ機械的な意味とデザインを分離するのかというと多数の理由がありますが、「文章の再利用のため」（つまり検索エンジンなどが機械的に文章を解析するとき、視覚要素は邪魔でしかない）、「視覚障害者などのため」（音声ブラウザなどに解釈させやすくする）などが主に挙げられます。
特に近年流行った「検索エンジン最適化(SEO)」などでは前者の意味が大きくなっており、正しいコーディングの必要性が改めて問われるようになってきています。
■ 参考
非推奨とされる要素と属性
http://www.scollabo.com/banban/dep/index.html
HTML 4.01 Strict
http://undine.sakura.ne.jp/uglabo/ref-w3c/html401-strict/index.html
HTML4.01 要素一覧
http://www.hajimeteno.ne.jp/html40/att/elem.html