【CSS】メディアクエリ

学習内容を備忘録としてまとめます。
メディアクエリを実装し、ウィンドウ縮小時レイアウトが崩れないようにしました。

メディアクエリとは

訪問ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするもので、スマホからアクセスした際にPC用のページが表示されると当然文字が小さくて閲覧しにくいといったユーザビリティを考慮して画面サイズに適したデザイン表示させるために必要なタグです。

CSSファイルにメディアクエリを実装

style.css

@media screen and (max-width: 1000px) {
        // スタイルを記載
}

style.cssにメディアクエリを書いていきます。
上記だと、ウィンドウが1000px以下になったときに中のスタイルが適用されます。

実装方法

トップ動作画面の実装方法を記載します。

ヘッダー

上のヘッダーのように、ウィンドウ幅が1000px以下のときは『投稿』『メッセージ』『メニュー』だけにします。

header.php

   <ul>
    <li>app</li>
    <li class="header_menu_wide">ユーザー一覧</li>
    <li>投稿</li>
    <li class="header_menu_wide">投稿一覧</li>
    <li>メッセージ</li>
    <li class="header_menu_wide">ログアウト</li>
    <li class="header_menu_wide">退会</li>
    <li class="show_menu">メニュー
    　<div>
        <ul>
         <li>ユーザー一覧</li>
         <li>投稿一覧</li>
         <li>メッセージ</li>
         <li>ログアウト</li>
         <li>退会</li>
        </ul>
      </div>
     </li>
   </ul>

ユーザー一覧、投稿一覧、ログアウト、退会のクラス名にheader_menu_wideを、メニューにはshow_menuを指定します。

style.css

.show_menu {
    display: none;
}

@media screen and (max-width: 1000px) {
    .header_menu_wide {
        display: none;
    }
    .show_menu {
        display: block;
    }
}

このように設定すると、ウィンドウ幅が1000px以下のときクラス名header_menu_wideを指定している要素を非表示、show_menuを指定している要素を表示します。

メイン画面

続いて、メイン画面にメディアクエリを実装します。
先ほどのヘッダーと方法は変わりません。

メイン画面に2ブロック（wide_disp、narrow_disp）用意して、それぞれウィンドウ幅によって表示を変更します。

main.php

<div class="row wide_disp">
<div class="col-4">
<?php
$page_type = $_GET['type'];
$page_id = $_GET['page_id'];
：
：
</div>
<div class="col-4">
<?php if($page_type === 'main'): ?>
  <h2 class="left"><?= $current_user['name'] ?>さんの投稿</h2>
：
：
</div>
<div class="col-4">
<div class="col-10 offset-1">
  <h2 class="left">投稿</h2>
：
：
</div>
</div>

<div class="row narrow_disp">
<div class="col-6">
<?php
$page_type = $_GET['type'];
$page_id = $_GET['page_id'];
：
：
</div>
<div class="col-6">
<?php if($page_type === 'main'): ?>
  <h2 class="left"><?= $current_user['name'] ?>さんの投稿</h2>
：
：
</div>
</div>

style.css

.narrow_disp {
    display: none;
}

@media screen and (max-width: 1000px) {
    .wide_disp {
        display: none;
    }
    .narrow_disp {
        display: block;
    }
}

注意点

１つのファイルに同じ内容のコードがある場合、何点か注意点があります。

・IDが重複していないか

同値のIDを使用している場合、JSなどがうまく動かない時があるので値を変更するなど修正が必要。

・require_once(PHP限定)

require_onceを2つ以上用いていると、片方が動かなくなる。
ここでいうと、2ブロック中のどちらか一方が機能しなくなります。

requireで正常に動きます。

参考URL