【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【7日目】
Chapter 10 マルチデバイス対応ページを制作する
2月11日(月) 0.5h
HTMLタグ
・content属性 - initial-scale
...初期のズーム倍率を指定するプロパティ。
レスポンシブデザインでは拡大縮小は不要なので、値は「1」とする。
※Visual Studio CodeではデフォルトのHTMLコードに記述されている。
・メディアクエリをlink要素に記述する
...ブレイクポイントごとに別々のCSSファイルを読み込ませる方法。
書式 :
<link href="css/sp.css" rel="stylesheet" media="screen and (max-width:600px)">
画面の幅が600pxより小さい場合(メディアクエリ)、sp.cssが適用される。
※今回はこの方法は使用せず、CSSに直接記述。
CSSプロパティ
・Webブラウザ単位「vw」
...Webブラウザ全体の横幅を「100vw」と表す。
%は親要素の横幅に対する割合、vwはWebブラウザの幅に対する割合であり、
親要素の影響の有無に違いがある。
ポイント
・正しいブレイクポイント値は?
...絶対に正しい値はない。時代によって主流の端末が変化するため。
成果物
まとめと感想
今回は、1ページのレスポンシブ対応を学習。
基本は前の本で学習済み、+αが少しという感じの内容でした。
今回はPortfolioページのみ対応させたので、
他ページにも
・フォントサイズ表記を単位「vw」での表記に書き換える
・背景画像をスマートフォン用に用意したものに変更する
などの対応が必要そうですね。
想像で、チョロチョロ〜と見た目を整える事は出来ると思ったのですが、
本来は「スマートフォン版でどこに何を配置するか」が決まってないといけないですよね?
つまり、厳密にはサイト全体のスマートフォン版・デザインカンプ作成からがスタートなのでは?
これはPhotoshopの学習にも繋げられるけど、今はコーディング部分の練習を先にしたい...
う〜む...
と、迷える子羊に救いの光が。
オリジナル制作のデザインカンプ(PC版・スマートフォン版のpsdファイル)を
いただくことができました...!!!!
Twitterで素敵なWebデザインカンプがふと目に入り、
そこに、配布可能のお話が。
女神様って実在するんですね... (本当にありがとうございます!!)
これでコーディング模写の前に、
デザインのある状態から純粋にコードにおこす練習ができます...!
そして、「今後やろうとしていた事」が頭の中でスッキリ整理されました。
今後の方針は、別記事でまとめたいと思います!