Miki's Blog

フロントエンジニアに、俺はなる!

【書籍学習ログ】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」と表す。
 %親要素の横幅に対する割合vwWebブラウザの幅に対する割合であり、
 親要素の影響の有無に違いがある。

ポイント

正しいブレイクポイント値は?
 ...絶対に正しい値はない。時代によって主流の端末が変化するため。

成果物

Portfolioページ画像(レスポンシブ対応)
Portfolioページ(レスポンシブ対応)

まとめと感想

今回は、1ページのレスポンシブ対応を学習。
基本は前の本で学習済み、+αが少しという感じの内容でした。

今回はPortfolioページのみ対応させたので、

他ページにも
・フォントサイズ表記を単位「vw」での表記に書き換える
・背景画像をスマートフォン用に用意したものに変更する

などの対応が必要そうですね。

想像で、チョロチョロ〜と見た目を整える事は出来ると思ったのですが、
本来は「スマートフォン版でどこに何を配置するか」が決まってないといけないですよね?
つまり、厳密にはサイト全体のスマートフォン版・デザインカンプ作成からがスタートなのでは?

これはPhotoshopの学習にも繋げられるけど、今はコーディング部分の練習を先にしたい...

う〜む...

と、迷える子羊に救いの光が。


オリジナル制作のデザインカンプ(PC版・スマートフォン版のpsdファイル)を
いただくことができました...!!!!

Twitterで素敵なWebデザインカンプがふと目に入り、
そこに、配布可能のお話が。
女神様って実在するんですね... (本当にありがとうございます!!)

これでコーディング模写の前に、
デザインのある状態から純粋にコードにおこす練習ができます...!

そして、「今後やろうとしていた事」が頭の中でスッキリ整理されました。
今後の方針は、別記事でまとめたいと思います!