学習内容を備忘録としてまとめます。
メディアクエリを実装し、ウィンドウ縮小時レイアウトが崩れないようにしました。
メディアクエリとは
訪問ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするもので、スマホからアクセスした際にPC用のページが表示されると当然文字が小さくて閲覧しにくいといったユーザビリティを考慮して画面サイズに適したデザイン表示させるために必要なタグです。
CSSファイルにメディアクエリを実装
style.css
@mediascreenand(max-width:1000px){//スタイルを記載}style.cssにメディアクエリを書いていきます。
上記だと、ウィンドウが1000px以下になったときに中のスタイルが適用されます。
実装方法
トップ動作画面の実装方法を記載します。
ヘッダー
上のヘッダーのように、ウィンドウ幅が1000px以下のときは『投稿』『メッセージ』『メニュー』だけにします。
header.php
<ul><li>app</li><liclass="header_menu_wide">ユーザー一覧</li><li>投稿</li><liclass="header_menu_wide">投稿一覧</li><li>メッセージ</li><liclass="header_menu_wide">ログアウト</li><liclass="header_menu_wide">退会</li><liclass="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;}@mediascreenand(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
<divclass="row wide_disp"><divclass="col-4"><?php$page_type=$_GET['type'];$page_id=$_GET['page_id'];：：</div><divclass="col-4"><?phpif($page_type==='main'):?><h2class="left"><?=$current_user['name']?>さんの投稿</h2>：
：
</div><divclass="col-4"><divclass="col-10 offset-1"><h2class="left">投稿</h2>：
：
</div></div><divclass="row narrow_disp"><divclass="col-6"><?php$page_type=$_GET['type'];$page_id=$_GET['page_id'];：：</div><divclass="col-6"><?phpif($page_type==='main'):?><h2class="left"><?=$current_user['name']?>さんの投稿</h2>：
：
</div></div>style.css
.narrow_disp{display:none;}@mediascreenand(max-width:1000px){.wide_disp{display:none;}.narrow_disp{display:block;}}注意点
１つのファイルに同じ内容のコードがある場合、何点か注意点があります。
・IDが重複していないか
同値のIDを使用している場合、JSなどがうまく動かない時があるので値を変更するなど修正が必要。
・require_once(PHP限定)
require_onceを2つ以上用いていると、片方が動かなくなる。
ここでいうと、2ブロック中のどちらか一方が機能しなくなります。
requireで正常に動きます。