
プログラミング独学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・スマホ・タブレットなどで、表示を切り替える”横幅のポイント”のこと。
たとえば、幅を480px以下にしたときにスマホの表示に切り替えるなど。
この、480px以下..という条件がブレイクポイントです。
・スマホと言っても、iPhone Xなのか、iPhone6なのか?などによって横幅が変わる
- PC → インナーの幅まで
- タブレット → インナーの幅からiPad(768px)まで
- スマホ → iPadより小さい(767px)からiPhone SE(320px)まで
今回のコーディング練習のデザインカンプは
・PC版
・スマホ版
の2つでした。
はにわまんさんの見解をお借りして..
・iPadより小さい767px以下→スマホ
とすることにしました。
次は、これらのブレイクポイントを使って、実際にCSSを書いていきます。
③ @mediaでメディアクエリを書いていく
いよいよ、レスポンシブ対応のCSSを書いていきます。
今回は、PCファーストでCSSを書いたので、「iPadの767pxより小さいとき」のCSSを追加しました。
@media screen and (max-width: 767px) { //ここにスマホ対応のCSS }
このように@media を使って記述していきます。
・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はこちら
たとえば、PCで見ている画面が、スマホでも同じように表示されてしまいます。→横幅が最適ではないので、
・横スクロールが発生して見にくい
・文字が小さく、常に拡大表示しなくてはならない
など、ユーザーにとって見にくいサイトになってしまいます。