モバイルファーストでレスポンシブ+フレキシブルレイアウトで1カラムの入力フォームを作る

技術情報

2017.10.062017.10.08

レスポンシブでのメディアクエリを考えるとき、いつもこれという感じがしなかったのですが、モバイルからPCへと共通のデザインが多いときに限り、納得のいくスマートな記述ができました。

というわけで、今回は入力フォームを例にモバイルファーストでレスポンシブ+フレキシブルレイアウトの表示を行ってみます。

html
css
1. 解説1
2. 解説2
サンプル
まとめ

html

わかりやすくするためにヘッダーとフッターを記述しました。また、dlとtableで同じ内容の入力を記述しています。

<header>
    ヘッダー
</header>

<div class="form">
    <dl>
        <dt>
            お名前
        </dt>
        <dd>
            <input type="text" id="name" name="name" class="w100pc">
        </dd>
    </dl>
    <table>
        <tbody>
            <tr>
                <th>お名前</th>
                <td><input type="text" id="t-name" name="t-name" class="w100pc"></td>
            </tr>
        </tbody>
    </table>
</div>

<footer>
    フッター
</footer>

css

モバイルファーストでSPのスタイルを先に記述し、PC用のスタイルを「@media screen and (min-width: 321px)」に記述しています。

/* SP
   ----------------------------------------------------------------- */
dl,
dt,
dd,
ul,
li {
    margin: 0;
    padding: 0;
}

input[type="text"],
th,
td {
    padding: 5px 10px;
    box-sizing: border-box;
}

li {
    display: inline-block;
    list-style-type: none;
}

header,
footer {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background: #EFEFEF;
}

.form {
    max-width: 1000px;
    margin: 0 auto;
}

dl {
    margin-bottom: 20px;
}

table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #CCC;
    border-collapse: collapse;
}

table th,
table td {
    display: block;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    border: 1px solid #CCC;
}

table th {
    border-top: none;
    border-bottom: none;
    background: #eee;
}

.w100pc {
    width: 100%;
}

/* PC
   ----------------------------------------------------------------- */
@media screen and (min-width: 321px) {
  dl {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  dl dt {
    flex: 0 0 75px;
  }

  dl dd {
    flex-grow: 1;
  }

  table th,
  table td {
    display: table-cell;
    width: auto;
    border: 1px solid #CCC;
  }
  table th {
    width: 75px;
  }
}

解説1

header、footer、formに「max-width: 1000px;」で最大の幅を1000pxとし、「margin」の「auto」で内容を中央に表示しています。これはフレキシブルと言われるレイアウトで、最大の幅を決めたレスポンシブ表示を行っています。

header,
footer {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px 0;
  background: #EFEFEF;
}

.form {
  max-width: 1000px;
  margin: 0 auto;
}

解説2

「@media screen and (min-width: 321px)」のメディアクエリで横幅が321px以上をPC側のスタイルと定義し、入力フォームの表示を横にしています。

@media screen and (min-width: 321px) {
  dl {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  dl dt {
    flex: 0 0 100px;
  }

  dl dd {
    flex-grow: 1;
  }

  table th,
  table td {
    display: table-cell;
    width: auto;
    border: 1px solid #CCC;
  }
  table th {
    width: 100px;
  }
}

サンプル

横幅が321px以上の時に入力フォームの表示を横にしています。また、最大の幅を1000pxとしているのでそれ以上は伸びません。

サンプル

まとめ

モバイルファーストはSPのスタイルを先に記述し、メディアクエリでPC用のスタイルを後に記述する。
フレキシブルレイアウトはmax-widthで最大の幅を決める。

共通するデザインが多いモバイルファーストの場合は、メディアクエリはmin-widthの「以上」と、一方の記述(PC側)だけでよいと思いました。