「いやめっちゃ楽ですよ。レスポンシブにかかる時間ホント減りましたもん」
「へー。ええやん。それウチの標準にしようよ」

というわけで勉強会を開いたら

「できるってこたぁわかった」
「なんとなくわかったような気がする」
「つかプロパティ多くね？」

となりました。プロパティに関しては完全同意なのですが、なんとなくわかったじゃ困るんですよ！
そんなわけで必死こいてこうだよっていうテキストを作りました。ご自由にお持ちください。

編集可能なaiデータ（IllustratorCC）、pdfデータが入っています。再配布は禁止であとはご自由にどうぞー。

 

特に当社の社員は必ずDLして覚えてください。お願いします。

レスポンシブ対応に最適なflexbox

レスポンシブデザインをデフォルトで行っているインクループでは、ちょっと前までfloatを使ったレイアウトをしておりました。IEの前のバージョンでの画面確認をするお客様が多かったからですね。ちょっと不安だったのですね。

ですが2017年4月11日にIE9もIE10も延長サポートが終了しました。
つまりIE9とかIE10は、これからとっても危険なブラウザになるということです。セキュリティに問題があっても修正されなくなるブラウザで、ウェブページを見たいという方はいらっしゃらないと思います。

なのでこれを境にCSSコードもしっかり基準を作らないと！　ということになったわけです。

flexboxはfloatでclearfixだのなんだのと考えていたdivのあれこれを、考えなくてもよくなるとっても素敵なプロパティです。
端的に言ってしまえば「ハコに突っ込んだアイテムは全部自動で整理します」機能。
ドラクエとかFFでも見かける「道具を整理する」の機能です。エクセレント。ついでに自分で並び替えもできる。パーフェクトです。
モンハンのダブルクロスも随分とアイテム登録がらくちんになって……おっとこれは別の話ですな！

ホームページをレスポンシブにする利点とは？

人口の60％がスマートフォンから検索している今現在、スマートフォンやタブレットのユーザー数は増加し続けています。特に20代から40代の利用率は平均73％で、これからも伸び続けていくだろうことが予測できます。（2016年総務省「情報通信白書平成28年度版」）
ターゲットの年齢層にもよりますが、レスポンシブあるいはスマートフォン対応のウェブサイトはこれから必須になっていくことでしょう。

レスポンシブデザインのウェブサイトは、多様なモバイルデバイスで自動的に最適なデザインを構成できる仕組みです。
小さな画面でストレスフリーな閲覧ができるようになる、ということは、ユーザーエクスペリエンスに非常に重要なことです。

flexboxでできる「順番の入れ替え」

flexboxは「コンテンツの並びを整理できる」他に「その順番を入れ替えることができる」というのが非常にフレキシブルで魅力的な機能です。これをやると「パソコンだとここ、スマホだとこっち」というレイアウトの入れ替えが簡単にできるのですね。

柔軟性のある導線づくりにflexboxはこれから必須となっていくかと思われます。