[HTML]spacer.gifとdivのspacerは使っちゃダメ?

HTML5 HTML
HTML5

ホームページのデザイン調整に使う手法として
spacer.gifとdivのspacerなんかがあったりする。
僕は使ったことないけれども、たまにコード上で見かけるので
そもそもこれって使っていいものなのか?っていうのをまとめてみた。

スポンサーリンク

spacer.gif

spacer.gifとは・・
1px × 1pxの透過gifのことで、主にWebデザインの微調整などに使われていた。
imgタグのwidth・height属性を使って画像を引き伸ばすことで、文字をズラしたりだとか
テーブル位置をズラしたりだとか…。
使い方としてはこんな感じ↓

<img alt="" src="spacer.gif" width="50" height="1" border="0" />

透過しているから背景が透明で、パッと見てもspacer.gifの存在はわからない。
よくもまぁこんな事を思いついたなと。

昔のシステムとかホームページを見たりすると使っている所がちらほら。
しかし、あくまでspacer.gifは”裏ワザ”的なものなので、あまりベーシックな方法ではない。
今ではCSSをしっかり使えば必要はないし、同じようなコードの繰り返しは見栄えもあまり良くない。


詳しいコメントをいただきました。spacer.gifは裏技というより基本テクニックとして使われていたようですね。仕事として開発を始めた頃はCSSしか使わなかったのでspacer.gifの背景を理解していませんでした。

ということで現れたのがdivのspacer。

div.spacer

<div class="spacer"><!-- spacer --></div>

.spacer {
    clear: both;
    height: 50px;
    font-size: 1px;
}
/*font-sizeを0にしたり、widthを指定したりする方法もある*/

divにクラス指定して高さとかをCSS側で指定する。
クラス名をspacer10とかspacer5とかにして汎用的にしたり…。
正に現代版spacer。

これは意外と使えるんじゃないか?って思ったりするけれども、
海外のエンジニアQAサイト、stackoverflowでこんなのを見つけた。
Is using<div>spacers a bad practice?
「ぶっちゃっけdivのspacerって使っていいんすか?」(超意訳)
っていう質問に対して
「paddingとかmargin使ってね!」
「意味のないマークアップは使わないでね!」
って言われてる。確かに!

マークアップは要素をタグで囲うことによって構造の定義をしている。
それを考えると空のdivなんかはマークアップの考えからは外れてるから
ダメなのは当たり前だったね…。

スペーサーのまとめ

  • spacer.gifはコードの可読性や構造を考える不適切
  • div.spacerはマークアップ言語の概念から考えると不適切
  • デザインの微調整にはmarginやpaddingなどを使うべき
HTML
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!

コメント

  1. 匿名 より:

    CSSが主流になる前はspacer.gifでページレイアウト用のテーブルの幅、高さをとるのは「絶対」でした。こんなこと思いついたな?というレベルではなく、mdnとかでも普通に基本テクニックとして紹介されてましたよ。なにしろCSSがfont-sizeくらいしか使い物にならない時代だったので、そのままだと内容物の幅に応じてふにゃふにゃ幅が変るテーブルセルをどうにか固定するのに不可欠だったんです。

    • ShoheiTai より:

      コメントありがとうございます。
      古いシステムの改修を行ったときに初めて見たので、記事にしてみました。
      コメントを頂いた後に調べてみましたが、spacerという要素もあったようですね。テーブルレイアウトやspacerなど、歴史を感じます。。
      勉強になりました!ありがとうございます。

タイトルとURLをコピーしました