---
# System prepended metadata

title: レスポンシブルデザインの手引

---

# レスポンシブルデザインの手引

CSSのみでレスポンシブルデザインを作るときの手引

メディアクエリというものを利用する

## PCは横2列、タブレット、スマホは縦1列

flex boxを利用して横に２つコンテンツが並ぶようなレイアウトを作る。

### 普通のHTML

```HTML
<style>
section.flex.non-responsive{
    display:flex;
    flex-direction: row;//子要素を横並びにする。
}

section div{
    width: 50%;
    padding: 24px;
    color: #fff;
}

</style>
<section class="flex non-responsive">
    <div style="background-color: red">
        左にあるコンテンツ
    </div>
    <div style="background-color: blue">
        右にあるコンテンツ
    </div>
</section>
```
結果↓
<style>
section.flex.non-responsive{
    display:flex;
    flex-direction: row;
    margin-bottom: 24px;
}

section div{
    width: 50%;
    padding: 24px;
    color: #fff;
}

</style>
<section class="flex non-responsive">
    <div style="background-color: red">
        左にあるコンテンツ
    </div>
    <div style="background-color: blue">
        右にあるコンテンツ
    </div>
</section>

左右にボックスが並ぶようなレイアウトになっていると思う。

## レスポンシブル化

```HTML
<style>
section.flex.responsive{
    display:flex;
    flex-direction: row;//子要素を横並びにする。
}

section div{
    width: 50%;
    padding: 24px;
    color: #fff;
}

@media screen and (max-width: 800px){//800pxを割ったら
section.flex.responsive{
    flex-direction: column;//子要素を縦並びにする。
}
}

</style>
<section class="flex responsive">
    <div style="background-color: red">
        左にあるコンテンツ
    </div>
    <div style="background-color: blue">
        右にあるコンテンツ
    </div>
</section>
```
結果↓(画面幅を小さくするなどして、800pxを割ると縦並びになる。)

<style>
section.flex.responsive{
    display:flex;
    flex-direction: row;
    margin-bottom: 24px;
}

section div{
    width: 50%;
    padding: 24px;
    color: #fff;
}

@media screen and (max-width: 800px){
section.flex.responsive{
    flex-direction: column;
}

section div{
    width: 100%;
}
}

</style>
<section class="flex responsive">
    <div style="background-color: red">
        左にあるコンテンツ
    </div>
    <div style="background-color: blue">
        右にあるコンテンツ
    </div>
</section>

## メディアクエリ(@media~)の書き方

### 基本

```CSS
//764px以下で適用されるCSSが書きたい時

//通常時のCSS（764px以上1500px以下の画面幅）
.title{
    font-size: 24px;
}

//764px以下で適用されるCSS（764px以下）
@media screen and (max-width: 764px){
.title{
     font-size: 16px;//764pxを割るとfon-sizeが16pxに上書きされる。
}

//1500px以上で適用されるCSS
@media screen and (min-width: 1500px){
.title{
    font-size: 36px;//800px以上になるとfon-sizeが36pxに上書きされる。
}
}
```

## 注意

### 1：動かない書き方
```CSS
@media screen (max-width: 320px){
.title{
    font-size: 18px;
}
}

@media screen (max-width: 764px){
.title{
    font-size: 24px;
}
}
//実行して画面幅を320px以下にしてもfont-sizeは24pxのままになる。
```

##### 理由：
先に320px以下の記述をして、後に764px以下の記述が来ているので、320px以下でも764px以下のための記述が優先されてしまうため。

##### 解消方法1
```CSS
@media screen (max-width: 764px){
    ...
}

@media screen (max-width: 320px){
    ...
}
//影響範囲の大きいものから先に書く（当然だがmin-width指定の時は逆）
```
##### 解消方法2
```CSS
@media screen (max-width: 320px){
    //320px以下に適用
}

@media screen (max-width: 764px) and (min-width:321px){
    //321px以上764px以下に適用
}

//andでmin-widthとmax-widthをつなげることで範囲を絞ることができる。
```
### 2:冗長的になる書き方

```CSS
//PCサイズ
div{
    width: 50%;
    padding: 24px;
    background-color: #333;
    color: #FFF;
}

//タブレットサイズ
@media screen (max-width: 764px){
div{
    width: 100%;
    padding: 12px 5px;
    background-color: #333;//変わらない部分を重複して書かない
    color: #FFF;//変わらない部分を重複して書かない
}
}
```

## 応用

```HTML
<!--HTML-->
<section>
    <div class="tablet-invisible">
        タブレットのみ表示しない
    </div>
    <div class="mobile-vinvisible">
        モバイルのみ表示しない
    </div>
</section>
```
```CSS
//CSS
section{
    display: flex;
    flex-direction: row;
}

section div{
   width: 50%; 
}

@media screen (max-width: 764px){
.tablet-invisible{
    display: none;//764px以下で表示しない。
}
@media screen (max-width: 480px){
.mobile-invisible{
    display: none;//480px以下で表示しない。
}
}
```

こういうこともできる。

## お作法とか

実際にはこんな感じになる。

### パターン１：１つのファイルに全盛り
```CSS
//style.css
@charset "utf-8";

//PC対応
html{
    ...
}

//タブレット対応
@media screen (max-width: 764px){

html{
    ...
}
}

//スマホ対応
@media screen (max-width: 480px){

html{
    ...
}
}
```

### パターン2：分ける
```CSS
//style.css

html{
    ...
}
```

```CSS
//tablet.css
@media screen (max-width: 764px){

html{
    ...
}
}
```

```CSS
//mobile.css
@media screen (max-width: 480px){

html{
    ...
}
}
```

```HTML
<!--HTML側の読み込み-->
<html lang="ja">
    <head>
        <link rel="stylesheets" rel="./style.css">
        <link rel="stylesheets" rel="./tablet.css">
        <link rel="stylesheets" rel="./mobile.css">
    </head>
    <body>   
        ...
    </body>
</html>

まあメディアクエリについてはこういう感じ（伝わった？）