cssのレスポンシブ対応方法！初心者向けにわかりやすく解説
もしも、パソコン画面がそのままスマホに出てきたらとても見づらいと感じませんか？
これを解消するのがレスポンシブで、パソコンの画面をスマホやタブレット用に対応させることができます。
プログラミング初心者には、このレスポンシブ対応が難しいと感じることが多いと思います。
しかし、理解すれば簡単に使えるものなので、初心者にもわかりやすく解説していきます。
【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説
CSSのレスポンシブとは
CSSのレスポンシブとは、パソコンやスマホ、タブレットなどの画面サイズの異なるデバイスでも、ユーザーが使いやすいように対応させることです。
例えば、左のようなパソコン画面を、レスポンシブ対応していない状態でスマホで見ると、右のようになります。
パソコン画面
レスポンシブ対応されていないスマホ画面
レスポンシブ対応されていないと文字が切れてしまうなど、とても見ずらいサイトになってしまいます。
レスポンシブをすると以下のように、スマホの画面でも見やすいサイトになります。
パソコン画面
レスポンシブ対応されたスマホ
このようにスマホで訪れたユーザーには、スマホの画面サイズに合わせたページを表示させるのがレスポンシブ対応です。
スマホ画面での表示を確認する方法は後ほど紹介します。
レスポンシブ対応はJavaScriptを使ってでもできますが、ここではCSSでのレスポンシブ対応を初心者に向けて説明します。
レスポンシブする理由
レスポンシブには、サイトの見やすさとSEOの観点でメリットがあります。
ひとつづつその理由を見ていきましょう。
見やすさ
サイトを訪れるユーザーに「見やすい」「使いやすい」と思ってもらうことは重要です。
例えば、スマホ画面でパソコン画面と同じサイトを表示すると、大変見づらいものになってしまいます。
サイトを見ている人に合わせた画面のサイズで表示させることはとても大切で、レスポンシブが必要とされる理由の一つです。
実際にパソコンの画面とスマホのレスポンシブさせたものがこちらです。
左がパソコン画面のサイズに合わせたページで、右がスマホ画面に合わせたものです。
このように、画面のサイズに合わせてサイトを見やすく表示しましょう。
SEOの観点
レスポンシブをする理由はもう一つ、SEOの観点というものがあります。
SEO(検索エンジン最適化)とは、検索結果にて狙ったキーワードで自社サイトを上位表示させる対策のことです。
サイトをレスポンシブ対応させることはGoogleが推奨しているため、SEO対策に影響を及ぼします。
またサイトを見ているユーザーも画面のサイズにあったサイトでないと使いづらく、最後までサイトを見ずに離脱してしまいます。
そのようなことを避けるためにレスポンシブ対応は重要だと言えます。
この記事で紹介しているようなHTMLの技術を身につけたい方は、我々が運営するDMM WEBCAMPの中のSKILLSコースをおすすめします。
プログラミング初学者でも、プログラミングの知識を身につける事ができます。
ぜひご利用してください。
〜基礎編〜 基本的なレスポンシブ対応
ここからは、初心者のための基本的なレスポンシブ対応をわかりやすく説明していきます。
Step2, メディアクエリの設定
Step3, 値の変更
まず、メディアクエリというものを読み込む準備をviewportの設定で行います。
メディアクエリとは何か後ほど説明します。
viewportはHTMLのheadタグ内に読み込みます。
【HTML初心者入門】<head>タグとは？使い方も解説！
以下のコードを</head>の前に読み込みましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1”>width=device-widthとは、どの画面サイズであっても、それに合わせるということを示しています。
initial-scale=1.0とは、サイトが表示された時の倍率を示しています。
特別な設定がいらなければ上記のコードをコピーしてHTMLのhead内に貼り付けるだけで問題はありません。
メディアクエリとは、指定した画面のサイズの時にのみ使われるCSSの要素などを決めるものです。
具体的には、@mediaを使い、どの画面のサイズの時に、どうサイトを表示させるかを指定します。
＠mediaの使い方
@media (max-width: px / min-width: px)
{
適応させるCSS
}上記のコードの中にあるように、@mediaの次のカッコ内（ ）でどの画面のサイズの時に適応されるCSSなのか条件を指定します。
{ } 内で、CSSの指定をします。
例えば、max-width: 1000pxとすると、1000pxより小さい時にCSSが適応されます。
min-width: 1000pxとすると、1000pxより大きい時にCSSが適応されるということです。
max-widthが最大幅、min-widthが最小幅を表すと覚えましょう。
また、パソコンは1001px以上、タブレットは671px~1000px、スマホは670px以下が画面のpxです。
この値をブレイクポイントといいます。
レスポンシブの時の要素の値は％で示しましょう。
例えば、ボックス要素の横幅や余白などです。
レスポンシブによって画面のサイズが変わった時、pxのまま値を固定していると画面の大きさに対応しないからです。
それを防ぐために、値を％に直しどのデバイスでも正常に要素を表示できるようにしましょう。
「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ！
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
受講生の97%が未経験からのスタート！
一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！
分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能！
＼初学者にはSKILLSコースがおすすめ!!／
〜応用編〜 ボックス要素のレスポンシブ対応
表のようなボックス要素だけがレスポンシブ出来ずにレイアウトが崩れてしまうことはありませんか？
ボックス要素のレスポンシブが出来ずにつまずく人が多いです。
いくつかレスポンシブをする方法はありますが、ここでは簡単なボックス要素のレスポンシブ方法をわかりやすく説明していきます。
box-sizing: border-box; で簡単にレスポンシブ
box-sizing: border-box; を使うことで、ボックス要素のpaddingとborderをwidthとheightに含んでいます。
つまり、box-sizing: border-box; を使い、widthやmarginの値を％で指定することによって、画面のサイズにあったボックス要素になります。
*{
box-sizing: border-box;
width: 70%;
margin-left: 15%;
margin-right: 15%;
}widthとmarginの合計を100%にすることで、レスポンシブした時にレイアウトの崩れを防止出来ます。
ここでは全体のwidthを70%＋15%＋15%で合計100%にしています。
表などのボックス要素は、box-sizing: border-box; を使いレスポンシブをしましょう。
コピペして簡単にレスポンシブ
画像と文章の要素をレスポンシブさせる例をサンプルコードで紹介します。
以下のコードをコピペして、自分のレスポンシブさせたい要素に置き換えて見てください。
また、画像の横幅や高さ等は自分に合ったものに調整してください。
背景画像の上に乗った文章のレスポンシブ方法の例
以下は、パソコン画面をスマホへレスポンシブさせた例です。
パソコンの画面では画像が左で、文章が右です。
しかし、スマホの画面では画像が上に表示され、その下に文章が来るようにレスポンシブされています。
パソコン画面
スマホ画面
HTMLのサンプルコードが以下のものです。
画像を読み込むタグである、<img src=” ” alt=”” class=”main-image”>には、自分の読み込みたい画像を設定しましょう。
HTMLで画像を挿入する方法！属性の使い方や違いについてもご紹介
<div class="main">
<img src="画像のURL" alt="" class="main-image">
<p class="main-text">
文章
</p>
</div>src=” “には、src=”http://…”というように、画像のURLを入れます。
alt=” “には、簡単にいうと画像の名前を入れます。
これには、入れないといけないという義務はないので、空欄のまま残しておいても構いません。
必要があったら入れましょう。
次にCSSのサンプルコードです。
.main {
width: 100%
}
.main-text {
float: left;
}これがパソコン画面のサンプルコードになります。
横幅を表すwidthを100％にしており、画像と文章を横に並べるため、float: leftを使っています。
【CSSのfloatを完全マスター】初心者でも分かる入門講座
.main {
width: 100%
}
.main-image {
width: 100%
max-width: 100%
height: auto;
}次にスマホ画面のサンプルコードです。
レスポンシブでどの画面のサイズにも合うように、横幅や画像を%で表しています。
これによってレイアウトの崩れを防止することができます。
文章の上に来る画像の高さがautoになっているため、必要があれば数値を変更してください。
スマホ画面の確認方法
スマホやタブレットでちゃんとレスポンシブ対応されているか確認したいことはありませんか？
パソコンのショートカットキーを使えば簡単にスマホやタブレット画面を確認することが出来ます。
Macを使っている方は、command＋shift＋C
Windowsを使っている方は、Ctrl＋Sift＋I
でこのようなHTMLやCSSのソースコードを表示させることができます。
①スマホマークをクリック
②Responsiveをクリックし、確認したいデバイスを選択
左から二番目のスマホマークをクリックすると、画面左半分の上部にResponsiveという文字がバーに現れます。
ここで確認したい画面サイズの選択をすることでスマホ画面が現れ、簡単にレスポンシブ対応されているか確認できます。
CSS言語を使いこなしたいならDMM WEBCAMP！
Webサイトのレイアウトを大きく左右するCSSでのレスポンシブ対策について説明しました。
パソコン画面を他のあらゆるデバイスの画面でも使いやすく表示させることは、サイトを作る上でとても重要です。
レスポンシブ対応をしっかりとし、サイトを訪れる全てのユーザーが使いやすいものを作りましょう。
この記事を読んでいる方で、本気でプログラミング学習をしたい方はぜひDMM WEBCAMPのSKILLSコースへの入会を考えてみてください！
