takato（@n8takato）です！
レスポンシブwebデザインって何？どうやって作るの？
この記事では上記の課題を解決します。
webデザインの勉強をしている方はレスポンシブwebデザインという言葉を一度は聞いたことがあると思います。
webデザイナーやweb系のプログラマーを目指している方は、レスポンシブwebデザインを理解しておかなければいけません。
レスポンシブwebデザインとは何か、どのように作るのかを説明していきます。
-
この記事でわかること
- レスポンシブwebデザインについて
- レスポンシブwebデザインの作り方
レスポンシブwebデザインとは何か？
レスポンシブwebデザインとは、サイト訪問者の使用しているデバイスに応じてサイトのレイアウトを変更することです。
サイト訪問者は主にパソコン、iPad、スマホの3種類のデバイスで見ています。そして、これらのデバイスは横幅が異なります。
パソコンでは綺麗に見えていても、iPadやスマホのような横幅の狭いデバイスで見るとレイアウトが崩れて見えてしまいます。
この現象を防ぐために、デバイスの横幅に応じてwebサイトのレイアウトを整えるということがレスポンシブwebデザインのことです。
サイト制作者は、webサイトを作成する時はパソコン、iPad、スマホの3つのデバイス幅で綺麗なレイアウトになるように作成する必要があります。
使用するデバイス幅に合わせてレイアウトを綺麗にすること
レスポンシブwebデザインの作成方法
ここからはレスポンシブwebデザインの作り方について具体的に説明していきます。
レスポンシブwebデザインは、基本的に既にあるCSSファイルに追記して作成します。
パソコン幅で作成した際に使用したCSSファイルをそのまま使用します。
CSSファイルの1番下にある「}」の下に、下記のコードを記入します。
@media screen and (max-width: 699px) {}「@media」はレスポンシブwebデザインを作成する際に使用されるCSSコードです。上記のコードは、デバイスの横幅が699px以下の場合、こちらのCSSが適用されるということです。
例えば下記のようなCSSがあるとします。
h1 {
font-size:30px;
}
@media screen and (max-width: 699px) {
h1 {
font-size:15px;
}
}上記コードは、700px以上のデバイスで見た場合はh1タグの文字サイズが30px、699px以下のデバイスで見た場合はh1タグの文字サイズが15pxになります。
このように、@mediaを用いることでデバイス幅によって装飾を変更することが出来ます。
今は699pxとしていますが、ピクセル数を変更するとレスポンシブの分岐点が変わります。
また、（min-width: 699px）にすると699px以上の場合というようにすることも出来ます。
レスポンシブwebデザインを実装する際のポイント
レスポンシブwebデザインを実装する際のポイントは下記3つです。
・デザインの段階からレスポンシブを意識して制作する
・パソコンとiPad・スマホでレイアウトを変更する
・グローバルメニューはハンバーガーにする
それぞれ説明していきます。
1つ目：デザインの段階からレスポンシブを意識して制作する
レスポンシブwebデザインを実装する際は、デザインの段階でレスポンシブのデザインも考える必要があります。
パソコンで見た際のデザインだけでなく、iPadやスマホで見た場合のデザインもこのフェーズで作成しておきましょう。
この時大切なのは、コーディングを意識して作成することです。
iPadやスマホのデザインは、パソコンで見た際のデザインから崩したものになります。
そのため全く異なるデザインを作成してしまうと、コーデイングでレスポンシブデザインを作成する時に大変になってしまいます。
横並びの要素を縦にする、パソコンとスマホで画像の切り抜く場所を変えるなどを考慮してデザインを作成してください。
2つ目：パソコンとiPad・スマホでレイアウトを変更する
1つ目の内容で伝えましたが、iPadとスマホのレイアウトはパソコンのものから崩して使用します。
例えば、デザインの中に3つの四角が使用されているとします。
パソコンで見た際は3つの四角を横並びにレイアウトし、iPadとスマホでは縦にレイアウトする、というようにパソコンのデザインを崩してレイアウトします。
この時CSSでよく使用するのが「initial」です。
パソコンでは横並びに設定し、iPadとスマホでは横並びを解除したい時などに使用します。コードは下記のように使用します。
.box {
display:flex;
}
@media screen and (max-width: 699px) {
.box {
display:initial;
}
}上記のコードは、700px以上ではboxというクラスを横並びにし、699px以下ではboxクラスの横並びを解除するという意味です。
「initial」は設定したCSSを解除することのできるものです。レスポンシブデザインの際によく使用するので、覚えておいてください。
3つ目：グローバルメニューはハンバーガーにする
3つ目はグローバルメニューをハンバーガーにすることです。
ハンバーガーメニューとはスマホやiPadで見た際に右上または左上にある3本線のメニューのことです。
3本線をタップするとメニューが表示され、もう一度タップするとメニューが非表示になります。
パソコンと違いスマホやiPadは横幅が狭いので、グローバルメニューはハンバーガーに設定することでスマートになります。
このブログサイトもハンバーガーメニューになっているので、確認してみてください。
ハンバーガーメニューをカスタマイズする方法を他の記事で紹介しています。WordPressのLightningというテーマを使った際のハンバーガーメニューの変更方法です。
詳しくは「Lightningのハンバーガーメニューをカスタマイズする方法！」を読んでください。
最後に
今回はレスポンシブwebデザインの説明と作り方を紹介しました。
レスポンシブwebデザインはwebサイトやwebアプリ製作者にとって必要な知識です。今勉強している方やこれから勉強する方はこの知識を身につけておいてください。
