《 12:30 公開/更新》
高さの異なるボックスを横に並べるならfloatよりinline-blockが便利 [ボックス,配置]
スタイルシートを使って「高さの異なる複数のボックス」を横に並べるなら、floatよりもinline-blockを使う方が便利です。各ボックスの上下方向の位置を簡単に揃えられますから。必要に応じて多段表示にしたい場合に綺麗に並びます。
高さの異なるボックスを横に並べるならfloatよりinline-blockが便利
不定個数のボックス(ブロックレベル要素)を横方向にずらっと並べる配置で、かつ、必要に応じて多段表示(＝ブラウザの幅が狭い場合には、2段・3段と自動的に折り返されるレイアウト)にしたい場合があります。
このとき、floatプロパティを使って横方向に並べる方法もありますが、各ボックスの上下方向の位置を揃えたい場合には、displayプロパティにinline-blockを指定して、かつvertical-alignプロパティを使って揃えた方が綺麗に配置できる場合もあります。
高さの異なるボックスを、floatプロパティで横に並べた場合の表示例
もし、floatプロパティを使って高さの異なるボックスを横方向に並べると、以下のような感じで見えます。高さの大きなボックスがあるために、それ以降の配置がズレてしまってガタガタになってしまいます。(※表示のガタガタ具合は、モバイル端末のような横幅の狭すぎる画面ではあまり気になるレベルには見えません。下記のサンプルはタブレット以上の画面サイズでご覧下さい。^^; ブラウザのウインドウサイズを様々に変化させて表示を比較すると分かりやすいでしょう。)
このように複数個のボックスを横に並べたいケースは多々あります。
画像のように同じサイズのボックスばかりが並ぶのであれば簡単ですが、そうではない場合も多々あるでしょう。
テーブルを使う場合は横方向のセル数を固定しなければなりません。
横方向の個数を固定せず各ボックスを横に並べたいこともあります。
スタイルシート(CSS)を使って横方向に並べようとする場合、書き方には複数の選択肢があります。
横に並べるにはボックスをフロートで並べるスタイルも使えますが、
インラインブロックの形で並べる方が各ボックスを揃えやすいです。
ボックスの高さが異なる場合に、フロートだとガタガタになります。
しかしインラインブロックなら上下の配置を指定して揃えられます。
その結果、各ボックスの上端または下端を揃えて横に並べられます。
望みのデザインに合わせて両者の記述方法を使い分けてみて下さい。
ちなみに、このサンプルはウインドウの幅を少し狭めてご覧下さい。
ウインドウ幅が広いと枠数が足りなくて多段表示になりませんので。
商品紹介のボックスを多数個並べたい場合などに便利だと思います。
上記の方法だとCSSソースは以下のようになります。floatで横(左)に寄せているため、最後にはそれを解除するためのClearfixのようなハックも必要になってしまいます。
CSSソース
div.samplearea p {
width: 100px; /* 横幅を固定して */
float: left; /* 左へ寄せることで、横方向に並べる */
margin: 5px;
padding: 10px;
border: 2px solid green;
background-color: #ddffdd;
}
div.samplearea:after {
/* Micro Clearfix（※floatのあとに必須） */
content: "";
clear: both;
display: block;
}
このように、見た目の調整が難しくなる上に、CSSソースもスマートではありません。
高さの異なるボックスを、inline-blockで横に並べた場合の表示例
しかし、横方向に並べたいボックスを「インラインブロック(inline-block)」にすれば、もっと簡単にスタイルシートを記述できる上、各ボックスの上下方向の配置(＝上端または下端など)を揃えることができます。
例えば、上端を揃えるよう記述した場合は、以下のように見えます。
このように複数個のボックスを横に並べたいケースは多々あります。
画像のように同じサイズのボックスばかりが並ぶのであれば簡単ですが、そうではない場合も多々あるでしょう。
テーブルを使う場合は横方向のセル数を固定しなければなりません。
横方向の個数を固定せず各ボックスを横に並べたいこともあります。
スタイルシート(CSS)を使って横方向に並べようとする場合、書き方には複数の選択肢があります。
横に並べるにはボックスをフロートで並べるスタイルも使えますが、
インラインブロックの形で並べる方が各ボックスを揃えやすいです。
ボックスの高さが異なる場合に、フロートだとガタガタになります。
しかしインラインブロックなら上下の配置を指定して揃えられます。
その結果、各ボックスの上端または下端を揃えて横に並べられます。
望みのデザインに合わせて両者の記述方法を使い分けてみて下さい。
ちなみに、このサンプルはウインドウの幅を少し狭めてご覧下さい。
ウインドウ幅が広いと枠数が足りなくて多段表示になりませんので。
商品紹介のボックスを多数個並べたい場合などに便利だと思います。
先程のfloatを使った場合とは異なり、各ボックスの上端がきっちり揃った上で、折り返し後も左端からちゃんと並んでいます。途中に高さの大きなボックスがあっても、次の行はちゃんと左端から並びます。高さの大きなボックスに「引っかかる」形で途中から並んだりしません。
上記のようにインラインブロックを使う場合のCSSソースは以下のようになります。
CSSソース
div.samplearea p {
width: 100px; /* 横幅を固定して */
display: inline-block; /* インラインブロック化 */
vertical-align: top; /* 上端を揃える */
margin: 5px 0px;
padding: 10px;
border: 2px solid green;
background-color: #ddffdd;
}
displayプロパティに値「inline-block」を指定することで、各ボックス(ここではp要素)がインラインブロックになります。その上で、vertical-alignプロパティに値「top」を指定することで、各ボックスの(上下方向の配置を)上端に揃えています。CSSハックは不要なのでスマートです。
高さの異なるボックスの下端を揃える場合の表示例
なお、各ボックスの下端を揃えたい場合は、vertical-alignプロパティに値「bottom」を指定するだけです。以下のように、各ボックスの下端が揃うように配置されます。
このように複数個のボックスを横に並べたいケースは多々あります。
画像のように同じサイズのボックスばかりが並ぶのであれば簡単ですが、そうではない場合も多々あるでしょう。
テーブルを使う場合は横方向のセル数を固定しなければなりません。
横方向の個数を固定せず各ボックスを横に並べたいこともあります。
スタイルシート(CSS)を使って横方向に並べようとする場合、書き方には複数の選択肢があります。
横に並べるにはボックスをフロートで並べるスタイルも使えますが、
インラインブロックの形で並べる方が各ボックスを揃えやすいです。
ボックスの高さが異なる場合に、フロートだとガタガタになります。
しかしインラインブロックなら上下の配置を指定して揃えられます。
その結果、各ボックスの上端または下端を揃えて横に並べられます。
望みのデザインに合わせて両者の記述方法を使い分けてみて下さい。
ちなみに、このサンプルはウインドウの幅を少し狭めてご覧下さい。
ウインドウ幅が広いと枠数が足りなくて多段表示になりませんので。
商品紹介のボックスを多数個並べたい場合などに便利だと思います。
CSSソースは下記の通りです。
CSSソース
div.samplearea p {
width: 100px; /* 横幅を固定して */
display: inline-block; /* インラインブロック化 */
vertical-align: bottom; /* 下端を揃える */
margin: 5px 0px;
padding: 10px;
border: 2px solid green;
background-color: #ddffdd;
}
なお、vertical-alignプロパティの記述自体を省略した場合も、上記のように下端が揃う形で表示されます。
vertical-alignプロパティの初期値は「baseline」なのですが、ボックスを並べるだけの場合は値が「baseline」でも「bottom」でも見た目は同じです。
高さの異なるボックスの中央を揃える場合の表示例
果たしてこのような需要があるのかどうかよく分かりませんが(^_^;)、vertical-alignプロパティに値「middle」を指定すると、各ボックスは(上下方向の)中央が揃うように配置されます。ボックスの中身の真ん中を揃えると綺麗に整って見えるような何かを表示しているケースには良いかも知れません。^^;
このように複数個のボックスを横に並べたいケースは多々あります。
画像のように同じサイズのボックスばかりが並ぶのであれば簡単ですが、そうではない場合も多々あるでしょう。
テーブルを使う場合は横方向のセル数を固定しなければなりません。
横方向の個数を固定せず各ボックスを横に並べたいこともあります。
スタイルシート(CSS)を使って横方向に並べようとする場合、書き方には複数の選択肢があります。
横に並べるにはボックスをフロートで並べるスタイルも使えますが、
インラインブロックの形で並べる方が各ボックスを揃えやすいです。
ボックスの高さが異なる場合に、フロートだとガタガタになります。
しかしインラインブロックなら上下の配置を指定して揃えられます。
その結果、各ボックスの上端または下端を揃えて横に並べられます。
望みのデザインに合わせて両者の記述方法を使い分けてみて下さい。
ちなみに、このサンプルはウインドウの幅を少し狭めてご覧下さい。
ウインドウ幅が広いと枠数が足りなくて多段表示になりませんので。
商品紹介のボックスを多数個並べたい場合などに便利だと思います。
CSSソースは下記の通りです。
CSSソース
div.samplearea p {
width: 100px; /* 横幅を固定して */
display: inline-block; /* インラインブロック化 */
vertical-align: middle; /* 中央を揃える */
margin: 5px 0px;
padding: 10px;
border: 2px solid green;
background-color: #ddffdd;
}
中央に揃えるといっても、値は「center」ではなく「middle」なので注意して下さい。^^;
というわけで、高さの異なるボックスを横に並べるならfloatよりもinline-blockの方が便利だという話でした。
()
(前の記事) « 1行に収まらないテキストの末尾を三点リーダー「…」記号で自動省略するCSS
前後のスタイルシート TIPS
< 旧 ／ 新 >
(次の記事) テキストを強調する標準スタイルを無効にして自由に装飾するCSS »
スタイルシートTipsふぁくとりーの主要なカテゴリ
著者紹介
関連するかもしれない情報
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)