- レスポンシブ対応の方法がわからない。
- どうやって書けばいいんだろう。
- サクッと知りたいな・・・!
このような方向けの記事になります。
もくじ
本記事では、コーディング初心者の方向けにレスポンシブ対応させるCSSの書き方ををサクッと解説していきます。最近のWEB制作ではレスポンシブ対応は必須レベルですので頭に叩き込んどきましょう。
レスポンシブ対応って何なの?必要なの?
書き方を解説していくまえにサラッと「レスポンシブ対応」について解説していきます。不要な方はとばしてOKです。
レスポンシブ対応とは?
現在はWEBサイトへの流入のほとんどはスマホからなんですよね。このサイトの8割以上がスマホからの流入です。
WEBサイトのジャンルにもよりますが、スマホからの流入が大きくなってきておりますので、WEBサイトのレスポンシブ対応は必須になってきております。
SEO対策にもなる
WEBサイトをレスポンシブ対応させる事でSEO対策にもなります。
Googleの検索エンジンではレスポンシブ対応されているサイトの方がSEOに有利とされています。
Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。
Google レスポンシブ ウェブ デザイン
上記はGoogleの公式の開発者向けのガイドから引用しました。
レスポンシブデザインにする事でコンテンツの質が上がると明言しておりますのでスマホ対応は必須です。
Googleが言う事は絶対です。従いましょう。
レスポンシブ対応させるCSSの書き方を解説【2通りあります】
ザックリ2通りあります。
- 書き方①:CSSファイルを分ける
- 書き方②:メディアクエリを使う(ファイル1つ)
上記の通りで2通りの方法があります。
順番に解説していきます。
準備:viewportを設定しよう
レスポンシブ対応させるには、まずはheadタグ内にviewportという言われるmetaタグを記述する必要があります。
こちらはコードが決まっておりますのでコピペで大丈夫です。
HTML<meta name="viewport" content="width=device-width, initial-scale=1.0">
こちらはブラウザに使用している端末の幅を知らせるための記述になります。
上記のコード以外は記述する事はないので深く理解する必要はないです。サイト制作をするときに必須のコードであると理解しておきましょう
詳しく知りたい方はGoogleが公式で解説しておりますので参考にどうぞ。
»Google レスポンシブ ウェブ デザイン
書き方①:CSSファイルを分ける
pc用、タブレット用、スマホ用とCSSファイルを作成して画面サイズによって切り替える方法です。
- style.css
- tablet.css
- mobile.css
上記のように3つのスタイルシートを作成します。
これを下記のようにheadタグ内に記述する事で切り替えて表示させる事ができます。
HTML<link rel="stylesheet" type="text/css" href="style.css"><!-- 769px以上 --> <link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="tablet.css"><!-- 768px以下 --> <link rel="stylesheet" media="screen and (max-width: 450px)" type="text/css" href="mobile.css"><!-- 450px以下 -->
上記のように画面幅によってスタイルシートを分けて読み込みます。
メリットとデメリットがあります。
- メリット:CSSを分割するので読み込みが早い
- デメリット:要素ごとに細かくレスポンシブ対応するのが大変
1つ1つのCSSファイルが軽くなるのがメリットですが、細かく要素ごとにレスポンシブ対応させるのには不向き。
端末ごとに大きく変わるデザインなどにおすすめの書き方です。
書き方②:メディアクエリを使う(ファイル1つ)
こちらは1つのファイルのみでレスポンシブ対応させる方法です。style.cssに全ての記述をします。僕はこちらの書き方でスマホ対応させています。
メディアクエリと呼ばれているものを使用してスタイルを切り替えていきます。
書き方は下記の感じです。
CSS#sample{ width: 100%; } @media (max-width: 768px){ #sample{ width: 90%; } }
上記のコードでは幅769px以上の時はwidthが100%、幅768px以下になったらwidthを90%にするという記述。
書き方が少し癖がありますが、覚えてしまえばとても使いやすい方法です。
メリットとデメリットは下記の通り。
- メリット:要素ごとに細かく切り替えポイントを指定できる
- デメリット:1つのファイルにまとめるのでファイルサイズがデカくなる
CSSが多い場合はその分デカくなるので注意が必要です。要素ごとに細かく設定できるので、こちらの方が管理が楽なので特に気にしない方はこちらの書き方がおすすめ。
端末ごとのブレイクポイント
ブレイクポイントは制作者によって異なりますが、大体の目安は決まっております。
僕の定番のブレイクポイントを紹介します。
CSS#sample{ max-width: 1000px; } @media (max-width: 1050px){ #sample{ width: 100%; padding: 0 20px; box-sizing: border-box; } } @media (max-width: 768px){ #sample{ } } @media (max-width: 450px){ #sample{ } }
上記が僕のテンプレのブレイクポイントです。(cssはイメージなので適当です)
PCでは幅1000pxで固定して、1050px以下から徐々に切り替えています。ザックリ書くと下記の通り。
- PC:1000pxで固定
- タブレット:768px以下
- スマホ:450px以下
こんな感じです。
768px以下のスタイルで450px以下でスタイルが崩れない場合は450px以下では特に記述せずに、768px以下のみのスタイルを書く場合もあります・
このように自分なりのテンプレを作っておくと、制作の時に迷わずにコーディングできます。参考程度にどうぞ。
追記:レスポンシブ対応のコツ
pc用のスタイルを全て作った後に、sp用のスタイルを作る方がいますのが割と非効率な気がします。
僕なりのレスポンシブ対応のコツを伝授します。
1つのセクション毎にスマホ対応を作っていきます。
理由としては、cssを忘れないうちにできるので効率が良いんですよね。pc用のスタイルを作りながらsp用のデザインも考えながらスタイルを作っているので忘れないうちにその場でレスポンシブ対応してしまいます。
pc用を全部作った後ですと構造を忘れている事があって再び構成を把握するのは二度手間なのでこのようにコーディングしています。
参考にしてみて自分に合うコーディングスタイルを模索しましょう。
それではここまで。