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

Webデザイン

 

うえのさん
こんにちは~!うえのです(@flexbox)です。

 

このページを見つけたってことは、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の相殺が分からず意図しないカラム落ち。

 

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

 

 

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

 

 

 

うえのさん
ボックスレイアウトが嫌になって、html・cssに苦手意識が出てきます。

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

 

 

 

flexboxってなんやねん

 

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

 

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

 

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

 

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

 

 

ピクトさん
なんか固いな

 

うえのさん
そうかな?

 

 

 

 

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-(ベンダープレフィックス)を付けておくのが無難です。

 

 

ピクトさん
  生でコード書いて大丈夫か!?

 

うえのさん
大丈夫やろ、知らんけど。

 

 

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で少し問題があるもののすべてのモダンブラウザで対応しています。

 

 

うえのさん
1年前くらいは、まだまだIE問題やモダンブラウザもバージョンによって非対応なこともあり、flexboxでの表現は慎重になる場面が多く見られました。

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 

 

うえのさん
今日の完成形はこれでしたね。

 

 

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;

}

 

うえのさん
このcssに次の行を追加。

 

.main-nav{

list-style-type:none;

display:-webkit-flexbox;

display:flex;

 

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

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

 

 

うえのさん
DOCTYPE宣言とかすっ飛ばしはナシね。一応念押し。

 

今回のサンプルコード

 

 

 

 

 

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

 

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

 

 

 

コメント