メニューアイコン

ハリマブログ

flexbox の理想と現実( ;∀;)

Akito Kageyama

2016.09.01

画像|flexbox の理想と現実( ;∀;)

こんにちは。エンジニアの陰山です。
主にエアコンの効いた室内でHTMLを書いたりCSSを書いたりJSを書いたりPHPを書いたりしています。

もういつになるでしょうか。CSS3がセンセーショナルにデビューを果たし、僕たちが神のようなプロパティ「flexbox」を手にしたのは。。
しかし僕たちは気付いていなかったのです。この神ツールの裏っ側には確かに悪魔がおり、知らずに踏み込んだ者の多くは甚大な増工数を被ることを。

flexbox? CSS3?


ここでflexbox、ひいてはCSS3についてなじみのない方のために少しだけ。
今この記事をご覧いただいている「ウェブサイト」または「ホームページ」というものは、大きくはHTMLという文書情報とCSSという装飾情報で構成されています。
CSS3というのはCSSの規格バージョンです。じゃあCSS2やCSS1もあるのか?というと、拡張子は全て.css です。
CSS3とは、CSSの新要素の総称を示すことが多いように思います。


flexbox!!


この中で僕が衝撃を受けたのが flexbox という要素です。
サイトのレイアウトでよく見かけるので一度は目にしたことがあるかと思います。左にサムネイル画像・右に文章、みたいなやつ。





こういうの、今まではこんな感じで書いてました。

HTML

CSS



これは別にいいんですけど、HTML側にclearfixクラスを付けるとか、float: left した要素に margin-left したらブラウザによってはバグるとか、そもそも clearfix を用意しとかないといけないとか、結構面倒だったんです。
また左右の高さを揃えたい時には JavaScript で別で書く必要もあります。また縦の中央揃えなんかも、display: table; 等を併用して実現すると思います。

そんなある日知ったのが display: flex; !!
なんと親要素にこれだけ書けば子要素が勝手に横並びになるという!
えっなにそれ夢!?

早速僕はこんな感じで駆け出し(書き出し)ました!

HTML

CSS


ヤヴァイ!
HTML綺麗!
CSSクール!
最高!夢かよ!


ハイ、夢でしたw


ディレクター:陰山さーん、レイアウトがめちゃくちゃですー。
デバッグ担当:陰山さーん、スマホの表示が崩れてますー。
ディレクター:陰山さーん、レスポンシブ対応案件ですよ?してますか?





ファッ!?





flexbox の現実( ;∀;)


CSS3の普及はかなり進んで、モダンブラウザなら上記だけでもいいくらい、浸透はしています。
が、現実には旧ブラウザを全て切り捨てるなんて難しいですよね。。
クライアント先にアプデを飛ばしているアンドロイドユーザー様がいたりしたら即終了です。

結局、気軽に無数に乱発した display: flex; を検索して、ひとつずつ、ていねいに、ベンダープレフィックスを足し、旧iOSや旧アンドロイド用には float: left; も書き加えていきました。

そしてイマココです。

HTML

CSS




SASSなら十分イケる!


こう見るとむしろ行数増えとるやん?となってしまうんですが、SASSを使えば結構楽ちんだったりします。
SASSとはCSSを書くための拡張言語で、CSSを入れ子にしたり、中で計算したり、変数や関数まで使えたりします。
CSSにコンパイルする際に圧縮することも出来るので、最終的な行数は全く気にもなりません。

僕は本体のSASSはこんな感じで書くことが多いです。

SASS

あの日見た夢に近づいています!(≧◇≦)

あ、上では省いていますが、旧iOSや旧アンドロイド対策としてはスマホ表示をメディアクエリで分け、そもそもflexbox は使わないようにしています。
レスポンシブデザインで flexbox を当てちゃうと、縦並びにさせる flex-derection: column; や 折り返させる flex-wrap: wrap が必要になることが多いので、結局あまりflexboxの恩恵を受けないことにも気づきました。
じゃあ今まで通り float: left; の方がわかりやすい?かというとそんなことは無く、やはりタブレット端末以上の画面サイズならその恩恵は絶大なのです!


最後に


フロントエンドの技術が進み、また情報を公開してくださる先人の方々のおかげで僕たちも恩恵に預かっています。
いつか僕も誰かの役に立てればなあ、と思う毎日です。

がんばるぜ!
アイコン: 資料作成資料作成 アイコン: デザイン・企画デザイン・
企画
アイコン: WEBWEB アイコン: 設計・製図設計・製図 アイコン: 印刷・出力印刷・出力 アイコン: 加工加工