レスポンシブ Web デザインの基礎

YouTube Live (2020.08.13 Thur. 21:00~)

話す人現役のエンジニア二人赤貝が好きな CTO とデザイン勉強中のエンジニア @mu_vpoe 最近は SwiftUI で
macOS アプリづくりが趣味ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォローお願いします！

1. 概念 2. 作り方 3. 小ネタレスポンシブ Web デザイン

ひと昔前のモバイル対応 CSS HTML CSS HTML デスクトップとモバイル、それぞれ専用の HTML と CSS
を作って完全に分けていた大変だなぁエンジニア z さん

今はレスポンシブでモバイルファースト CSS HTML レスポンシブ Web デザインでモバイルもデスクトップも同じ HTML / CSS を使うようになった。
作り方の流れは、まずモバイル用に作ってから、徐々に画面サイズが大きい環境用に最適化していくモバイルファーストのやり方が推奨されている（主に Google に）まずモバイルエンジニア z さん次にデスクトップ

レスポンシブ Web デザイン？

レスポンシブ Web デザイン 3要素 Fluid grid layout 液体のように柔軟なレイアウト。px ではなく
% や em などの相対的な単位を使う。リキッドデザインとも言う Flexible image デバイスに応じて適切な画像とメディアを表示する Media query デバイスの機能を条件にして CSS を出し分けすることができる CSS

Fluid grid layout って何？ 3要素

Fluid は相対的に計算する % 指定をすると、親要素の幅を元に計算する 100% = 320px はみ出ちゃう… 絶対的相対的

Fluid は相対的に計算する % 指定にすると画面サイズに応じて伸縮するデスクトップのブラウザスマホのブラウザ

Flexible な画像って何？ 3要素

どんなデバイスであっても、はみ出さず伸縮してきちんと表示される img { width: 100%; } CSS

Media query って何？ 3要素

画面サイズに応じて CSS を切り替える @media (条件) { 該当した場合の CSS } CSS
いろいろな条件を設定できる - min-width / max-width (幅) - orientaion (向き) - hover / pointer (マウス・タッチパネル)

画面サイズに応じて CSS を切り替えるスマホタブレットデスクトップ横幅が 481px 以上のデバイス横幅が
769px 以上のデバイス

レスポンシブは銀の弾丸ではない

レスポンシブで全てを解決しようとしない CSS HTML レスポンシブだけで全ての環境への最適化をしようとしない。無理に適用をしてユーザ体験が悪くなるのでは意味がない。大幅な UI の変更が必要であれば、部分的に専用の HTML
・スタイルと、レスポンシブな構成を組み合わせる。全て完璧にエンジニア z さんちょっと使いにくい

Viewport を使って統一する

モバイルだと文字が小さい… デスクトップ用をモバイルで表示すると…

Flexbox で柔軟なレイアウト

flexbox は子要素を良い感じに並べる flex コンテナ flex アイテム flex コンテナ flex アイテム
display: flex; flex 指定をした要素の子要素は自動的に flex アイテムになる。何も指定しなくても flex アイテムを横並びにしてくれる。子要素の並びは縦や逆順などを flex-direction で指定ができる

余白は flex-grow で指定余っているスペース flexbox は何も指定しない場合、flex アイテム分の width を確保すると、残りの余っているスペースに対しては何もしない。
アイテムの余白を調整するには、flex-grow を指定して調整する。 (*) 他にもいろんな調整の仕方があるがよく使うパターンのみ

