1. TOP
  2. WEBサイト制作
  3. CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

 2018/03/27 WEBサイト制作 コーディング Fumio Sakurai
この記事は約 10 分で読めます。 230 Views

CSSトレーニング vol.02
「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

この章で学ぶこと

    1. Flexboxを使ったレスポンシブデザイン
    2. メディアクエリの書き方
    3. ulとliを使ったメニューの作り方

主に使うタグ

【HTML】(前項に加えて)

  • img
  • ul
  • li
  • footer

【CSS】

  • display (flex)
  • flex-direction
  • align-content
  • @media

Flexbox①「メイン要素のレイアウト」

まずは、前講で解説した「float」を使った「旧式」のレイアウトをflexboxで書いたらどうなるのか解説します。

ハイライトした箇所が前回と一番異なる部分です。(clearfixがいらない)

デモページ(PCで別ウィンドウ表示を推奨)

https://stakeholdersuccess.com/web_training/sec_02/

 

サンプルコード(html)

 

サンプルコード(CSS)

上記のデモページを開いて、ブラウザの幅を縦横に動かしてみてください。

ブラウザ内の表示エリアに追随する形で、四つの要素が動いていると思います。
(header:緑、main:赤、aside:青、footer:オレンジ)

前講の時と違って、幅が1200pxを切ったときに、下図のようにmain(赤)の下にaside(青)が来たと思います。

Flexboxでのレイアウト変更例

CSSで以下のコードを書き足すだけで、このような表示切り替えができるのです。

Flexboxの使い方(外部記事へ)

Flexboxの使い方は以下のサイトがまとめて解説してくれているので、はてブして、CSS Flexboxチートシートをダウンロードしてください。

参照:日本語対応!CSS Flexboxのチートシートを作ったので配布します

上記ページがFlexboxについて一番わかりやすく解説してくれています。
まずは一通りできることを確認してください。

Flexboxはどのような時によく使うか?

上記で紹介させていただいたサイトでも解説されているようにFlexboxは非常にできることが多いです。

要素を幅や高さに合わせて簡単にレイアウトしてくれるので、レスポンシブデザインには欠かせないプロパティです。

Flexboxは特に以下の用途でよく使います。

  1. サイドバー(aside)をメインエリア(main)の下にレイアウト変更(本記事のサンプル①)
  2. メニュー(PCでは横並び → スマホでは縦並び)
  3. ブログの記事一覧ページでの記事レイアウト

Flexboxのレイアウト変更で一番よく使うのが「flex-direction」プロパティです。

このプロパティは、レイアウトの方向を横(列:row)にするのか縦(行:column )にするのかを指定できる他、row-reverseやcolum-reverseという値を指定することにより、並び方を逆向きにすることもできます。

アイキャッチ画像を左と右に入れ替えたいときや、記事の付属情報の並び替えなどでよく使います。

メディアクエリを使ってデバイスごとの表示を変えよう

上記のサンプルのように、ある一定の幅でレイアウトを変える際に欠かせないのがメディアクエリです。

screenやprintなどの設定もできますが、あまり需要はないため、基本的な構文は以下のものさえ覚えておけばいいです。

(詳しく知りたい人はこちら)

上記のように、解像度の幅を○px以下や○px以上というように指定します。複数条件がある場合は、上記の3つめのようにandを使います。

ここでよく質問されるのが、デバイス対応を考えた時にはどのような設定がいいのか?ということです。

デバイスごとの解像度については、下記の記事で解説しました。

個人的に制作していて、費用対効果が一番高いと思う設定が以下のものです。

スマホ用まで768pxにしているサイトもたまに見かけますが、次回解説する、サイズの表示単位で vwを使うとき、768pxまでをモバイルとしてまとめてしまうと、文字が大きくなりすぎるといった不都合が出てしまいます。

768pxはiPadやiPadminiなどの表示解像度(縦置き)なのですが、縦置きでのWEB閲覧は、圧倒的にシェアが低いんです。

なので768

1024px以下の解像度対応を考えるときに重要なのが、グローバルメニューをどうするかだと思います。

何故かというと、パソコン閲覧中にハンバーガーメニューのような「非表示ナビゲーション」は、ユーザーに見つけてもらいにくいんですよね。

参考:ハンバーガーメニューと非表示のナビゲーションはUX指標を悪化させる

ですから、600pxまではスマホだから一律でハンバーガーメニューでいいとして、タブレットの横置き表示の時に、どの解像度からPCと同じような横並びメニューに変えるのかが結構大きな悩みになります。

ぶっちゃけ2018年3月現在においては、Nexus7の960pxをどうするかですね。

まぁ結論を先に言うと。1024pxからはPC用の横メニュー表示をするのがやはりいいかと。

正直この60pxの差は大きいんです・・・メニューがぎゅっと詰まった感じになってしまい兼ねないので・・・

文章では伝わりにくいと思いますので、モバイル端末ごとの表記テストツール(Sizzy)で表示した一覧画像をご覧ください。

上記のようにiPad Airの横1024px(昔のPCに多かった解像度でもあります)空をPCと同じ横メニューにしてみるのが2018年現在の最適解ではないかと思います。

なので、スマホ・タブレット&小型PC・PCの3パターンに絞るのが費用対効果(カバー率)が高いレスポンシブサイト制作に向いていると思います。

ちなみに、上記の指定例では、PC用については指定しなくても勝手に適用されます。

 

では、サンプルコードの方を見てみましょう。

上記のように、Flexboxを適用するためのコンテナをdivで作り、中にmainとasideを入れ込みます。

そして、PC表示(@media指定なし)のときは

flex-directionをrow(列)指定し、横並びにmainとasideを並べています。

また、Flexboxで合わせてよく使う、「align-content」でコンテンツ内の要素を中央揃えにあります。

(※レスポンシブデザインでは、1カラム・センタリングのデザインをよく使うため、このプロパティを多用します。)

これを、PC以外のレイアウトで以下のように切り替えます。

flex-directionをcolumn(行)指定に変更することで、縦にmainとasideが並びます。

メディアクエリの書き方で気をつけて欲しいのが、 { }の位置です。

思った通りの挙動をしないときの大半は、この{ }の } がおかしな位置にあったりします。

また、メディアクエリ内で要素を置き換える際には、置き換えが必要な部分だけを上書きすればいいので、今回のケースであれば、mainとasideの幅(width)を画面いっぱいの幅に変更(100%か100vwを指定)すればいいということになります。

 

本日はここまで。

次回は、flex-boxの活用方法と、レスポンシブデザイン用のメディアクエリについて解説します。

Make the world better place

シェア大歓迎です!

 

 

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • レスポンシブデザインについて