こんにちは。macco（まっこ）です。
WPテーマWriteの模写コーディングシリーズ第１回から第４回に渡って、HTML作成からCSSでPCのデザインをするところまで解説してきました。
今回は「レスポンシブとは良く聞くけどどういうこと？」「具体的にどう進めるの？」といった方向けに解説します。
本記事を読むことで、レスポンシブのざっくりとした概要と実際にタブレットサイズのデザインのやり方が分かります。
第１回から第４回までの記事まとめ
ここから初めて読む方もいると思いますので、第１回から第４回までのリンクを貼っておきます。
本記事を読む前に目を通しておくと、よりスムーズに理解しやすくなります。
レスポンシブとは
レスポンシブとはレスポンシブWebデザインのことで、PC、タブレット、スマートフォンなど異なる画面の横幅に合わせてWebサイトの表示を見やすくする手法です。
ちなみに今でこそレスポンシブWebデザインが主流ですが、主流になる前は各デバイスごとにHTMLとCSSを用意したりしていました。
レスポンシブWebデザインの登場によって、HTMLをワンソースとして管理できるようになったことが一番大きい変化だったと思います。
メディアクエリ（Media Queries）とは
レスポンシブ対応を行うためには、CSSのメディアクエリという要素を使用します。
メディアクエリとは、Webサイトを表示する画面の横幅に合わせてCSS内でデザインを切り替える手法です。
○○px以上だったら△△、○○px以下だったら□□というように、あるpxを切替点とし、それに対応するようなかたちでCSSに追記します。
この切替点をブレークポイントといいます。
Writeを見ると、以下のようなブレークポイントになっていることが分かります。
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 783px) {
}※max-widthの値については、直接ソースを見ているわけではないため、おおよその値となります。
上記のコードに出てくるmax-widthは、ブラウザの横幅の最大値を表します。
例えばmax-width: 979pxの場合、ブラウザの横幅が979px以下はカッコで括っているCSSプロパティが適用されるということになります。
CSSの書く順番に注意する
あと気を付けてほしいのは、CSSの書く順番です。
上からPC⇒タブレット⇒スマートフォンの順番で記述するようにしてください。
画面の横幅が大きい⇒小さいに向けてという感じです。
この記述は一般的にPCファーストと呼ばれています。
主流は、画面の横幅が小さいほうから大きいほうへ記述するモバイルファーストと呼ばれるやり方です。
しかし、今回は分かりやすさを考慮して、PCファーストで進めています。
今後、レスポンシブ化に慣れてきたらモバイルファーストにも挑戦してみることをオススメします。
タブレットサイズをデザインする
ここから先は「【初心者向け】【第１回】WPテーマWriteの模写コーディング～HTML～」から「【初心者向け】【第４回】WPテーマWriteの模写コーディング～フッター～」まで進めてきた人向けになります。
まだご覧になっていない方は、本記事の「第１回から第４回までの記事まとめ」のリンクからご確認お願いします。
それではタブレットサイズのデザインを行っていきます。
全体のデザイン
まずHTMLのbodyタグ直下にあるdivタグ（class=”container”）の横幅を調整します。
@media screen and (max-width: 979px) {
.container {
max-width: 700px;
margin: 0 auto;
}
}以下の画面表示になればOKです。
ヘッダーのデザイン
次にロゴの右に並んでいたメニューと検索アイコンの段を、ロゴの下にくるようにデザインを調整します。
.navのflex-wrap: wrap;を指定することで、横複数行に折り返してメニューを表示します。
@media screen and (max-width: 979px) {
.container {
max-width: 700px;
margin: 0 auto;
}
.gnav {
flex-wrap: wrap;
margin-bottom: 4rem;
}
.logo-area {
width: 100%;
}
.menu-area {
margin-top: 1rem;
}
.menu-area li.menu-home {
padding-left: 0;
}
}メニューと検索アイコンがロゴ下に並ぶようになりました。
メインのデザイン
メインの部分は２か所あります。
１つは記事の右側にある記事タイトルと本文を、日付の下にくるようにします。
もう１つは記事の最後にあるページネーションを左側に寄せます。
articleのflex-direction: column;を指定することで、日付を主軸にして上から下に記事タイトルと本文が並ぶようになります。
.paginationのjustify-content: flex-start;を指定すると、配下のaタグ（1, 2, 3…）が左端から配置されるようになります。
@media screen and (max-width: 979px) {
.container {
max-width: 700px;
margin: 0 auto;
}
.gnav {
flex-wrap: wrap;
margin-bottom: 4rem;
}
.logo-area {
width: 100%;
}
.menu-area {
margin-top: 1rem;
}
.menu-area li.menu-home {
padding-left: 0;
}
article {
flex-direction: column;
margin-bottom: 5rem;
}
article div:last-child {
margin-top: 0.5rem;
}
.pagination {
justify-content: flex-start;
}
}日付の下に記事タイトルと本文が並びます。
ページネーションの部分も左端から配置されます。
フッターのデザイン
最後にフッター部分をデザインします。
フッター上部であるHTMLのdivタグ（class=”footer-top”）直下の４つのdivタグを縦に並ぶようにします。
続けてフッター下部であるHTMLのdivタグ（class=”footer-bottom”）配下にあるコピーライトを、SNSアイコンの下に並ぶようにします。
@media screen and (max-width: 979px) {
.container {
max-width: 700px;
margin: 0 auto;
}
.gnav {
flex-wrap: wrap;
margin-bottom: 4rem;
}
.logo-area {
width: 100%;
}
.menu-area {
margin-top: 1rem;
}
.menu-area li.menu-home {
padding-left: 0;
}
article {
flex-direction: column;
margin-bottom: 5rem;
}
article div:last-child {
margin-top: 0.5rem;
}
.pagination {
justify-content: flex-start;
}
.footer-top {
flex-direction: column;
}
.footer-top > div {
width: 100%;
margin-right: 0;
}
.profile-area {
margin-bottom: 4rem;
}
.footer-right {
margin-bottom: 9rem;
}
.resent-posts {
margin-bottom: 5rem;
}
.category input {
margin-top: 6rem;
max-width: 320px;
}
.footer-bottom {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.footer-bottom div {
margin-top: 4rem;
}
.footer-bottom small {
display: block;
margin-top: 2rem;
}
}フッター上部及び下部の中にある要素を縦に並べることができました。
フッター上部
フッター下部
終わりに
今回は、レスポンシブの概要とメディアクエリの参考例、実際にタブレットサイズのデザインを行いましたが、いかがでしたでしょうか。
メディアクエリの書き方は、ほんの１例に過ぎないので詳しく知りたい方はインターネットなどで検索してみてください。
次回はスマートフォンのデザインを予定しています。
最後までお付き合いいただきありがとうございました。
続きを公開しました↓
良かったらご覧ください。
