データサイエンティストハトリのブログ

PythonとインテリジェントクラウドとAIが好きな学生エンジニア。データ分析、スクレイピング、就職活動などについて書いていきます。

flexboxという超便利なCSSの正しい使い方!スマホwebkit対応も解説!Wordpressで使うと便利かも!

f:id:hatorihatorihatorik:20181005020142p:plain

 

こんにちは、どうもハトリです!!

 

TwitterでプログラミングやIT関連のことについてつぶやいているのでよかったら是非フォローしてください →→(@tori_engineer)

 

 

Flexboxとは?

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います!
参考:

これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス 

 

Flexboxは横並びのレイアウトを作るのが得意です。

f:id:hatorihatorihatorik:20181005021104p:plain



 

float left; 

 

というワードを見て蕁麻疹が出る人は多いのではないでしょうか。

 

float  leftをすると親要素の高さがなくなってしまい、新しく擬似要素を作らなけらばいけません。

ここからいろいろな手法がでてきます。cleafixを使ったり、overflow: hiddenだったりどれを使ったらいいかわからない人が多いのではないでしょうか。

 

この最新式の横並び方法がflexboxです。

flexboxのメリット

flexboxのメリットを解説していきます。

 

  •  簡単に1行CSSを追加するだけで横並びができる
  • 横並びの高さを揃えられる
  • 上下左右の順番を自由に設定できる
  • 高さがこなっても簡単にカスタマイズできる

 

このようなことを簡単に実現できるのがflexboxのいいところなんです。しかし欠点もあります。

flexboxのデメリット

 

flexboxのデメリットは新しいCSSであるためまだ対応していないOSやブラウザが多く存在する。ということでしょう。これはかなり致命的です。

 

横並びにしたつもりでいたものが縦に表示されてしまいます。

IEでは対応していないものが多いみたいです。

 

便利だからといって実際に使うまでに踏み切れるかは微妙ですよね。

 

ブラウザが対応しているかどうかのチェックツール

そのブラウザにCSSが対応しているかどうかを チェックするツールとしてcaniuseというものを紹介します。

Can I use... Support tables for HTML5, CSS3, etc

 

f:id:hatorihatorihatorik:20181005021101p:plain

 

 

リンクを開くと、真ん中上の方に入力フォームがありそこに使いたいCSSを入力します。今回はflexboxと入力してください。

 

下の方に現れる「show all」クリックします。

 

f:id:hatorihatorihatorik:20181005021059p:plain



これで対応しているブラウザを確認できました。

 

濃い緑→対応

黄緑→サポート範囲内

赤→非対応

 

を意味しています。

黄緑はどう対応すべきか

chromeはほとんど対応しているようですが、safariがまだ対応していないところが多そうです。

これではiphoneユーザーの多くが困ってしまいます。

ここでwebkitというものを当ててあげましょう。以下の記述をflexbox適応箇所に記述してください。

 

.flex-container {
display: flex;
}

 

これだけで対応は完了しました。簡単ですね。詳しくは以下のサイトをご覧ください。

 

coliss.com