余っているスペース flex-grow 2 flex-grow 1 flex-grow 2 flex-grow 1
grow が 2 なので、2個割り当てる grow が 1 なので、1個割り当てる余っているスペースを 3 分割する (flex アイテム全ての grow 合計値で割る）余っているスペース余っているスペース

余っているスペース ﬂex-grow: 1 width: 100px 片方を固定幅、片方は残り全てパターン数値はなんでも良い。 grow が指定されていることで余白を全て割り当てられる

Flexbox でページネーション

ページネーションを ﬂexbox で作る

<ul> <li> ul { width: 100%; display: ﬂex; } CSS
<body> 余っているスペース

<ul> <li> ul { width: 100%; display: ﬂex; justify-content: space-between;
} CSS <body> 幅いっぱい、均等になるように配置自動調整余白自動調整余白自動調整余白

均等な幅で割り振れている。これでも良いけど、できれば最初と最後にだけ余白をつけたい。

<ul> ul { width: 100%; display: flex; justify-content: space-between; }
CSS <body> li:first-child, li:last-child { flex-grow: 1; } CSS 自動調整余白 <li> 自動調整余白最初と最後だけに余白を作りたい grow で余白調整するので、これは必要ない

Grid で縦横にレイアウト

Grid を最初から完全に理解するのは難しい！結　論配信では最低限、活用できるものを紹介します

1個だけ覚えれば (最低限) 使える結　論

Grid は縦と横の格子を定義する縦が何行あるか 1行目の高さはいくつか横が何列あるか 1列目の幅はいくつか

とにかく grid-template を覚える .grid { display: grid; grid-template: "header header
header " 50px "left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS いろんな定義の方法があるけど…

.grid { display: grid; grid-template: "header header header " 50px
"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } スペース区切りでエリアに名前をつけられる

"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } エリアをまたぐ場合は同じ名前を指定する

"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } 行の高さを指定

"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } 列の幅を指定

"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS 表示したいタグにエリア名を指定する定義したエリア名を、要素で指定する

簡単にグリッドレイアウトできた

単位 fr

"left-menu main right-menu " auto "left-menu footer-main footer-main" 100px / 200px 1fr 200px; } .header { grid-area: header; } .left-menu { grid-area: left-menu; } CSS grid コンテナで余っているスペースを指定した fr の数で割って、割り振る。 ﬂexbox の grow に似ている可変にしたい要素に 1fr 付けるくらいの感じで OK fr は利用可能なスペースの分数

200px 固定 200px 固定余ったスペース（相対）

ブラウザを小さくすると要素も小さくなる

Grid で要素を繰り返し配置する

1 2 3 4 5 6 7 ・・・・同じ大きさの要素が n
個並ぶ Grid

1 2 3 4 5 6 7 ・・・・画面サイズに応じて、幅と数を調整したい 1
2 3 4 5 ・・・ 1 2 3

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } CSS
子要素の最低限の維持したい幅を指定する余っているスペースに子要素をフィットしてくれる繰り返しグリッドを設定してくれる。子要素の数が確定できない場合に便利

Flexbox と Grid 使い分け

Flexbox は一次元、Grid は二次元 Flexbox Flexbox は縦か横のどちらかに限定される。折り返したとしても1方向を維持する Grid Grid は縦横を自由に設定可能

Flexbox は一次元、Grid は二次元 Flexbox Flexbox は縦か横のどちらかに限定される。折り返したとしても1方向を維持する Grid Grid は縦横を自由に設定可能
横並びなメニューやヘッダーなどの UI 構築に向いているページ全体のレイアウトや、折り返しが必要な繰り返しコンテンツに向いている

レスポンシブな画像

画像をレスポンシブにする目的画像ファイルサイズの最適化画像の見え方の最適化

同じ画像で、それぞれのデバイスに配信する問題小さく表示するのに、大きい画像をダウンロードして無駄だ… デバイスによって最適なファイルサイズが異なる

画像をレスポンシブにする目的画像ファイルサイズの最適化画像の見え方の最適化解決方法は、2つ

<img src="x1.png" srcset="x1.png, x2.png 2x, x3.png 3x" width="300" height="200"> HTML
srcset 属性でピクセル密度ごとに分ける普通のディスプレイの場合 Mac の Retina ディスプレイや 4K、スマホなどの場合高解像度スマホなど解決 1

<img srcset="./300x300.png 300w, ./600x600.png 600w" sizes="(max-width: 300px) 300px, 600px" src="./300x300.png">
HTML sizes 属性で画面サイズに応じて分ける解決 2 ブラウザの画面サイズに応じて、表示する画像を振り分けられる。シンプルな記法のわりに難しい挙動をするので最適化するのは厳しい印象。正直、普段使いする必要はないと思う。

画像をレスポンシブにする目的画像ファイルサイズの最適化画像の見え方の最適化解決方法は、2つこの手の最適化は手動でやるのは運用上、無理が出てくるので、画像リサイズサービスや CDN などを使って自動で最適化するのがオススメ

画像ファイルサイズの最適化画像の見え方の最適化画像をレスポンシブにする目的

モバイルだと横長の画像が縮小され小さくてイメージが伝わりにくい

<picture> <source media="(max-width: 375px)" srcset="crop.jpg"> <source media="(min-width: 376px)" srcset="normal.jpg"> <img
src="normal.jpg"> </picture> HTML picture タグで画像を出し分ける解決選択肢になる画像を source で定義する。 Media query を使って使用する条件を設定

拡大クロップしたものを適用した例

Media query のブレイクポイント

ブレイクポイント何を設定すればいいの問題 <style type="text/css"> p { color: red; } @media
(min-width: ???px) { p { color: blue; } } </style> さまざまなデバイスがあるし、どんな閾値で設定するのが良いか決めにくい…

定番なオススメ設定 <style type="text/css"> p { color: red; } @media (min-width:
481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style>

481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> 共通＋スマホ

481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> タブレット + 横向きスマホ

481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> デスクトップ + 大型タブレット

モバイルファーストで作る <style type="text/css"> p { color: red; } @media (min-width:
481px) { p { color: blue; } } @media (min-width: 769px) { p { color: green; } } </style> モバイルから作り始めて、徐々に解像度が大きいデバイスに合わせて作っていく

@media (min-width: 481px) {} @media (min-width: 769px) {} @media (max-width:
480px) {} @media (min-width: 481px) and (max-width: 768px) {} @media (min-width: 769px) {} スタイルが被っているので、打ち消しが必要になることがあるスタイルがかぶらないので考えやすい（冗長になることもある）

フォントサイズは px 指定いいの？

px でも問題ない結　論昔はダメだった（文字サイズが固定で拡大できなかった）また、今でも一部のフォントサイズ拡大機能は使えなくなるので、ベストは rem などの相対指定。理解して px を使
う分には現実的でベターと考えている

IE 対応って…？

autopreﬁxer 使おう結　論勝手に IE や他ブラウザ対応の CSS に書き換えてくれる

スマホだけ改行したい

ありがとうございました！次回は... Vim 入門をやります！木曜21時から30分質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru -
ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタンお願いします！ムーザルちゃんねる

レスポンシブ Web デザインの基礎

レスポンシブ Web デザインの基礎

More Decks by mu_zaru

Other Decks in Programming

Featured

Transcript