レスポンシブ対応の手順と、Sassを使った@mediaの書き方【day69】

HTML/CSS

プログラミング独学day69の学習で、得たことや気づきを教えて!

今日は

・模写のレスポンシブ対応の手順

・Sassを使った@mediaの書き方

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています!

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

【模写】レスポンシブ対応の手順

現在、クリ★スタさん(@cresta_design)のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

模写は1ヶ月ぶり、2サイト目の挑戦なのですが、驚くほどレスポンシブ対応の手順が頭から抜けていました..

これを機に、レスポンシブ対応の手順をまとめます。

① viewport(ビューポート)の設定

まずは、viewportの設定を必ずおこないます。

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

上記のmetaタグを<head></head>間に記述します。細かい設定もできますが、通常コピペでOKです。

viewportを設定すると、
・PC
・スマホ
・タブレット
など、サイトを見る人が使う媒体によって、サイトの表示を変えることができます

 

viewportの設定がないと?
たとえば、PCで見ている画面が、スマホでも同じように表示されてしまいます。→横幅が最適ではないので、
・横スクロールが発生して見にくい
・文字が小さく、常に拡大表示しなくてはならない
など、ユーザーにとって見にくいサイトになってしまいます。

 

しかし、レスポンシブはviewportだけでは完璧ではありません。

次のブレイクポイントによる表示の切り替えが大切です。見ていきましょう。

② ブレイクポイントの設定

次に、ブレイクポイントを考えていきます。

 

ブレイクポイントとは?
PC・スマホ・タブレットなどで、表示を切り替える”横幅のポイント”のこと。

たとえば、幅を480px以下にしたときにスマホの表示に切り替えるなど。
この、480px以下..という条件がブレイクポイントです。

ブレイクポイントをそれぞれどこで設定するのか?は、明確な決まりはありません。
なぜなら、
・デザインによって見やすく表示するために最適なブレイクポイントが変わる
・スマホと言っても、iPhone Xなのか、iPhone6なのか?などによって横幅が変わる
からです。
結局、コーディングする人の設定次第となっているのが現状のようです..
わたしは今回、はにわまんさん(@haniwa008)のブレイクポイントの決め方を参考にさせていただきました。
  • PC → インナーの幅まで
  • タブレット → インナーの幅からiPad(768px)まで
  • スマホ → iPadより小さい(767px)からiPhone SE(320px)まで

    はにわまんさんのサイトより抜粋

 

今回のコーディング練習のデザインカンプは

・PC版
・スマホ版

の2つでした。

はにわまんさんの見解をお借りして..

・iPad以上→PC
・iPadより小さい767px以下→スマホ

とすることにしました。

次は、これらのブレイクポイントを使って、実際にCSSを書いていきます。

③ @mediaでメディアクエリを書いていく

いよいよ、レスポンシブ対応のCSSを書いていきます。

今回は、PCファーストでCSSを書いたので、「iPadの767pxより小さいとき」のCSSを追加しました。

@media screen and (max-width: 767px) {
  //ここにスマホ対応のCSS
}

このように@media を使って記述していきます。

 

・max-width: 767pxとは→最大767px→767px以下という意味
・min-width:  767pxとは→最小767px→767px以上という意味

max-widthやmin-widthを指定して、ブレイクポイントを設定します。

Sassで@mediaを記述する

@mediaは、CSSに
//ここからメディアクエリ
のように一箇所に全てをまとめて記述することもできます。

しかし、今回はSassでそれぞれのclassに個別で@mediaを記述していきます。

まず、以下のように変数と@mixinを使ってみました。

ブレイクポイントを変数$mbに格納。

@mediaの記述を@mixinに格納。

 

実際には、以下のように使いました。

赤文字の@includeで@mixinを呼び出します。

{ }内に、スマホのときに適用させたいCSSを書いていきます。

 

Sassで書くと、変更を加えたいclassにだけ、@include mobile{}を書いてレスポンシブ対応ができるのでとても楽でした。

Sassについてはこちら↓

 

あとがき

以前、初めての模写をしたときは、手元に何も記録しなかったため今回調べ直す必要が出てしまいました。
改めて、ブログなどでアウトプットすることの重要性を感じます。
次回は、模写のレスポンシブ対応でつまずいたところを具体的に解説しようと思います。

今回は、以上です。

 

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら