カテゴリー

キーワード

 
> 【CSS】CSSで要素を横並びに...

【CSS】CSSで要素を横並びにする4つの方法の概要を説明


2015 年 4 月 14 日 投稿    view: 13930
タグ:
このエントリーをはてなブックマークに追加

cssで横並び

こんにちは、WEBマーケティング部の杉尾です。


今回から数回にわたって、CSSで『要素を横並びにする方法』を紹介します。


レイアウトをするにあたって、初心者がつまずきやすい箇所です。


正しい知識を得るために、一緒に勉強していきましょう。



要素を横並びにする


float

CSSで横並びにする基本的なやり方です。
要素を浮かせて移動させるイメージのスタイル指定です。


メリット

・要素の右寄せ、左寄せという感覚がわかりやすく、使いやすい。

・HTMLで上に書いた要素を右に、下に書いた要素を左に寄せて横並びにできる。


デメリット

・右寄せ、左寄せをした後に、それを解除する必要があるので余計な記述が増える。
(次に来る要素にclear:both;をつける必要がある)

・親要素の高さがなくなる。

・clearfixを使えば、clear:both;をつける必要はない上、親要素の高さが消えることはないが、CSSの記述が増える。


clearfixについては次回説明します。


書きました♪
【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


display:inline-block

これを指定すると、要素がインライン要素のように横並びになります。


メリット

・要素がインラインブロックになるので、ブロック要素と同じように、高さや上下のマージンを使える。
・IE6、IE7でも使える。


IE6、IE7で使うには別の設定が必要になるので、次々回に説明します。

インラインブロックとは、幅や高さを持つものの、ブロック要素のように改行を伴わない要素のことです。


デメリット

・子要素と子要素の間に隙間が生まれる。


書きました♪
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


table-cell

親要素をtable、子要素をその中のセルと見立てるスタイル指定のことです。


メリット

・floatと違い、clear:both;で横並びを解除しなくていい。

・以前、よく使われていたテーブルレイアウトと同じような使いかたができる。

・縦方向の中央寄せができる。(vertical-align:middle;が使える)

・border、paddingを使っても、要素からはみ出さない。


デメリット

・IE7以下では使えない。
(個人的には、もうIE7以下は切り捨てても大丈夫だと思っています)

・そのままでは、子要素と子要素の間に隙間が生まれない。


これに関しては解消法がありますので、float、table-cellの詳細な説明をした後に紹介します。


書きました♪
【CSS】display:table-cell;で要素を横並びにする方法


Flexbox

CSS3からの新しいdisplayの値です。


メリット

・floatに慣れた人にとっては、同じようにボックスを扱う感覚なのでわかりやすい。

・単純な横並びなら、CSSを一行追加するだけでOK。

・要素を上下左右、好きな順序で並べることができる。

・高さの異なる横並びの要素を、簡単に上下中央揃えできる。

・横並びになった要素の高さが揃う。


デメリット

・IEは9まで対応していない。(10も完全対応ではない)

・主要ブラウザの中で、safari が対応していないので、現時点(2015年4月)ではベンダープレフィックスをつける必要がある。


ベンダープレフィックスについてはコチラ ⇒【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要) 


Flexboxの記事を書きました。
【CSS】Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法


まとめ

要素を横並びにするやり方を4通り説明しました。
どれを使えばいいかというのは、その時々によります。
(個人的にはFlexboxがオススメですが)


次回から実践的なソースを交えて、それぞれの詳しい使い方を紹介します。
それらをご覧になった上で、案件ごとに使いやすいものを選んでください。


最後までお読みいただき、ありがとうございました。


floatの記事を書きました。
【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


display:inline-block;の記事を書きました。
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


display:table-cell;の記事を書きました。
【CSS】display:table-cell;で要素を横並びにする方法


Flexboxの記事を書きました。
【CSS】Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事