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

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

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

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

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としているのでそれ以上は伸びません。

ブレイクポイントは321px
ブレイクポイントは321px

サンプル

まとめ

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

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

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント