世の中、「うざいこと」があふれています。
例えばお昼時、混雑するコンビニで公共料金を払っている客。
コンビニで目当ての雑誌前でいつまでも立ち読みしてどいてくれない客。
「弁当に嫌いなおかずが入っていた」と謎のクレームで店員に絡むコンビニ客。
と、なんだかコンビニの話ばかりになってしまいましたが、無論WEBの世界にも「うざいこと」は存在します。
例えばコーディング。
人それぞれ色んな個性とルールがあって良いと思いますが、業務の妨げになるようなコーディングは極力避けたいもの。
ここでは、おそらく多くの方が「うざい」と思うコーディング例をあげてみます。
<h2 class="title">その１ 蕎麦屋の憂鬱</h2>
<p style="font-size:12px;">蕎麦屋は本当は蕎麦なんて打ちたくないと思っているに違いない。
<div style="margin-top:20px;"></div><h2 style="font-size:14px;border-left:3px #ccc solid;color:#ccc;">その２ うどん屋の不満</h2>
<p class="read">うどん屋の99％が、実は蕎麦好き。きっとそうだ。
<div class="space"></div>
「これからの時代はWEB標準です、XHTML＋CSSです」といわれ始めてずいぶんたちます。
が、WEBサイトの歴史は、一般普及し始めてからすでに10数年もたつわけで、新しいものだけでなく古いサイトも、リニューアルだなんだと色んな変遷を経て今の形に至っています。
中にはWEB標準どころの騒ぎじゃないレガシーなソースのサイトも、あるはずです。
そこまでいかなくても、色んなデザイナー、コーダーを渡り歩き熟成されたソースは、それぞれの手垢で個性的な進化（退化？）を遂げていることも。
レギュレーションという概念が存在しないサイトの終着駅は、秩序を失ったゴーストタウンというわけです。
これもそんな一例と言えるでしょう。
でもこれはまあ、１人の作り手の責任でない場合も多々あります。
次は明らかに個人的な原因の「うざコーディング」です。
@charset "Shift_JIS";
/* Welcome! Sato's CSS */
body .sato_body{
margin:0;
}
div#sato_header{
margin-top:10px;
}
div#sato_container{
width:500px;
}
/* main of "sato" */
img.left_sato{
float:right;
}
img.right_sato{
float:left;
}
佐藤さん（仮名）は自分が大好きな、29歳男性（独身）。
小口清算のハンコでさえ、いちいちご自慢のサインででっかく書きなぐっては、経理のお姉さんに怒られる毎日。
そんな彼だから、CSSだって自己主張が激しいわけです。
いちいちsatoと付けるものだから、classやidを書くときめんどくさいことこの上ありません。
あまつさえ、imgのleft／rightをあえて逆にしているあたりに、佐藤さん（仮名）の底意地の悪さがうかがい知れます、ああ恐ろしい。
皆さんのコードは、大丈夫ですか？
<table>
<tr>
<td>性別</td>
<td>女</td>
</tr>
<tr>
<td>メールアドレス</td>
<td>#@#</td>
</tr>
</table>
みんなのあこがれミュージシャン。
もちろんWEB業界でも、若いころジェフ・ベックを目指していた、なんて人もいるはず。
そんな彼らの音楽魂がそうさせるのか、タグの頭のスペースが偉い踊っている、なんてことも。
もちろん精密機械のようにかっちりきっちりそろっている、１スペースの狂いもないソースというのも、人によっては「冷たいソースだなあ」と思うかもしれません。
がしかし、ガタガタ過ぎるのは困りもの。
突き抜けるのはロック魂だけにしましょう、ビバ・ヒムロック！
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
</tr>
<tr>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td bgcolor="000000"><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
<td><img src="spacer.gif" width="10" height="10" /></td>
</tr>
</table>
テーブルレイアウトには善し悪しがあって、現状のブラウザ環境においては必ずしも「忌むべきもの」とは言い難いかと思われます。
が、なんでもテーブルで処理しよう、というのは、これいかに、というのも事実。
上のテーブルは、文字をわざわざテーブルの行と列で表そうとしているソースです。
懐かしのspacerまであります。
もしあなたが監督責任者で、仕事を任せている部下が、
「私はimgタグどころか、テキストさえ入力したくないでござる！ PCはすべてドット情報。ならばテーブルのbgcolorだけですべてを表現できるはずでござる！」
なんて言い出したら、いち早くヘルプ先を探すか、「てもみん」に連れて行きリラックスさせるかしましょう。
落ち着けば、きっと彼も分かってくれるはずです。
さて、かくも奥深きはうざコーディングの世界。
最後に、なさそうで、実は類似例なら意外とありそうな品を。
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<!--これはXHTMで記述するという宣言です。ここから全てが始まります、全てが……-->
<head>
<!--head～/head内に記述してください、というタグは、この間に記述します。色んなものを入れてください、大切な思い出とか。--><link href="css.css" rel="stylesheet" type="text/css" />
<!--スタイルシートのリンクです。これがないといくらcssを頑張って書いても、何の意味もありません。僕の人生のように……--><title>不幸</title>
<!--ページのタイトルをつけます。テーマにそって記述しましょう。テーマのないページは無意味です。僕の人生のように……--></head>
<!--headを閉じます。臭いものにはふたを、ということです。ちなみにOLたちは僕を臭い近寄るなと言います。たぶんツンデレです--><body class="layout-three-column">
<!--body～/bodyが実際にユーザーが見ることのできるエリアになります。だからといってbody外に取引先のお偉いさんの悪口など書いてはいけません。大体そういうのはバレて大目玉をくらい減給になります。僕のように……。にしても●●商事の部長のカツラは……--><br />
<!--改行です。余白を持たせたいときに利用します。僕と実家の親との間にはとても深い<br>があります。というかmargin:10000px;くらいあります--></body>
<!--終わりです--></html>
<!--何もかも、終わりです-->
コメントアウトの説明が全くないソースというのも見にくいのですが、あらゆるタグにそれを付けるのはもっと見にくくなります。
あまつさえ、私的なことまでカミングアウトしはじめたら、目も当てられません。
納品できません、納品したら大問題です。
Webサイトのチェックはブラウザだけではだめだ、という好例とも言えるでしょう。
皆さんも、うっかりとうざコーディングしないよう、またうざコーディングを見つけたら駆逐できるよう、常日頃から嗅覚を鍛え、いざという時のトラブルシューティングに役立てましょう。
※こちらの記事はフィクションです。各事例は実在したものではありません。本当です。
（部屋長）
