【レスポンシブWEBデザイン】 FirE♯173

S.A.P.Studio

2021年9月20日 17:41

スマホでインターネットを利用するシーンが増えています。このような状況から、WEBデザインをする際には、レスポンシブ対応が不可欠となっています。

「レスポンシブデザインの作り方は？」

「どんなレイアウトにすればいいの？」

「やってみたけど、レイアウトが崩れる」

こんな悩みが出てきて、もう泣きそう。

そんなあなたにレスポンシブWEBデザインの考え方から、実装方法までをまとめます！

【レスポンシブWEBデザインってなに？】

レスポンシブWEBデザイン：ユーザーの使用デバイスに応じて、WEBサイトのレイアウトを切り替えるデザイン

スマホ、タブレット、PCでは、画面のサイズが違いますね。レスポンシブ対応がされているWEBサイトでは、それぞれの画面サイズに応じてレイアウトが変化し、より見やすい表示になります。

＜レスポンシブWEBデザインの考え方＞

１つのHTMLを、画面サイズという条件に応じて、適応させるCSSを追加することで、レイアウトを可変する。

スマホ・タブレット・PCの画面のサイズの違いをブラウザが認識してそれぞれのサイズに適応したCSSをさせることで、表示を切り替えています。

必要なファイルは、

共通のHTML・共通のCSSです。

この共通のCSSの中に、

タブレット画面サイズ用の追加CSS・PC画面サイズ用の追加CSS

を、書き込んでいきます。

＜レスポンシブWEBデザインの手順＞

①　viewportを設定する

②　基準となるCSSを書く

③　メディアクエリを使い、条件（ブレイクポイント）を設定する

④　レイアウト・デザインを変える箇所のCSSを書く

① viewport

<head>

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

</head>

このコードを<haed></head>タグ内に書くことで、

content="width=device-width,initial-scale=1"　となる。

つまり、

content（コンテンツ）の、width（幅）はdevice-width（端末の幅）と同じにするという意味です。

initial-scale=1　とは、initial（初期の）scale（倍率）は１という意味です。

これは、このままでオッケー！

②　基準となるCSSを書く

基準はこの２つがあります。

モバイルファースト：スマホ用のHTML・CSSを先に書き、その後に、タブレット、PC用のCSSを書く方法。

PCファースト　：PC用のHTML・CSSを先に書き、その後に、タブレット、スマホ用のCSSを書く方法。

近年では、スマホで閲覧が増えていますので、モバイルファーストの意見が優勢です。

スマホの画面の幅を意識した、縦長のレイアウトが基本となります。

③　メディアクエリを使い、条件（ブレイクポイント）を設定する

メディアクエリ：ページが現在表示されているデバイスの画面のサイズを取得し、「デバイスの画面サイズの幅がこれ以上ならこのスタイルを適用」というように、１つのスタイルシートで複数の画面環境に対応することができる。

モバイルファーストの場合はこのように書きます。


//全デバイス共通のCSS（スマホ向け）

body{background-color:red;}
h1{font-size:20px;}


//幅768px以上に適用されるCSS（タブレットサイズ以上）

@media screen and (min-width:768px){
body{background-color:blue;}
}


//幅990px以上に適用されるCSS（PCサイズ以上）

@media screen and (min-width:990px){
body{background-color:green;}
}

タブレット用と、PC用のCSSには、

「@media screen and (min-width: ○○px)」というコードがあります。これがメディアクエリです。

この意味は、「デバイスの画面サイズが、min-width:○○px の場合」という条件を示しています。

min-width: ○○px　とは、最小の幅が○○pxという意味です。

まとめると、

「最小の幅が○○pxの場合には、{　 }内のCSSを適応する」

という意味です。

さらに、わかりやすく訳すと、

「画面サイズが、○○px以上の時は、{ }のCSSを適用する」

ということですね！！

この〇〇pxと設定する価のことをブレイクポイントと呼びます

ブレイクポイント　：　メディアクエリで設定する、レイアウトが可変する幅の数値のこと。「○○以上」と設定する場合は、「min-width」を使う。

④　レイアウト・デザインを変える箇所のCSSを書く

//全デバイス共通のCSS（スマホ向け）       ・・・・・・・・A

body{background-color:red;}　　　　　　　　
h1{font-size:20px;}


//幅768px以上に適用されるCSS（タブレットサイズ以上）    ・・・・・・・・・B

@media screen and (min-width:768px){
body{background-color:blue;}
}


//幅990px以上に適用されるCSS（PCサイズ以上）      ・・・・・・・・・C

@media screen and (min-width:990px){
body{background-color:green;}
}

<point> タブレット向け、PC向けで、レイアウトを変えたい箇所のみCSSを追加する

上記のコードの場合、基本となるスマホ向けのCSSでbackground-colorがredになっているので、背景は赤いデザインになります。

そして、画面の幅が768px以上になった時のタブレット用のCSSでは、background-colorがblueに指定されているので、背景は青になります。

しかし、スマホ向けCSSで指定している、h1のfont-sizeについては、タブレット用CSSには、何も記述がないので、h1のfont-sizeはスマホ用で指定した20pxがタブレット用でもそのまま効きます。

このように、必要なところだけを、書き足すことで、レイアウトや、デザインを調整してきます。

【レスポンシブWEBデザインのレイアウト】

こちらにレスポンシブWEBデザインが載っていますので見てみてください。

