CSS3フレックスボックスは、floatで悩まなくてもいいんだよ。

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”]こんにちは~!うえのです(@flexbox)です。[/speech_bubble]

 

このページを見つけたってことは、cssのボックスレイアウトで心折れていますね。

 

 

floatかけてもちゃんと効かないヽ(`Д´#)ノ ムキー!!

 

 

こんな事を繰り返すと、コーディングするのも嫌になってきます。

 

 

コツをつかめばどこにでも応用出来る様になるので、クリアーしておきたいグローバルナビを例にフレックスボックスの使いかたを覚えてみましょう。

 

今回やること

1.floatのおさらい。
2.flexboxのイメージをつかむ。
3.実際にグローバルナビをflexboxで作ってみる。

 

 

floatで要素が宙に浮く事で戸惑う人が多いです。

 

フレックスボックスで覚えてしまうと、レスポンシブデザインでメディアクエリを設定しなくても、しっかり画面に応じた配置に変わってくれるので、あとあと楽チンさんですよ。

 

 

今日の完成形はコレ!

 

 

さっそく、いきますよ!

 

 

flexbox(フレックスボックス)って聞いたことないですか?

 

 

・ たった1行cssにコードを書くだけで横並びになる。

・ 要素が上揃えで整列する。

・ 高さや幅もブラウザが自動計算して、均等にしてくれる。

・ javascriptを使わないと出来ない事が、プログラムなしに出来るので軽くなる。

・ ボックス要素の順番を自由に入れ替えられる。

・ main、left-side、right-sideに指定することでカラムレイアウトに応用できる。

 

 

などなど、めちゃめちゃ楽チンさんでしょ!?

 

イチイチ自分で計算してボックスレイアウトを考えなくても、ある程度決めておけばブラウザが勝手にいい感じに調整するんです。

 

いきなりすべてを話すときっと混乱するので、今回は基礎編にしていきます。

 

 

その前にfloatとflexboxの違いを説明します。

 

 

floatのおさらい

floatでは、ボックス要素ひとつひとつを前のボックス要素の後を追う形で左側(右側)に寄せていました。

 

また、親要素から宙に浮くので、他のhtmlが影響を受けないよう最後にclaerで切る必要があります。

 

文章ではイメージしくにいので、次で図説してみます。

 

floatが苦手な人が陥るポイント

 

 

floatを解除するclearの入れどころが間違えてて、要素が宙に浮いたままで崩れてしまう。

 

ボックス自体の幅や高さ、margin・paddingの相殺が分からず意図しないカラム落ち。

 

こんな事が多いでしょうか?

 

 

分からない時は、付箋や切った紙を使って実際にワイヤーフレームを作ってみると、案外スッと理解できます。

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] ボックスレイアウトが嫌になって、html・cssに苦手意識が出てきます。

ぼくもそうでしたが、flexboxを知ってめちゃめちゃ楽になったんです。[/speech_bubble]

 

 

 

flexboxってなんやねん

 

ページ上でレイアウトするときに、水平・垂直の配置をするときにCSS3から使えるようになったフレキシブルなレイアウト。

 

CSS2.1までは、floatやjavascriptなどで表現してきました。

 

フレックスボックスでは、要素と要素の間をブラウザが自動計算して干渉しないようフレキシブルな配置を実現できるスグレモノ。

 

複雑なhtml・cssを書くことなしに従来以上の表現が可能になっています。

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pikutosan.png” name=”ピクトさん”] なんか固いな[/speech_bubble]

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] そうかな?[/speech_bubble]

 

 

 

 

display:flex;

このcssの使いかたの形だけでも覚えてください!

フレックスボックスの基本編で、今日はここしか説明しません。

簡単なんですが、今までの概念にちょいプラスするだけなんです。

 

 

flexboxの基本になるhtmlとcssコードのサンプル

 

基本になるコードをグローバルナビで作ると次のとおり。

こちらはコードのイメージだけにしておいてください。

後ほど、実際に使っているコードで解説しています。

 

【 html 】

<ul>

<li><a herf=”#”>menu1</a></li>

<li><a herf=”#”>menu2</a></li>

<li><a herf=”#”>menu3</a></li>

</ul>

 

【 css 】

ul{

display:-webkit-flexbox;

display:flex;

}

 

cssには-webkit-(ベンダープレフィックス)を付けておくのが無難です。

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pikutosan.png” name=”ピクトさん”]  生でコード書いて大丈夫か!?[/speech_bubble]

 

[speech_bubble type=”drop” subtype=”R1″ icon=”pc-ueno.jpg” name=”うえのさん”] 大丈夫やろ、知らんけど。[/speech_bubble]

 

 

floatとflexboxで同じ表現をやってみると。

 

【 html 】

<ul>

<li class=”box-left1″><a herf=”#”>menu1</a></li>

<li class=”box-left2″><a herf=”#”>menu2</a></li>

<li class=”box”><a herf=”#”>menu3</a></li>

</ul>

 

【 css 】

.box-left1.box-left2 {float:left;}

.box{clear:both;}

 

この方法は、ボックスの1つ目・2つ目をfloatで左へ流して、ボックス3つ目でfloatを解除。

clear:both;が3要素の最後に入ってますね。

 

 

 

※ floatの解除には、clear:fix;やoverflow:hidden;を解説するテキストもあります。しかし、clear:both;の延長線上にある方法なので、1番基礎を例にしています。

 

 

 

css3が一般的になった今、flexboxを積極的に使っていいよ

 

フレックスボックスが現在どのブラウザで使えるかCan I use…で調べてみました。

 

 

IE11で少し問題があるもののすべてのモダンブラウザで対応しています。

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] 1年前くらいは、まだまだIE問題やモダンブラウザもバージョンによって非対応なこともあり、flexboxでの表現は慎重になる場面が多く見られました。[/speech_bubble]

 

 

2017年では、その状況は一変していてGoogle検索でもflexboxについて書いているものが増えてきましたね。

 

ぼくがflexboxを勉強したのは、webクリエイターボックスさんのこの記事。

 

【参考記事: これからのCSSレイアウトはflexboxで決まり!|Webクリエイターボックス 】

 

基礎編から一歩進んだ話が出てきます。

 

そこでぼく自身がとまどったので、基礎編だけにフォーカスして実際に覚えた方法で解説していきます。

 

 

flexboxを使ったグローバルナビを型にしてみた

 

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] 今日の完成形はこれでしたね。[/speech_bubble]

 

 

ulにmain-navクラスを作って、リストにする。(ここまではfloatと同じ)

 

cssには、flexboxだけ書けばOK。

 

 

【 html 】

<nav>

<ul class=”main-nav”>

<li><a herf=”#”>menu1</a></li>

<li><a herf=”#”>menu2</a></li>

<li><a herf=”#”>menu3</a></li>

<li><a herf=”#”>menu4</a></li>

</ul>

</nav>

 

【 css 】

.main-nav a{

margin:10px;

border-radious:5px;

background-color:#6891f2;

color:#ffffff;

display:block;

padding:15px;

text-decoration:none;

}

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] このcssに次の行を追加。[/speech_bubble]

 

.main-nav{

list-style-type:none;

display:-webkit-flexbox;

display:flex;

 

一度、普段使っているテキストエディタでこのコードを書いてみてください。

キレイに4つのボックスが横並びになっています。

 

 

[speech_bubble type=”drop” subtype=”L1″ icon=”pc-ueno.jpg” name=”うえのさん”] DOCTYPE宣言とかすっ飛ばしはナシね。一応念押し。
[/speech_bubble]

 

今回のサンプルコード

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フレックスボックスの練習</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="wrap">

		<ul class="main-nav">
			<li><a href="#">gnavi1</a></li>
			<li><a href="#">gnavi2</a></li>
			<li><a href="#">gnavi3</a></li>
			<li><a href="#">gnavi4</a></li>
		</ul>
	<address>Copyright &copy; FLEXBOX</address>
</div><!--END*#wrap-->

</body>
</html>

 

@charset "utf-8";
html {
	overflow-y: scroll;
}
body {
	color: #444444;
	background-color: #fffff7;
	font-size: 75%;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

.main-nav a{
	margin: 10px;
	border-radius: 5px;
	background-color: #6891f2;
	color: #ffffff;
	display: block;
		padding: 10px;
	text-decoration: none;
}

.main-nav{
	list-style-type: none;
	display:-webkit-flex;
	display:flex;
}

 

 

 

htmlを少し勉強していれば、十分についてこれる内容にしてみました。

 

繰り返し練習してみて、自分の感覚で使えるようにしてみましょう。

 

 

 

耳より情報

ブログ記事でお話出来ない情報は、メルマガで発信しています。

例えば・・・

・HSP当事者が感じる生の声。

・HSCを持つ親が知りたい事。

・HSPと発達障害について。

その他、トピックス的情報など。

下のボタンをクリック

シェアありがとうございます

記事に関するご質問は、下のバナーからお問い合わせいただけます。

クリックすると、フォームが表示されるので気軽にご質問お願いします。

ABOUTこの記事をかいた人

HSPと知って、自分の感じてきた生きづらさを解放する方法を模索中。1日平均2,000UUのメディア運営の三年目。 ブログへ気持ちを書き出す事で双極性障害2型を克服しつつある。現在、家族関係のPTSDを治療中。スナップカメラマン。電王ファン。Perfume愛。 【詳しいプロフィールはこちらで~す