後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【HTML&CSS初心者】ボックスデザインでレイアウトしよう~float,clearfixとは~

f:id:rikei-venture:20190517135441p:plain

サイトのレイアウトって何から考えればいいの?

これの答えはズバリ「ボックスを並べること」です。 

一体、どういうことなのか?その方法を教えます。

本記事のテーマ

【脱初心者】ボックスを並べることでレイアウトを自由に操ろう

「HTML&CSSの基礎文法はおさえたけど、、、」

「レスポンシブデザインのやり方が分からない!」

という方もいらっしゃと思いますが、そんな悩みはBoxでレイアウトをするという考え方を身につけてしまえば、一瞬で吹き飛んでしまいます。

 

是非考え方を身につけて、レイアウトを自由に操ってしまいましょう!

 ボックスデザインとは何ぞやという話から

次のような配置をしたWebページをよく見かけると思います。

 

f:id:rikei-venture:20190516151549p:plain

 

Boxデザインという考え方とはBoxを敷き詰めているというもの。

つまり、構築したいレイアウトの枠を予め配置してしまい、そこにコンテンツを埋めていくという手法のモノです。

 ボックスを横に並べてみよう

ボックスデザインの肝となる「ボックスを横に並べる」

f:id:rikei-venture:20190516153426p:plain

これができれば、後は微調整するだけなんで(笑)

とは言っても、めっちゃ簡単です。

まずは、下のコードをコピペしちゃいましょう。

 

(CSSコードの後半部分は、表示を分かり易くするためのものなんでここはコピペの必要ないですが、初めのうちはここも取り入れて、コンテンツを入れたらここの部分のコードを削除するのが良いでしょう。)

See the Pen YbZeMa by Jwataru (@jwataru) on CodePen.

Box2とBox3を横並びにするコードです。

①Boxを1から4用意する。

②横並びにさせたいBox2とBox3をBoxAでくくる。

③横並びにさせるCSSをあてる

横並びにさせるCSSの理解は一つ一つ後で説明していきます。

このコードの使い方としては、boxAで横並びさせたいところを括って、

横並びの数が2つなら幅を50%、3つなら33.3333%、4つなら25%みたいな感じで直感的に使えると思います。

左のBoxは70%、右は30%とかも可能です。

 

ボックスを横に並べるCSSがどうしてこうなるのかを一つ一つ説明していきましょう。

floatの概念を理解する

floatのポイント

・floatで指定すると中身に合わせた大きさとなり、横に並ぶ

・他のボックスからしてみると無かったものとして、後ろに回り込まれる

floatだけ指定すると次のようになります。

See the Pen byWKJQ by Jwataru (@jwataru) on CodePen.

ボックスを構成するdivタグはブロック要素なので、何も指定がないと縦に並びますが、float指定すると横に並びます。

そして、float指定していない次のボックスも幅が収まっていれば後ろに回り込みます。(Resultの表示を0.5倍にすると分かり易いです。)

これはfloatで処理したBoxはフローティングボックス(浮遊ボックス)となり、他のBoxからしてみると浮遊して扱われるため、ブロック要素の縦に並ぶという性質が無くなるためです。

 floatの後ろに回り込まないようにする方法

Box2,Box3の後ろにBox4が回り込まないようにするためには

結論から話すと、

.boxA:after{

content:"";

display:block;

clear:both;

}

をつけましょう。

See the Pen MdmXNW by Jwataru (@jwataru) on CodePen.

Resultを見てみると、後ろに回り込まずにBox3の後ろに空間ができていることが分かると思います。

 

clearfixというテクニックです。

これについて詳しく説明いたしましょう。

clearfix(クリアフィックス)を理解する

clearfixは後ろに回り込むのを防ぐテクニックのことです。

 

「.boxA:after{}」でBoxAの後ろにCSSをあてることになるわけですが、

「clear:both」がないとどうなってしまうのか挙動を見ていきましょう。

「content : " ";」の中に ”文字文字文字......” を入れてみます。

 

【clear:bothがないバージョン】

See the Pen YbVjKE by Jwataru (@jwataru) on CodePen.

BoxAの後ろに文字が回り込みます。

 

一方、clear:bothがあるとどうなるでしょう。

【clear:bothがあるバージョン】

See the Pen JqNBjE by Jwataru (@jwataru) on CodePen.

Box3の後ろに「文字文字文字文字....」が回り込んでいないのが分かります。

これの「” ”」の中に文字を入れないのが「content : " " ;」です。

こうすればBox4がBoxA(Box2とBox3)の下に配置されるようになります。

Boxの並び順を指定する(floatの理解)

floatはleftで左に寄せて、rightで右に寄せられるのでこれによって並び順をコントロールできます。

 

下図のように並べる方法を考えてみます。

f:id:rikei-venture:20190517134344p:plain

1つ目のBoxから「left」「right」「left」「right」とすればよいです。

See the Pen 基本Box構造6 by Jwataru (@jwataru) on CodePen.

ここまで理解できてしまえば、Boxデザインはもう楽勝ですね!

まとめ

サイト構築の基本中の基本「ボックスデザイン」について学んできました。

サイトというのは、Boxを敷き詰めて。その中にコンテンツを入れていくだけです。

細かい機能はその都度調べて、入れ込んでいけばいいだけになります。

大事なのは先に大枠を作ること。

 

あとはレスポンシブデザインを適用できるようになれば、勝ち同然です。

その辺は別記事で詳しく説明したいと思います。

ボックスデザインを理解していただければ、このレスポンシブデザインの記事も簡単に理解できると思います。

これはHTML&CSSのデザインの基礎です。

基礎文法とプラスでおさえなければならないものだと思います。

実際受注して稼ぐを目的にした場合、基礎文法よりも大切なものとなってくると思います。

もちろん、基礎文法があってこそのものですが、サイトデザインの基礎はないがしろにされがちです。

他と差をつけたい方、一気に効率よくスキルを身につけたい方は是非こちらの考え方からおさえていきましょう。