2016.01.27

2017.05.25

ホームページ制作関連

cssで要素を横並びにする4つの方法

アヒル隊長とアヒル隊員

同じデザインを実現するCSSの書き方は一つではありません。
そのデザインを実現するために、どの記述方法を選択するかはコーダーの楽しみの一つです。

今回はWebサイトにおいてよくあるあしらいである、要素を横並びにする方法を4種類ご紹介いたします。

1.”float”を使用する方法。

一番メジャーな方法かもしれません。
要素に回り込みの指定をし、横並びにする方法です。
注意点としては回り込みの解除の指定をしないと後のレイアウトが崩れたり、背景が表示されなかったりします。
cleafixやoverflowを使用して、解除をしましょう。
また、横幅が決まっていない要素を横並びにし、更に中央表示を行なうといった場合にはこの方法は適しておりません。

表示例

2.display:inline(inline-block)を使用する方法。

この方法は横幅が決まっていない要素を横並びにし、更に中央表示を行なう時などに使用しています。
フッターに横並びのテキストメニューがあったり、ブログなどのページネーション等に使用しています。
注意点としては要素と要素の間に意図しない隙間ができてしまう場合があります。
これはマージンやパディングをいくら調整しても調整できません。letter-spacingを使って調整しましょう。

表示例

例1

例2

3.display:tableを使用する方法。

この方法は要素を横並びにし、要素の幅を均等にしたい場合や、要素の中のテキストなどを天地中央揃えにしたい時等に使用します。
ただし、この方法は親要素に横幅と高さの指定が必要となります。

表示例

4.display:flexを使用する方法。

この方法は従来の指定の仕方に変わる方法として注目されている方法です。
横並びにするだけでなく、要素の幅の制御や文字揃えの制御、並び順の制御などできることは多岐にわたっています。
しかし、古いブラウザでは対応しておらず、JSなどでそれをカバーするか、最新ブラウザのみに対応するなどが現状では必要です。

表示例

それぞれcssの設定には特徴があり、実現したいレイアウトによって選択することが重要です。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する