古い感じがしてかっこわるいと思うコードの書き方10例

ホームページを作り始めて8年近く経ち、たくさん作った方が上達するという思いもあって、今まで数多くのサイトを作ってきましたそんなサイトたちを改めて見直してみて、「何か古い感じがするな~」と思ったコードを挙げてみます。

完全にこれがダメと言っているのではなく、個人的な好みもあるので、温かい目で見てもらえればと思います。

1. フレームを使っている

ホームページを作りはじめの頃、サイドにあるメニューが1つ増えるたびにすべてのページで変更しなくてはならず、すごい手間でした。

で、サイドのメニューとメインのコンテンツをフレームで分けて表示していました。

しかし、HTML4.01ではフレームは非推奨で、設定する場合の条件として、文書型宣言(DTD)にFrameset を指定しなくてはいけません。

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

で、HTML5ではエンドユーザのユーザビリティとアクセシビリティに悪影響を及ぼすという理由で、フレームは廃止されています。

インラインフレームは別ですが。

2. centerタグを使っている

centerタグは以前よく使っていましたが、現在非推奨ですのでCSSで対応したいです。

CSS
p { text-align : center; }

基本的にはこんな感じでいいのですが、コンテンツを真ん中に表示する分からずによく使っていました。そんなときはこれで解決です。

CSS
#container{
  width: 200px;
  margin: 0 auto;
}

これで中のコンテンツが真ん中によります。

このようにdivが真ん中に表示されます。

3. レイアウトにテーブルを使っている

tableは表を表すものであってレイアウトのためのものではないので、レイアウトはCSSでおこなった方が好きです。

最初の頃はdivを使ってfloatで回り込ませて、というのがよく分からず使ってしまってました。

以前は、テーブルレイアウト批判に対する批判なんかもあったみたいですが、今は特に聞かれないような。

