ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

画像の横並びはfloat:leftよりdisplay:inline-blockを使うと段差なく確実に並べることができます

猫

display:blockで画像をブロック要素にして、float:leftで横並びにして、最後にclearfixを入れて横並びの完成!と思いきや謎の空白があくことがありませんか?そういうときはfloatでなくinline-blockを使うとうまく横並びが作れるかもしれません。

空白

そう、こんな感じで横並びに失敗することがあるのです。今回はこれを解決しましょう!

空白の原因は写真の高さが違うことです

今回のボクの場合ですが画像はすべて正方形に切り取り、すべての画像を同じソフトで圧縮してサーバーにアップロードしました。

本来ならやっていることが完全に同じなので、すべての画像が同じピクセル数になるはずです。同じピクセル数の画像を横一列に並べるから、なぞの空白ができることはないはずです。でも何故か空白があります。

そういうときは空白ができた部分の上の画像と右の画像のプロパティを開いて詳細を調べてみましょう。ボクの場合は横幅3ピクセルの差がありました。正方形なので縦も同じ数だけの差があります。この縦幅のズレが「floatの横並びで空白ができてしまう原因」です。

これの解決のために、幅が周りと違ってしまった画像の大きさを改めて調整してもOKです。しかし画像の調整だけではうまくいかないときもあります。というか数ピクセル単位での調整とか「細かすぎてやってられません!」

ということで別の方法で解決しましょう。

inline-blockを使ってみよう

画像の横並びをdisplay:block;とfloat:leftの組みあわせでやる人は多いと思います。ボクもしょっちゅう使っています。

しかし今回はfloatでなく画像のcss指定を

display:inline-block; vertical-align:top;

と書いてみましょう。floatは必要ありません。これだけで画像がfloatを使ったときのように横並びになり、なおかつ画像の高さが違っても謎の空白ができることもありません。

参考「jqueryを使ってcssの読み込みを切り替える方法」←この記事での横並び画像を、今回のcssで綺麗に調整しています。

細かいwidthの調整は適宜行なってください。上記の記事ではportraitで48%、landscapeで32.3333%を指定しています。

ちなみに画像を大きく表示させるときはdisplay:blockで上書きし、margin-rightとmargin-leftでautoを指定して中央寄せにしています。

vertical-alignはtop以外にmiddleとbottomの指定もできます。しかし画像を横並びにするときはtopにすると覚えておくだけで十分です。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです