はじめに

HTMLでなにかと使われる「div」タグ。

divタグで囲った部分は1つのグループとして扱われるので、例えば下図のようにコンテンツを区切ったりする時によく使われます。

part1とpart2のコンテンツにおいて画面上横のスペースが空いていたとしても、横並びにはならず縦並びになっているのがおわかりでしょうか。

ホームページ等を作るにあたって見た目上、「ここのコンテンツは横並びに表示したい。」などが出てくると思います。

どうすれば横並びに表示させることが出来るのでしょうか。

ブロックレベル要素

先ほどはdivタグを例に挙げて縦並びに表示されることを説明しましたが、このdivタグのように縦並びに置かれる要素を「ブロックレベル要素」と言います(div、pタグ等)。

このタグの場合、普通にタグを使用しただけでは横並びにすることは出来ません。

横並びに表示させたい場合はちょっとした工夫が必要です。

補足)横並びに置かれる要素は「インラインレベル要素」と言います(spanタグ等)

float

CSSの要素で「float」というものがあります。

「float」はブロックレベル要素を浮かせるためのプロパティです。

この「float」を指定することにより配置を調整することが出来ます。

例)CSS記述例

値

left

指定した要素を(浮かせて)左に寄せる。

後に続く内容は、その右側に回り込む。

right

指定し要素を(浮かせて)右に寄せる。

後に続く内容は、その左側に回り込む。

none配置の指定をしない(初期値)

ただ注意が必要なのは上記のfloatを指定しただけだと、回り込みが解除されず後続するコンテンツのレイアウトが崩れます。

CSSの要素「clear」を指定することで回り込みを解除することが出来ます。

例)CSS記述例

値

left

左寄せされた要素に対する回り込みを解除。

right

右寄せされた要素に対する回り込みを解除。

both

左、又は右寄せされた全ての要素に対する回り込みを解除none回り込みを解除しない(初期値)
「はじめに」の項目で例に挙げた図で、以下の指定をした場合どうなるかみてみましょう。

例1)

図をみてみるとわかるように、par1とpart2がちゃんと横並びに表示されたことがおわかりでしょうか。

例1の設定に、回り込み解除を設定しないとどうなるでしょうか。

例2)

part1とpart2は、floatで浮かせて左に寄せています。

part3はfloat指定していないので、浮いて空いたスペースにpart3の内容(文字)が入って、余った内容が下に表示されています。

回り込みを解除しないとこのようにレイアウトが崩れて表示されます。

display

CSSの要素で「display」プロパティを使用する事でも横並びに表示させることが出来ます。

displayプロパティはブロックレベル(縦並び)、インラインレベル(横並び)の表示形式を指定できます。

例)CSS記述例

値

inline

インライン要素として表示(横並び)。

高さや幅を指定できない。

block

ブロック要素として表示(縦並び)

inline-block

ブロック要素をインラインのように横並びに表示。

高さや幅を指定できる。

先ほどのfloatと違い、part3に「clear」を指定しなくてもレイアウトは崩れません。

まとめ

いかがでしたでしょうか？
ブロックレベル要素を横並びに表示させる方法を簡単にですが説明してきました。

float、displayプロパティ共にまだまだ全然紹介しきれてない要素が沢山あります。

気になる方は色々と調べてみるといいでしょう。

投稿者：プロナビ編集部

• 
• tweet
•