ページをレイアウトしてみよう その1 テーブルレイアウト
  • HTMLの記述が大量かつ複雑になる
  • CSSの長所を生かしにくい
  • 情報とスタイルを完全に分離できない
  • 正しい文書構造を作りにくい
  • 4. タグが大文字

    HTMLでは大文字と小文字どちらでもいいのですが、XHTMLの場合は小文字のみとなります。

    ということでHTMLの場合は間違いではないのですが、最近大文字で記述しているサイトもあまり見かけないですし、個人的にも小文字の方が好きです。

  • XHTMLの書き方と留意点
  • HTML 5(英語ですがhtml5では大文字でも小文字でも使用可能なことが示されています。)
  • 5. 改行を連続して使っている

    html
    brタグは改行を表します。
    <br />
    <br />
    <br />
    このような改行の連続使用は好きではないです。

    直接コードを書いている人はあまりしないと思いますが、リッチエディタを使っているとよくあると思います。しかし、基本brタグは2つ以上連続して使用してはいけません。

    html
    <p>brタグは改行を表します。</p>
    <p>連続して使わずpタグとcssで調整しましょう。</p>

    このようにpタグでくくり、cssのpadding、marginやline-heightで調整した方が微妙な調整もできていいと思います。

    6. 全角スペースで横の間隔を調整している

    横のスペースに全角スペースを連続使用していました。

    html
    <div>html   css   javascript   php</div>

    こんな場合、リストを使って横に並べる方が好きです。結構手間ですが。

    html
    <ul id="menu">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>php</li>
    </ul>
    CSS
    #menu {
    list-style-type: none;
    }
    #menu li{
    float: left;
    width:100px;
    }

    display:block を使うとこのブログでも使っているようなメニューになります。

    7. リストを使っていない

    html
    html<br />
    css<br />
    javascript<br />
    php<br />

    このように改行で箇条書きを表すのではなく、リストタグを使う方がスマートだと思います。

    html
    <ul>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>php</li>
    </ul>

    8. bodyタグに要素を指定している

    かなり前に作られたサイトでたまに見かけますが、HTML 4.01では非推奨です。

    html
    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

    bodyタグの要素として、背景や文字などの色を指定する方法ですね。ホームページを作り始めた頃は当然のように使ってました。

    CSS
    body {
      background: #ffffff;
      color: #000000;
    }
    a:link { color: #0000ff; }
    a:visited { color: #800080; }
    a:active { color: #ff0000; }

    という感じにCSSで指定しましょう。

    9. ワンポイントの画像にimgタグを使っている

    これは個人的な好みです。

    html
    <img src="point.gif" alt="ワンポイント" />  ワンポイント

    このようにワンポイント画像にimgタグで表示するより、CSSで背景画像として表示する方がかっこいいかなと思います。

    html
    <div class="point">ワンポイント</div>
    CSS
    .point {
      padding-left: 20px;
      background: url(point.png) no-repeat left center;
    }

    画像を背景に指定し、画像の分右側をpaddingで空けています。

    CSS Spritesを使っていけばさらにいいですね。

    10. border等を一括で指定していない

    別に必ず略す必要はないですが、コードは少しでも短い方がいいですね。

    CSS
    border-width: 1px;
    border-color: #000000;
    border-style: solid;

    このような場合は、以下のように略した方がスマートですね。

    CSS
    border:1px solid #000;
    この他にも、backgroundやpaddingなど一括で指定できるプロパティは他にもありますのでご参考に。

    まとめ

    非推奨なものから単なる個人的な好みまで色々挙げましたが、やっぱりHTMLはできるだけシンプルにして、デザインはCSSでおこなう方がスマートな書き方なのかなと思います。

    きれいなコードを見て、信用できるサイトだなと感じる人も多いと思いますので、きれいなコードを書きたいものです。

    このブログはまだまだきれいなコードではないですが。

    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント
    根本的に間違えています。
    「かっこわるい」とか「リストタグを使う方がスマート」などと言っている時点で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
    【2011/08/29 16:06】 | anon #4kk90MMU | [edit]
    はじめまして

    大変ご丁寧な解説をありがとうございました。

    私は個人的な趣味でホームページを作っているだけで
    仕事にしているわけではありませんので大事な知識が
    抜け落ちているということも多々あると思います。

    ただ、anonさんが仰られる論理的な記述と表現的な記述を分離する
    といった内容についてはほぼすべて理解しているつもりです。
    そのうえで、ご指摘にあるような抽象的な言葉を使っています。
    根本的に間違えていると感じられるのであれば私の文章能力の
    なさですので今後気をつけたいと思います。

    大変参考になりました。
    どうもありがとうございました。
    【2011/08/29 21:58】 | 管理人 #E2ywrYdA | [edit]
    とても魅力的な記事でした。
    また遊びにきます。
    ありがとうございます!!
    【2011/09/04 19:38】 | 履歴書の書き方の見本 #- | [edit]
    ありがとうございます。
    ほんと励みになります。
    またお越し下さいね~
    【2011/09/05 07:45】 | 管理人 #E2ywrYdA | [edit]
    とても解りやすく、どのように改善すればいいのかも紹介して下さっているので大変参考になりました。私のツイッターで紹介させて貰ったのですが、よろしかったでしょうか。
    素敵なHPですのでちょくちょくお邪魔させていただきたいです。ありがとうございました。
    【2011/09/06 15:05】 | cmon0_0 #- | [edit]
    cmon0_0さん

    ありがとうございます。
    ツイッターもちろんオッケーですよ
    むしろお願いしたいくらいですよ

    またお越しください~
    【2011/09/07 05:17】 | 管理人 #E2ywrYdA | [edit]
    フレームも、テーブルも大文字も使ってました~。いえいえ。
    と言うよりここにある全部やってました。(T_T)
    FrontPageExpressで、作ったまま…。
    ありがとうございました。
    勉強せねば、と、反省しました。
    改めて、参考に、又、伺おうとおもいます。
    【2012/02/15 15:44】 | 千夜 #- | [edit]
    千夜さん

    この記事がお役に立てたならうれしいです。
    私も同じでしたから大丈夫ですよ。

    けど、昔はよかっても今はダメみたいなのが
    あるとつらいですよね。

    これからもよろしくお願いします。
    【2012/02/15 18:27】 | 管理人 #E2ywrYdA | [edit]
    こういうまとめ記事を求めていました!
    ありがとうございます。
    【2013/12/19 09:51】 | - #- | [edit]
    www
    【2014/09/30 13:13】 | - #- | [edit]
    テーブルレイアウト時代?にWebを学んだものです。
    最新の情報をありがとうございます。勉強になります(^^)
    【2016/08/27 18:28】 | makoto #IGO4B4dY | [edit]
    8. bodyタグに要素を指定している
      ↓
    8. body要素に属性を指定している

    ですよね?
    HTML5では例の属性は全て廃止になっているので指定することもないですが・・・

    HTML5になってからセマンティック・ウェブの考え方やウェブを巨大なデータベースにしようという考え方が強くなり
    見た目に関する指定は全てCSS側で表現する方向になっていますね。

    ----------

    10. border等を一括で指定していない
    これは私は個人的には一括指定がかっこいいとは感じません。

    たとえば、border-radiusやmarginなどの値は1個~4個指定できますが
    1個や4個指定した場合、対応する箇所がすぐに分かるのでいいと思いますが
    2個や3個指定した場合、対応する箇所が分かりにくくなります。


    また、transitionやanimationなどは時間を表す値が2個指定された場合
    durationとdelayがそれぞれどちらに対応するのかが分かりにくくなります。

    ですので、コードのかっこよさを語るならば
    コードの長さは関係なく、誰が見てもすぐに意味が分かるコードがかっこいいと私は思います。

    【2016/09/25 23:40】 | - #- | [edit]
    文字がはみ出すのも個人的には好きじゃないし格好悪いと思います
    【2017/02/02 20:37】 | 千代田線 #- | [edit]
    割と面白くて参考になるんですけど、こういう記事を書いてる人が
    「ホームページ作成」って言い回ししてるのが
    ツッコミ待ちのフリなのか自虐なのか判断に迷います
    【2017/06/06 14:58】 | そっこ #- | [edit]









    ※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

    Recent Entry
    Popular Entry
    • このエントリーをはてなブックマークに追加