WEBページでスマホは幅全体でPCは最適幅で

おはようございます! 会社のWEBサイト刷新中のBenです。今日、1支社の担当者が作業期限を2週間過ぎて催促したら「何をすればいいのかわからない」とメールが 切替まで一週間なのに・・・ということで気を取り直してWEBサイトのスマホ対応の続きです。

IT勉強ノートbyフクロウ

こんばんは! Benです。今日は風が強くて道を歩いていたら突風に飛ばされ、気が付くと東京にいました。風で飛ばされないようにいっぱいご飯を食べて体重を増やしたいと思います。
前回のviewportはもちろん記述済みとします。ご覧のブロックタグのDIVは幅が500ピクセルと指定しています。これを表示するとどうなるか?

20160218a.PNG
幅が固定なので画面が広い時はご覧のように全部表示され、さらに画面幅が広い時は左側に偏り、右側が余白になります。

20160218b.PNG
でも、画面が狭いときは、右側が切れて全体を表示できません。これが幅を固定した状態です。このような状態だと、スマホやタブレットのような様々な解像度にはNGです。

IT勉強ノートbyフクロウ

こんばんは! Benです。今日は風が強くて道を歩いていたら突風に飛ばされ、気が付くと東京にいました。風で飛ばされないようにいっぱいご飯を食べて体重を増やしたいと思います。
こちらは幅の設定をピクセルでなくパーセントで指定しています。つまり、絶対量でなく相対量です。この場合、スマホのような小さな画面でも100%だったら幅全体表示でとなるので、フレキシブルにページの幅を指定できることになります。

20160218c.PNG
具体的にはパソコンでは本文は2行。

20160218d.PNG
でも、スマホサイズでは文字の大きさは同じで4行。文字が狭い幅をうまく下に流し込んで表示しているのがわかると思います。

このようにすると、画面のサイズがいろいろあっても、その画面の幅を最大限に利用した表示が可能となります。では最後に、100%にするとどんな画面サイズも全画面で表示されてとても有効ですが、高解像度のPCだと横長過ぎて見づらくなります。

IT勉強ノートbyフクロウ

max-widthなし

こんばんは! Benです。今日は風が強くて道を歩いていたら突風に飛ばされ、気が付くと東京にいました。風で飛ばされないようにいっぱいご飯を食べて体重を増やしたいと思います。

max-widthなし

こんばんは! Benです。今日は風が強くて道を歩いていたら突風に飛ばされ、気が付くと東京にいました。風で飛ばされないようにいっぱいご飯を食べて体重を増やしたいと思います。
一つのコンテンツでPCとスマホを両立するにはmax-widthが効果的です。これは、100%のような相対表示の幅でも、最大〇ピクセルに抑えるというものです。

20160218e.PNG
スマホを想定

20160218f.png
パソコンを想定

フレキシブルかつ適正な画面表示は見やすいページを作る基本なのでも何度もプレビューして調整します。次回はブロック分けなどをノートしたいと思います。これから出張で上京します

この記事へのコメント


この記事へのトラックバック