ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

CSSでメディアクエリ(@media)を使ってレスポンシブ(スマホ対応)にする方法

CSS
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回はCSSを用いてレスポンシブデザイン(スマホ対応デザイン)を作る方法についてご紹介します!

現代ではモバイルファーストの時代でwebサイトを作る際にはスマホデザインが必須となり、さらにスマホデバイスもiPhone、Android、タブレットなど様々なデバイスがあるのでそのデバイス毎にデザインをしなくてはならない場合もあります。

今回の記事ではレスポンシブ デザインとな何なのか、CSSのメディアクエリを使ってスマホ対応のスタイルを適用させる方法を初心者向けに解説します!

またブレイクポイント(後ほど解説)はどのピクセル数が最も良いのかについても解説します!

こんな方にオススメ
  • スマホ対応(レスポンシブ デザイン)のやり方が分からない初心者の方
  • ブレイクポイントをどのピクセルにすれば良いか分からない方
  • CSSを使ってレスポンシブ デザインを実装したい方
Hiko
Hiko

この記事でCSSのレスポンシブ がマスターできるように詳しく解説します!

スポンサーリンク

レスポンシブデザインとは何か?

レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。

Wikipedia

レスポンシブウェブデザイン(=レスポンシブデザインは)簡単に言うと、

  • スマホ→スマホ用にデザインを適用
  • PC→PC用にデザインを適用

このようにデバイスや画面幅によってデザインを変える手法の事を言います。

今ご覧になっているブログを例にすると、PCとスマホでの見え方は全然違うかと思います。

これがレスポンシブデザインです!

CSSでレスポンシブデザインを実装すると、この画面幅以上ならこのスタイルを、この300px〜700pxの間の画面ではこのスタイルを適用してね!のようにpx単位で実装できるので自分の思うように自由自在にスタイリングができます!

ネコ君
ネコ君

僕はまだHTML.CSSの初心者だからPCサイズのスタイリングしかしてなかったから、スマホで見たときグチャグチャなwebページになってた。。。

ブレイクポイントのpx数はどれがベスト?

ブレイクポイントとは

ブレイクポイントとは簡単に言うと、デザインが切り替わる画面幅の事を言います。

例えばブレイクポイントを768pxに指定すると、768px以上はPCのスタイル、768px以下の場合はスマホのようにスタイルをそれぞれ適用させることができます!

ネコ君
ネコ君

でもタブレットのデバイス幅は1024pxぐらいだから、それに合わせてブレイクポイントを新たに指定しないといけないのでは?

Hiko
Hiko

そうなんです!世の中には様々な画面幅のデバイスがあるので、それに適したブレイクポイントを指定する必要があります。しかし何種類もあるデバイス毎にブレイクポイントを指定してはキリがないのでオススメでブレイクポイントをご紹介します!

デバイス画面幅(px)
Galaxy S5360px
Pixel 2411px
iPhone 6/7/8375px
iPhone 6/7/8 Plus414px
iPhone X375px
iPad768px
iPad Pro1024px

主に使用されている(Googleに推奨されている)画面幅を表にしました。

この画面幅はGoogle Chromeの検証ツールで確認できるものです!

ブレイクポイントについてはネット上でざまざまな意見が挙げられていますが、最も多い意見が768pxを起点のブレイクポイントです!

初心者の方はmax-width:768px(〜768pxまで)をブレイクポイントにレスポンシブデザインを作ってみると良いでしょう!

仕事の現場になってくると、max-width:480px(〜480pxまで)、max-width:768px(〜768pxまで)、max-width:1024px(〜1024pxまで)のように3つのブレイクポイントを実装する場合があります!

Hiko
Hiko

レスポンシブデザインの学習途中の方はmax-width:768px(〜768pxまで)この1つでOKです!

スポンサーリンク

CSSでレスポンシブデザインを実装する方法

レスポンシブデザインを実装するにはPHP、Javascript、CSSなど様々な方法がありますが、初心者のかたが最も簡単なのはCSSで実装する方法です!

1.HTMLのheadタグにviewportを書く

まず始めにレスポンシブデザインを適用させるためにHTMLのheadタグにある物を書かなければなりません。

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

<head></head>の間にこのように記述します。

metaタグを使いnameをviewportとします。

そしてcontentの中にwidth=device-width、initial-scale=1.0と書くのですが詳しく解説します!

width=device-widthの意味

width=device-widthとはざっくり言うと、指定するwidthの幅に対応してね!と言う意味になります。もしwidth=300pxとすると、画面幅が300pxと認識され、記述したスタイルが300px幅の時良い感じになります。

今回はデバイス幅によって柔軟に対応したいのでwidth=device-widthと記述します。

initial-scale=1.0の意味

initial-scale=1.0は倍率を意味します。1.0と記述すればそのままの倍率で、2.0と書けば2倍で表示されると言うことです。

2.CSSファイルにメディアクエリ(@media)を書く

次にCSSファイルにメディアクエリと呼ばれる「この画面幅以下の場合はこのスタイルを適用してね!」の意味をもつ記述をしていきます。

レスポンシブ化する前にPC用のスタイリングは終わらせておきましょう!

例えばスマホ対応させたい場合でブレイクポイントを768pxとします。

768px以上のスタイはもうできているかと思いますが、メディアクエリを使用し〜768px以下の画面幅の時に適用させたいCSSを新たに書きます。

@media screen and (max-width:768px) {
/*スマホ用のcssを記述*/
}

このように書き{ }の中に適用させたいCSSをどんどん書いていきます。

例えばPCでは背景色を白にしているが、スマホでは赤にしたい場合は、、、

body{
 background:white;
}
@media screen and (max-width:768px) {
 body{
  background:red;
 }
}

このように書けば良いですね!

3.その他の書き方

@media screen and (min-width:1024px) {
/*1024px以下の画面幅の時のcssを記述*/
}
@media only screen and (min-width:340px) and (max-width:1024px) {
/*t340px〜1024pxの画面幅の時のcssを記述*/
}

このようにメディアクエリはいくつでも指定できます!

CSSでレスポンシブ化まとめ

ネコ君
ネコ君

headタグにviewportを書くのとCSSにmediaを書くのを覚えとかないとね!

web制作をする際には必ず必要になってくるので、なんども練習していつでも使えるようにしておきましょう!

フリーランスを目指す方でもレスポンシブ化の案件が結構需要が高いので、できておくと良いですね!

最後までご覧いただき有難うございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
CSS
HikoPro Blog

コメント

タイトルとURLをコピーしました