レスポンシブは難しくない!CSS初心者のためにわかりやすく解説 | WEBCAMP NAVI
【8月枠も残りわずか】転職保証コース

レスポンシブは難しくない!CSS初心者のためにわかりやすく解説

もしも、パソコン画面がそのままスマホに出てきたらとても見づらいと感じませんか?

これを解消するのがレスポンシブで、パソコンの画面をスマホやタブレット用に対応させることができます。

プログラミング初心者には、このレスポンシブ対応が難しいと感じることが多いと思います。

しかし、理解すれば簡単に使えるものなので、初心者にもわかりやすく解説していきます。

CSSのレスポンシブとは

CSSのレスポンシブとは、パソコンやスマホ、タブレットなどの画面サイズの異なるデバイスでも、ユーザーが使いやすいように対応させることです。

例えば、左のようなパソコン画面を、レスポンシブ対応していない状態でスマホで見ると、右のようになります。


パソコン画面


レスポンシブ対応されていないスマホ画面

レスポンシブ対応されていないと文字が切れてしまうなど、とても見ずらいサイトになってしまいます。

レスポンシブをすると以下のように、スマホの画面でも見やすいサイトになります。


パソコン画面


レスポンシブ対応されたスマホ

このようにスマホで訪れたユーザーには、スマホの画面サイズに合わせたページを表示させるのがレスポンシブ対応です。

スマホ画面での表示を確認する方法は後ほど紹介します。

レスポンシブ対応はJavaScriptを使ってでもできますが、ここではCSSでのレスポンシブ対応を初心者に向けて説明します。

レスポンシブする理由

レスポンシブには、サイトの見やすさとSEOの観点でメリットがあります。

ひとつづつその理由を見ていきましょう。

見やすさ

サイトを訪れるユーザーに「見やすい」「使いやすい」と思ってもらうことは重要です。

例えば、スマホ画面でパソコン画面と同じサイトを表示すると、大変見づらいものになってしまいます。

サイトを見ている人に合わせた画面のサイズで表示させることはとても大切で、レスポンシブが必要とされる理由の一つです。

実際にパソコンの画面とスマホのレスポンシブさせたものがこちらです。

左がパソコン画面のサイズに合わせたページで、右がスマホ画面に合わせたものです。
このように、画面のサイズに合わせてサイトを見やすく表示しましょう。

SEOの観点

レスポンシブをする理由はもう一つ、SEOの観点というものがあります。
SEO(検索エンジン最適化)とは、検索結果にて狙ったキーワードで自社サイトを上位表示させる対策のことです。

サイトをレスポンシブ対応させることはGoogleが推奨しているため、SEO対策に影響を及ぼします。

またサイトを見ているユーザーも画面のサイズにあったサイトでないと使いづらく、最後までサイトを見ずに離脱してしまいます。

そのようなことを避けるためにレスポンシブ対応は重要だと言えます。

〜基礎編〜 基本的なレスポンシブ対応

ここからは、初心者のための基本的なレスポンシブ対応をわかりやすく説明していきます。

Step1, viewportの設定
Step2, メディアクエリの設定
Step3, 値の変更
Srep.1
viewportの設定

まず、メディアクエリというものを読み込む準備をviewportの設定で行います。
メディアクエリとは何か後ほど説明します。

viewportはHTMLのheadタグ内に読み込みます。

以下のコードを</head>の前に読み込みましょう。

HTML
 <meta name=”viewport” content=”width=device-width, initial-scale=1”>

width=device-widthとは、どの画面サイズであっても、それに合わせるということを示しています。
initial-scale=1.0とは、サイトが表示された時の倍率を示しています。
特別な設定がいらなければ上記のコードをコピーしてHTMLのhead内に貼り付けるだけで問題はありません。

Step.2
メディアクエリの設定

メディアクエリとは、指定した画面のサイズの時にのみ使われるCSSの要素などを決めるものです。

具体的には、@mediaを使い、どの画面のサイズの時に、どうサイトを表示させるかを指定します。

@mediaの使い方

CSS
@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です。
この値をブレイクポイントといいます。

Step.3
値の変更

レスポンシブの時の要素の値は%で示しましょう。
例えば、ボックス要素の横幅や余白などです。

レスポンシブによって画面のサイズが変わった時、pxのまま値を固定していると画面の大きさに対応しないからです。
それを防ぐために、値を%に直しどのデバイスでも正常に要素を表示できるようにしましょう。

レスポンシブ完了
 

〜応用編〜 ボックス要素のレスポンシブ対応

表のようなボックス要素だけがレスポンシブ出来ずにレイアウトが崩れてしまうことはありませんか?

ボックス要素のレスポンシブが出来ずにつまずく人が多いです。

いくつかレスポンシブをする方法はありますが、ここでは簡単なボックス要素のレスポンシブ方法をわかりやすく説明していきます。

box-sizing: border-box; で簡単にレスポンシブ

box-sizing: border-box; を使うことで、ボックス要素のpaddingとborderをwidthとheightに含んでいます。
つまり、box-sizing: border-box; を使い、widthやmarginの値を%で指定することによって、画面のサイズにあったボックス要素になります。

CSS
*{
  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のサンプルコードです。

CSS
.main {
  width: 100%
}

.main-text {
  float: left;
}

これがパソコン画面のサンプルコードになります。

横幅を表すwidthを100%にしており、画像と文章を横に並べるため、float: leftを使っています。

 

CSS
.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がおすすめ!

DMM WEBCAMPは1からプログラミングを学び、エンジニアへの転職を目指す、転職型プログラミングスクールです。
受講生の95%以上はプログラミング未経験。
未経験からエンジニアを目指す方を全力でサポートしています。
プログラミング未経験でも安心して学習できるカリキュラムや環境、各種サポートがあり、転職成功率は業界最高水準の98%となっています。(2019年4月時点)
万が一転職できなかった場合は、全額返金いたします。
また、「転職コース専門技術講座」は条件を満たすことで支払った教育訓練経費の最大70%(560,000円)が教育訓練給付金として支給されます。
DMM WEBCAMPは、充実したキャリアサポートを行っているのも特徴です。
専属のキャリアアドバイザーが自己分析や履歴書、職務経歴書の添削、面接対策など転職が成功するまで一気通貫でサポートしていきます。

CSSに限らず、様々なプログラミング言語を使いこなし、自由自在にプログラミングが出来るようになりませんか?

転職成功率98%
DMM WEBCAMPの詳細をみる
※最短1分で申し込み可能

まとめ

Webサイトのレイアウトを大きく左右するCSSでのレスポンシブ対策について説明しました。

パソコン画面を他のあらゆるデバイスの画面でも使いやすく表示させることは、サイトを作る上でとても重要です。

レスポンシブ対応をしっかりとし、サイトを訪れる全てのユーザーが使いやすいものを作りましょう。

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点