WordPress│メディアクエリを使わずにレスポンシブレイアウトにする方法

CSSを書くときに画面の解像度の合わせて

メディアクエリ(例@media screen and (max-width: 768px) {})を使うことが多いと思います。

とにかく記述が長くなりがちなCSS。

メディアクエリを使わずにレスポンシブな制御ができれば、可読性が高まって便利ですよね。

ということでグリッドレイアウトを使って、CSSを書いてみました。

実際のサンプル

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

メディアクエリを使わずにレスポンシブレイアウトにする方法

メディアクエリを使わずにレスポンシブレイアウトにする為に

ボタンのHTMLを記述して、その親の階層をグリッドレイアウトにして制御してみました。

ポイント
  • max-widthで最大幅を指定する
  • grid-template-columnsで特定の幅を下回った時に全幅(width:100%)にする

HTML

<div class="button-wrapper">
   <a href="https://motoki-design.co.jp/wordpress/contact/" class="button-contact">お問い合わせへ</a>
</div>

CSS

.button-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 480px;
    margin: 3em auto;
}

.button-contact {
    padding: 0.9em 2em;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.button-contact:hover {
    background-color: #333;
    color: #fff;
}

コメント付き

/* ボタンのラッパー(グリッド)のスタイル定義 */
.button-wrapper {
    display: grid;  /* グリッドレイアウトを適用 */
    /* 各ボタンの幅を最小250pxから最大利用可能な全幅に設定 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    max-width: 480px;  /* ラッパーの最大幅を480pxに設定 */
    margin: 3em auto;  /* 上下に3emのマージンを持ち、左右は中央寄せ */
}

/* ボタン自体のスタイル定義 */
.button-contact {
    padding: 0.9em 2em;  /* 内部のパディング */
    border: 1px solid #333;  /* ボタンの境界線 */
    border-radius: 5px;  /* 角を丸くする */
    background-color: #fff;  /* 初期の背景色 */
    color: #333;  /* 初期の文字色 */
    text-align: center;  /* テキストを中央寄せ */
    text-decoration: none;  /* アンダーラインを取り除く */
    /* 色の遷移を0.3秒でスムーズに変化させる */
    transition: background-color 0.3s, color 0.3s; 
}

/* ボタンにマウスを載せたときのスタイル */
.button-contact:hover {
    background-color: #333;  /* ホバー時の背景色を黒色に変更 */
    color: #fff;  /* ホバー時の文字色を白色に変更 */
}

実際のサンプル

まとめ

PCでは特定の割合の幅にしつつ、スマホでは全幅にするというのはよくあるパータンですよね。

それをgrid-template-columnsで制御できるのは便利です。

実戦でも試してみて、また加筆しようと思います。

気になった方は是非試してみてください

  • URLをコピーしました!

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次