プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【簡単】レスポンシブ対応させるCSSの書き方を解説【2通りあります】

  • レスポンシブ対応の方法がわからない。
  • どうやって書けばいいんだろう。
  • サクッと知りたいな・・・!

こんな悩みをもっている方向け。

本記事では、コーディング初心者の方向けにレスポンシブ対応させるCSSの書き方ををサクッと解説していきます。現在のWEB制作ではレスポンシブ対応は必須レベルですので頭に叩き込んどきましょう。

僕について

新卒でWEB制作会社に入社し、現在はフリーランスとして活動していきます。コーディング経験は3年ほどです。

レスポンシブ対応させるCSSの書き方を解説【2通りあります】

サクッと解説していきます。

レスポンシブ対応とは?

WEBサイトをスマホで最適に表示させるための方法です。スマホ対応とも呼ばれます。

現在はWEBサイトへの流入のほとんどはスマホからなんですよね。このサイトの8割以上がスマホからの流入です。

WEBサイトのジャンルにもよりますが、スマホからの流入が大きくなってきておりますので、WEBサイトのレスポンシブ対応は必須になってきております。

SEO対策にもなる

WEBサイトをレスポンシブ対応させる事でSEO対策にもなります。

Googleの検索エンジンではレスポンシブ対応されているサイトの方がSEOに有利とされています。

Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。
Google レスポンシブ ウェブ デザイン

上記はGoogleの公式の開発者向けのガイドから引用しました。

レスポンシブデザインにする事でコンテンツの質が上がると明言しておりますのでスマホ対応は必須です。

Google神が言う事は絶対です。従いましょう。

まずviewportを設定する必要があります

レスポンシブ対応させるには、まずはheadタグ内にviewportという言われるmetaタグを記述する必要があります。

こちらはコードが決まっておりますのでコピペで大丈夫です。

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

こちらはブラウザに使用している端末の幅を知らせるための記述になります。

上記のコード以外は記述する事はないので深く理解する必要はないです。サイト制作をするときに必須のコードであると理解しておきましょう

詳しく知りたい方はGoogleが公式で解説しておりますので参考にどうぞ。

»Google レスポンシブ ウェブ デザイン

レスポンシブ対応のCSSの書き方を解説

書き方は2通りあります。

  • 書き方①:CSSファイルを分ける
  • 書き方②:メディアクエリを使う(ファイル1つ)

順番に解説していきます。

書き方①: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用を全部作った後ですと構造を忘れている事があって再び構成を把握するのは二度手間なのでこのようにコーディングしています。

参考にしてみて自分に合うコーディングスタイルを模索しましょう

それではここまで。