特徴はこのようになります。

スマホ用レイアウト：縦長のレイアウト。横幅が狭いので、画像は縦に並べていく方が、ユーザーが見やすい。センターに要素を集めてレイアウトする。テキストのサイズも、スマホで読みやすいサイズを設定する。スワイプ、タップという動作での使用になるので、ボタンなどをタップしやすいようなサイズに設定しておく必要がある。ナビメニュはハンバーガーメニューが使用されることが多い。

タブレット用レイアウト：スマホよりも横幅が広くなるので、画像を横並びのレイアウトにしても見やすいため、デザインは、PCでの表示とほぼ同じで問題ない。操作は、スマホと同じく、スワイプ、タップのため、UI、UXの観点からの調整が必要。

PC用レイアウト：タブレット用のレイアウトをさらに横幅を広くとったデザインとなる場合が多い。横幅が広く使用できるので、ブランドロゴを左端に、ナビメニュを右端になどのレイアウトが多い。

＜画面サイズに応じてコードを追加してレイアウトを変える＞

モバイルファーストでコーディングを進める場合は、スマホ用CSSで縦に並べた、要素を、PC用のCSSでは、横に並べるようにコードを追加する必要があります。

こちらのコードを見てください。

HTML

<div class="main-content" >

    <img src="image01.png" alt="画像１">
    <img src="image02.png" alt="画像2">
    <img src="image03.png" alt="画像３">
    
</div>

CSS



//全デバイス共通のCSS（スマホ向け）       
.main-content{
    img{
        display:block;　　　　　　　　・・・・・・・・・①
    }　
 }


//幅768px以上に適用されるCSS（タブレットサイズ以上）    
@media screen and (min-width:768px){

.main-content{
    img{
        display:none;　　　　　　・・・・・・・・・②
    }
 }


//幅990px以上に適用されるCSS（PCサイズ以上）      
@media screen and (min-width:990px){

.main-content{
    img{
        display:flex;　　　　・・・・・・・・・・③
    }　
 }

image01、image02、image03をいう画像ファイルをHTMLで設置しています。スマホ用のCSSでは、①のように「display: block」が指定されているので、画像はは、ブロック要素になり、縦並びに表示されます。

タブレット用のCSSでは、②のように「display:none」としてしました。この場合は、image01、image02、image03の表示は消えます。各画面サイズに応じて、不要な要素がある場合には、「display:none」で要素を消すことで、レイアウトを変更します。

PC用のCSSでは、③のように、「display:flex」を指定いるので、画像は横並びになります。横並びにする方法は様々ありますが、「display:flex」は便利なので、覚えておきましょう。

各画面サイズに応じて、コードを追加するとは、このような作業になります。

＜ハンバーガーメニュー＞

スマホでWEBサイトを見たときに右上あたりにある三本線のこいつです！

ハンバーガーメニュー：主にスマートフォンやタブレット端末に対応したナビゲーションメニューのデザイン。横線3本線がハンバーガーに似ていることから名付けられた。

この三本線をハンバーガーメニューと名付けるセンス最高すね。

なぜ、スマホでは、ハンバーガーメニューを採用することが多いのがポイントです。

スマホの横幅が答えです。ナビゲーションメニュを横に並べると、スマホの横幅では、当然収まりません。

なので、ハンバーガーメニューにナビゲーションの内容を格納しておき、ユーザーが必要な時のみ表示させることで、スマホサイトでの、UI、UXを高めているわけです。

【まとめ】

レスポンシブWEBデザインの概要をまとめます。

レスポンシブWEBデザイン：デバイスの画面サイズに応じて、WEBサイトのレイアウトを切り替えるデザイン。

レスポンシブWEBデザインの手順　：　　　　　　　　　　　　　　　　　　　　①　viewportを設定する　　　　　　　　　　　　　　　　　　　　　　　　　　　　　②　基準となるCSSを書く　　　　　　　　　　　　　　　　　　　　　　　　　　　　③　メディアクエリを使い、条件（ブレイクポイント）を設定する　　　　　　　　　　　　　　　　　④　レイアウト・デザインを変える箇所のCSSを書く

モバイルファースト：スマホ用のHTML・CSSを先に書き、その後に、タブレット、PC用のCSSを書く方法。

スマホ用レイアウト：　縦長のレイアウトが基本。センターに要素を集めてレイアウトする。スワイプ、タップという操作を想定した、UI、UXが必要となる。

タブレット用レイアウト：スマホと、PC中間のサイズ。デザインは、PCでの表示とほぼ同じで問題ない。操作はスワイプ、タップのため、UI、UXの観点からの調整が必要。

PC用レイアウト：横幅を広くとったレイアウトが可能。ロゴの位置、ナビゲーションの位置を左右に分ける、サイドバーを設置するなど、画面を横に分割するようなデザインも可能となる。

レスポンシブWEBデザインの考え方の基本は、ユーザーがどんなデバイスでアクセスしても、使いやすいデザインであることを目指すということです。

そういった面を意識して、WEBサイトを見てみましょう。デザイナーさんの工夫や、考えが見えてくるかもしれません！今日紹介したレスポンシブWEBデザインという概念を知っているだけで、今までとは違う視点が加わったということす。　

また、一歩前進しましたね！

この調子で、どんどん「知っている」を増やしていき、「できる」にかえていきましょう！

この記事が気に入ったらサポートをしてみませんか？