Help us understand the problem. What is going on with this article?

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

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

2つの機能について

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

Flexboxとは

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

メディアクエリとは

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

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

Flexbox

Flexboxの基本形

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

html
<ul>
    <li>ボックス1</li>
    <li>ボックス2</li>
    <li>ボックス3</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に記述するかの2通りの方法があります。

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とはまた違った要素なので、調べてみると面白いと思います。
でわでわ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away