Flexboxとメディアクエリを使ったWebデザインの基本

一から学ぶ機会があったのでFlexboxとメディアクエリを使ったWebデザインの基本的な所をまとめてみました。
なんとなくは理解しているけど、細部は不安という方は参考になるかと思います。
プレフィックスについては終わりにリンクを載せておくのでそちらを参考にしてみてください。

#２つの機能について
Flexboxとメディアクエリ。
この二つの機能を使うことで、グリッドレイアウト＆レスポンシブなサイトを製作することができます。
CSSには新しくCSS Gridという機能もあるのですが、まだまだ対応ブラウザも少ないので今回は省略。

##Flexboxとは
正式には「Flexible Box Layout Module」
意訳すると「柔軟なレイアウト枠機能」と言ったところでしょうか。
CSS3より追加された、今後のWebデザインの基礎となるべく実装されました。
対応ブラウザはこちら：Can I use... Support tables for HTML5, CSS3, etc
これまでは様々な技術が必要だったグリッドレイアウトをより簡単に記述できます。

##メディアクエリとは
こちらもCSS3より実装された機能。
様々な媒体（メディアタイプ）それぞれにCSSプロパティーを設定することができます。
例えば、TV・ディスプレイ・プリジェクター・プリンタ。横幅の他にも、アスペクト比・解像度なんかも指定できます。
今回はメディアの横幅によって表示を指定することで、PCやタブレット・スマホの横幅にページを対応させるという使い方をします。

この２つの機能を使ってコーディングする方法を説明していきます。

#Flexbox
##Flexboxの基本形
まずは一番基本となる形から。
HTMLとCSSを使って記述します。

html

<ul>
    <li>ボックス１</li>
    <li>ボックス２</li>
    <li>ボックス３</li>
</ul>

<ul>や<li>を使ったらリスト以外にも<div>や<ol>など、入れ子構造のタグならなんでも大丈夫です。

css

ul {
    display: flex;
}

最小の構成なら、親要素のdisplayプロパティーにflexを指定するだけで横並びのレイアウトにすることができます。
さらに各大きさや詳細な設定は、小要素のプロパティーで指定していきます。
ここではli要素ですね。

css

li {
    flex-direction: row;
    justify-content: center;
}

このような形ですね。

##FlexbokのCSSプロパティー
ここではいくつかプロパティーを紹介するにとどめますので、もっと詳しく知りたい方は各自で調べてみてください。
参考サイト：
CSS Flexbox の各プロパティの使い方を詳しく解説|コリス

###flex-direction
フレックスアイテムの方向を指定します。
横並びflex-direction: row;
縦並びflex-direction: column;
またその逆flex-direction: row-reverse;

###justify-content
アイテムの配置や間隔などを指定できます。
中央寄せjustify-content: center;
右寄せjustify-content: right;
均等配置justify-content: space-around;
たくさんの値があるので、詳しくは以下を参照してください。
justify-content | MDN

###子要素のflexプロパティー
ちょっとややこしいのですが、親要素にはdisplay:flex;と記述するわけですが、子要素にはflex:initial;といった記述をすることができます。こちらでは主にフレックスアイテムの幅に関する設定を行うことができます。
ここではものすごくザックリ解説します。
flex: [拡大比率] [縮小比率] [基本の幅];
flexboxは最初に言った通り「柔軟なレイアウト枠」として実装され、フレックスアイテムが一定の幅で固定されず、場合により拡大縮小することが前提となっています。
なので単純にピクセルなどで幅を指定するのではなく、他のアイテムとの相対的な幅の指定ができるようになっています。
最初はとっつきにくいですが、理解してしまえばこっちの方が便利ですね。

#メディアクエリ
##メディアクエリの基本
大きく分けてHTMLに記述するかCSSに記述するかの２通りの方法があります。

html

/*　画面サイズが480pxより小さい場合はこのファイルが適応される*/
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">

/*　画面サイズが480pxより大きい場合はこのファイルが適応される*/
<link rel="stylesheet" href="style.css" media="screen and (min-width:480px)">

/*　プリンタやプロジェクター用の設定もできます*/
<link rel="stylesheet" href="style.css" media="print,projection">

css

@media screen and (max-width:480px) { 
    /*　画面サイズが480pxより小さい場合はここを読み込む　*/
    p { color: #ffffff;}
}

@media screen and (min-width:480px) { 
    /*　画面サイズが480pxより大きい場合はここを読み込む　*/
    p { color: #ffffff;}
}

@media print,projection { 
    /*　プリンタやプロジェクター用の設定もできます　*/
    p { color: #ffffff;}
}

このように、スクリーンの種類や幅などを指定して、それぞれに適応するスタイルを変えていくことで、レスポンシブなサイトを作っています。
どちらを使うかは各々使いやすい方を選択してください。

###補足：viewportについて
スマホ画面などでの表示のされ方を指定するviewportというものもあるのですが、今回は省略させてください。
基本的に、以下のように書いておけば問題ありません。

html

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportもきちんと理解したい人は、以下のサイトが参考になると思います。
viewportとはなにか？
もう逃げない。HTMLのviewportをちゃんと理解する

#各ブラウザへの対応（参考リンク）
最後になりますがここまで体力的にもアレなので、プレフィックスについては以下のサイトをご参照ください。
CSS Flexbox の各プロパティの使い方を詳しく解説｜コリス
Flexboxの仕様と柔軟なボックスレイアウト｜ポエル

しりすぼみ感がハンパないですが以上になります。
冒頭でチラッと出てきたCSS GridはFlexboxとはまた違った要素なので、調べてみると面白いと思います。
でわでわ。