勉強の続き：レスポンシブwebデザインに対応させる

ついにレスポンシブに入りました！
今日勉強したのは以下。

セクション1 マルチデバイス対応の基本
　レスポンシブウェブデザインとは？
セクション2 レスポンシブウェブデザイン対応の準備をしよう
　作業ファイルを確認しよう
　ビューポートの指定をしよう
　ブレイクポイントを決めよう
　メディアクエリを書こう
　モバイルデバイスでの見え方を確認しよう
　マルチデバイス対応の流れ
セクション3 パーツを画面内に収めよう
　カラム数の調整をしよう
　固定幅を可変幅にしよう
　パーツの位置・大きさを調整しよう
セクション4 パーツの表示を調整しよう
　ヘッダーの表示を調整しよう
　msgセクションの表示を調整しよう
　dateセクションの表示を調整しよう
セクション5 画像を高解像度ディスプレイに対応させよう

教科書はこれです↓

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内直人 ]
価格：2,420円（税込、送料無料) (2024/11/3時点)

楽天で購入

レスポンシブウェブデザインというのは、PCの画面で見てもタブレットの画面で見てもスマホの画面で見ても、問題なく表示できるデザイン、ということですね。

Fammの時は確か、大きいサイズ（モニタ）、中くらいのサイズ（タブレット）、小さいサイズ（スマホ）でのサイズに対応させていましたが、この本ではPCサイズと、スマホサイズの二つを設定。

メディアクエリの命令文↓（640px以下の画面で見るときに以下のcssを適用する）
@media screen and (max-width:640px) {cssをここに書く}

『cssをここに書く』の部分に、以下のものを書いていきます。
多分本のを丸写ししてはいけないと思うので要素だけ…

PCでは2カラムのデザインですが、スマホで見たときに2カラムだと見づらいため1カラムにする
具体的には、display:flex;を、display: block; に書き換える。
固定幅を可変幅にする
PC用でwidthをpxでしていたので、そこを width: 100%; にする。
パーツの位置・大きさを調整
transformプロパティ！！
パーツの表示を調整
メインビジュアルのサイズをビューポートに合わせて調整する
ヘッダー・本文を調整

ビューポートというのは、今画面に写っている部分のこと。
vhは、ビューポートの高さを指定する単位。100vhで画面の高さと同じになる。
vwが画面の横幅を基準にする単位。100vwが画面幅と同じになる。

ここでは、スマホ用メインビジュアルの高さを、height: 90vh; と指定しています。画面の高さの90パーセントのサイズで表示してね、ということですね。

スマホにもいろんな画面サイズがありますから、画面サイズを基準に大きさを決めるのは理にかなっていますねー。なるほど。

ここまでやってきてやっとわかってきたのですが、コーディングする前の、デザインカンプからさまざまな情報を抽出する過程って、めちゃくちゃ大事なんですね…。それをリストアップする作業って、どうやって訓練したらいいのかな。やっぱりLPデザイントレースをやってみないといけないのかしら。

それと、この章の最後に、「画像を高解像度ディスプレイに対応させよう」というセクションがありました。拡大しても粗くならないベクター形式の「SVG画像」を使用するやり方と、高解像度ディスプレイ用の大きい画像を用意して表示を切り替えるやり方の2種類があるんですって。本では表示を切り替えるやり方の方を教えてもらいましたが、SVG画像については何も書いてなかった（探せなかった）ので自分で調べてみました！