HTML

【HTML】 ブロック 横並び【CSS】

HTML+CSSの、ブロックを横並びでコーディングする一例を挙げる。

ブロックを4つ横並び

float: leftを指定

単純に横並びにさせたいのみなら、cssで float: left を指定する。

例として挙げるのは、classを4つ作り、4つ四角い箱を横に並べたシンプルなもの。heightやwidthの値、floatの有無や変更による表示の変更も挙動の参考になる。

HTML

 

CSS

 

動作お試し

https://jsfiddle.net/dice_record/n1w8y4oh/13/

ブロックを一部を横並び

float: leftを指定しつつ、クリアフィックス

クリアフィックス(clearfix)というテクニックを用いる。

clearfix=フローティングボックスが後続のボックスのレイアウトに影響を及ぼさないようにする為のテクニック。

HTML

 

CSS

 

動作お試し

https://jsfiddle.net/dice_record/n1w8y4oh/26/

参照

『HTML5&CSS3デザインブック』

MDN web docs

コンテンツ分割要素 – HTML: HyperText Markup Language | MDN

以上。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です