はちど

ボードゲームのレビューなど。

*

float:left; と display:inline-block; 。

      2013/10/08

Hachiです。
たびたび誕生日ネタで申し訳ないですが、自分の誕生日祝いとしてマンガ買いました。
空が灰色だから
少年チャンピオンコミックス 「空が灰色だから」 1~4巻 阿部共実
写真には3巻までしかありませんが、4巻はこの写真撮った後日に購入しました。
1話完結のショートオムニバスで、中高生時代特有の
「悪意のない悪意」や「中二病気質」、「心の闇」といった部分を
表紙に書いてあるような可愛らしい絵柄で生々しく描いています。
作者の方は「大好きが虫はタダシくんの」というWebマンガで話題になったそうなので、
どんな作風なのか知りたい方はGoogle先生にお尋ねください。
それと、読んだ後に後悔しないでください。
(一応、作品名は検索してはいけない言葉としてあげられています。)

閑話休題。
blogというものが現れてから、Webサイトのデザインには
サイドバーがある複数列組みのものが当たり前のように使われるようになりました。
そんなWebデザインを作る上で必ず使われるであろうCSS要素、floatの話です。

どんなことができるの、っていうのは、下記を参考に。
float — スタイルシートリファレンス

floatの活用方法を日本語で言い換えれば、
「この部分の要素は左(右)に寄せるから、それ以外の部分は右(左)に回り込ませて置いてね!」
ということになります。
画像を左に置いて、右側のスペースを解説などの文章で埋める、というのが、いちばん理にかなった使用方法でしょうか。

先に挙げたサイドバーを実現するためには、このfloatが重要です。
divという箱に#sidebarと#contentという名前をつけて、
それなりのwidthを指定して、#sidebarにfloat: left; をつけるだけで、
sidebarは左側でサイドバーとなり、#contentは右側に回り込んでメインコンテンツになります。
CSS使用サンプル | re.site44.com

なかなか使い勝手のよいCSS要素なのですが、これを多用することで陥る落とし穴も数多くあります。

  • floatを解除するclearを指定し忘れるとデザインが崩壊する
  • floatする箱のwidthをちゃんと指定してないとデザインが崩壊する
  • float要素を納める(上位レイヤーの)箱にoverflow:hidden; を指定しないとデザインが崩壊する
  • その他いろんな事情でデザインが崩壊する

CSSデザインの根幹をなすだけに、落とし穴に落ちた先はデザイン崩壊祭りです。
デザインが崩れたらfloatを疑え、それ一番言われてるから。
# ついでに「デザイン」という単語がゲシュタルト崩壊してそうですね。

さて、話は変わりますが箱の配置方法を指定するdisplayプロパティに
新しくinline-blockという値が指定できるようになっています。
inline-blockの説明はありませんが、displayの使われ方は下記を参照。
display — スタイルシートリファレンス

display: inline-block; で指定された箱は、
それ単体ではwidth,heightを持ったブロック要素として動きながら、
それぞれの箱はインライン要素のように横に並ぶ挙動をとります。

どういうときに役に立つのっていうと、たとえば、
リストアイテムを横に並べてメニューバーを作るときに、
それぞれのリストアイテムにdisplay: inline-block; を指定すれば
各要素が勝手に横に並んでくれます。
さらに、右端から折り返して2行目をつくる際には、
リストアイテムの途中で折り返してしまうのではなく、
ブロックの区切れごとに改行を挟んでくれる賢いやつです。
CSS利用サンプル | re.site44.com

で、このfloat: left; とdisplay: inline-block; 、挙動がよく似てます。
htmlで下に記述されている要素が、ブラウザ上では右側に回り込む、という点で。
じゃあ今までfloatだったところをdisplayに置き換えてもいけんじゃね?というのが今回の趣旨。

display:inline-block: に置き換えるメリットとしては、
「面倒なことをしなくてもデザインが崩壊しにくい(気がする)」ということ。
floatで不便だったところをきっちり押さえて、使いやすいものになっているという感はあります。
デメリットとしては、新しい値なので、IE8なんかではまず解釈してくれないこと。
CSSハックを使って *display:inline; *zoom:1; とかやると、挙動が同じになったりします。3行になりますが。
また、欠点としてHTMLの改行でデザイン崩れのおそれがあるというのも挙げておきます。
一長一短、なかなか難しいところです。

こういうときは、プロパティの定義を比較すればそれなりの結果が出たりするのですが、これに関しての言及は特になく。。
どちらかというと、ボックス配置のためのプロパティという意味ではdisplayがやや優勢ではあります。(新しい値ですしね。)
調べてたらdisplay:box;なんていう指定方法も出てきておじさんの頭はもう限界です。
まあ、好きな方を使えばいいんじゃないですかね、という腑に落ちない結論でしめます。

sns-widget

更新情報の確認にはこちら!

 - Web技術