記事の詳細

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

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

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

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

flexboxはじめました。

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

 

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

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

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

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

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

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

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

flexboxはじめました。

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

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

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

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

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

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る