Slide 1
Slide 1 text
YouTube Live
(2020.08.13 Thur. 21:00~)
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
話す人
現役のエンジニア二人
赤貝が好きな CTO と
デザイン勉強中のエンジニア
@mu_vpoe
最近は SwiftUI で
macOS アプリづくりが
趣味
ムー
zaru
@zaru
CTO, Love 赤貝,
JavaScript, Firebase,
Web Components.
Twitter フォロー
お願いします！
Slide 4
Slide 4 text
1. 概念
2. 作り方
3. 小ネタ
レスポンシブ Web デザイン
Slide 5
Slide 5 text
1. 概念
2. 作り方
3. 小ネタ
レスポンシブ Web デザイン
Slide 6
Slide 6 text
ひと昔前のモバイル対応
CSS
HTML
CSS
HTML
デスクトップとモバイル、それぞれ専用
の HTML と CSS を作って完全に分けて
いた
大変だなぁ
エンジニア
z さん
Slide 7
Slide 7 text
今はレスポンシブでモバイルファースト
CSS
HTML
レスポンシブ Web デザインでモバイルもデスクトップも同じ
HTML / CSS を使うようになった。
作り方の流れは、まずモバイル用に作ってから、徐々に画面サイ
ズが大きい環境用に最適化していくモバイルファーストのやり方
が推奨されている（主に Google に）
まずモバイル
エンジニア
z さん
次にデス
クトップ
Slide 8
Slide 8 text
レスポンシブ Web デザイン？
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
レスポンシブ Web デザイン 3要素
Fluid grid layout
液体のように柔軟なレイアウ
ト。px ではなく % や em な
どの相対的な単位を使う。リ
キッドデザインとも言う
Flexible image
デバイスに応じて適切な画像
とメディアを表示する
Media query
デバイスの機能を条件にして
CSS を出し分けすることがで
きる
CSS
Slide 11
Slide 11 text
Fluid grid layout って何？
3要素
Slide 12
Slide 12 text
Fluid は相対的に計算する
% 指定をすると、親要素の幅を元に計算する
100% = 320px
はみ出ちゃう…
絶対的
相対的
Slide 13
Slide 13 text
Fluid は相対的に計算する
% 指定にすると画面サイズに応じて伸縮する
デスクトップのブラウザ スマホのブラウザ
Slide 14
Slide 14 text
Flexible な画像って何？
3要素
Slide 15
Slide 15 text
どんなデバイスであっても、
はみ出さず伸縮してきちんと表示される
img {
width: 100%;
}
CSS
Slide 16
Slide 16 text
Media query って何？
3要素
Slide 17
Slide 17 text
画面サイズに応じて CSS を切り替える
@media (条件) {
該当した場合の CSS
}
CSS
いろいろな条件を設定できる
- min-width / max-width (幅)
- orientaion (向き)
- hover / pointer (マウス・タッチパネル)
Slide 18
Slide 18 text
画面サイズに応じて CSS を切り替える
スマホ
タブレット
デスクトップ
横幅が 481px
以上のデバイス
横幅が 769px
以上のデバイス
Slide 19
Slide 19 text
レスポンシブは銀の弾丸ではない
Slide 20
Slide 20 text
レスポンシブで
全てを解決しようとしない
CSS
HTML
レスポンシブだけで全ての環境への最適化をしようとしない。
無理に適用をしてユーザ体験が悪くなるのでは意味がない。
大幅な UI の変更が必要であれば、部分的に専用の HTML ・スタ
イルと、レスポンシブな構成を組み合わせる。
全て完璧に
エンジニア
z さん
ちょっと
使いにくい
Slide 21
Slide 21 text
1. 概念
2. 作り方
3. 小ネタ
レスポンシブ Web デザイン
Slide 22
Slide 22 text
Viewport を使って統一する
Slide 23
Slide 23 text
モバイルだと文字が小さい…
デスクトップ用をモバイルで表示すると…
Slide 24
Slide 24 text
デスクトップ・モバイルなどあらゆる環境で表示を統一するには
viewport を指定する。基本は↑の指定で良い。
他のオプションは必要ない。
デバイスに依存しない
ピクセル密度になる
ブラウザが自動調整するのを防ぐ
( 昔の iOS Safari 横向きモードなど )
Viewport で密度を統一させる
Slide 25
Slide 25 text
Flexbox で柔軟なレイアウト
Slide 26
Slide 26 text
flexbox は子要素を良い感じに並べる
flex コンテナ
flex アイテム
flex コンテナ
flex アイテム
display: flex;
flex 指定をした要素の子要素は自動的に flex アイテムになる。
何も指定しなくても flex アイテムを横並びにしてくれる。
子要素の並びは縦や逆順などを
flex-direction で指定ができる
Slide 27
Slide 27 text
余白は flex-grow で指定
余っているスペース
flexbox は何も指定しない場合、flex アイテム分の width を確保す
ると、残りの余っているスペースに対しては何もしない。
アイテムの余白を調整するには、flex-grow を指定して調整する。
(*) 他にもいろんな調整の仕方があるがよく使うパターンのみ
Slide 28
Slide 28 text
余っている
スペース
flex-grow
2
flex-grow
1
flex-grow
2
flex-grow
1
grow が 2 なので、2個割り当てる grow が 1 なので、1個割り当てる
余っているスペースを 3 分割する
(flex アイテム全ての grow 合計値で割る）
余っている
スペース
余っている
スペース
Slide 29
Slide 29 text
余っているスペース
flex-grow: 1
width: 100px
片方を固定幅、片方は残り全てパターン
数値はなんでも良い。
grow が指定されていることで余白を全て割り当てられる
Slide 30
Slide 30 text
Flexbox でページネーション
Slide 31
Slide 31 text
ページネーションを flexbox で作る
Slide 32
Slide 32 text
- ul { width: 100%; display: flex; } CSS 余っているスペース
Slide 33
Slide 33 text
- ul { width: 100%; display: flex; justify-content: space-between; } CSS 幅いっぱい、均等になるように配置 自動調整 余白 自動調整 余白 自動調整 余白
Slide 34
Slide 34 text
均等な幅で割り振れている。
これでも良いけど、できれば最初と最後にだけ余白をつけたい。
Slide 35
Slide 35 text
-
ul {
width: 100%;
display: flex;
justify-content: space-between;
}
CSS
li:first-child, li:last-child {
flex-grow: 1;
}
CSS
自動調整
余白
- 自動調整 余白 最初と最後だけに余白を作りたい grow で余白調整するので、これは必要ない
Slide 36
Slide 36 text
Grid で縦横にレイアウト
Slide 37
Slide 37 text
Grid を最初から完全に
理解するのは難しい！
結 論
配信では最低限、活用できるものを紹介します
Slide 38
Slide 38 text
1個だけ
覚えれば
(最低限)
使える
結 論
Slide 39
Slide 39 text
Grid は縦と横の格子を定義する
縦が何行あるか
1行目の高さはいくつか
横が何列あるか
1列目の幅はいくつか
Slide 40
Slide 40 text
とにかく 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
いろんな定義の方法があるけど…
Slide 41
Slide 41 text
.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;
}
スペース区切りで
エリアに名前をつけられる
Slide 42
Slide 42 text
.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;
}
エリアをまたぐ場合は同じ名前を指定する
Slide 43
Slide 43 text
.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;
}
行の高さを指定
Slide 44
Slide 44 text
.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;
}
列の幅を指定
Slide 45
Slide 45 text
.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
表示したいタグに
エリア名を指定する
定義したエリア名を、要素で指定する
Slide 46
Slide 46 text
簡単にグリッドレイアウトできた
Slide 47
Slide 47 text
単位 fr
Slide 48
Slide 48 text
.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 コンテナで余っているスペースを
指定した fr の数で割って、割り振る。
flexbox の grow に似ている
可変にしたい要素に 1fr 付けるくらいの感じで OK
fr は利用可能なスペースの分数
Slide 49
Slide 49 text
200px 固定 200px 固定
余ったスペース（相対）
Slide 50
Slide 50 text
ブラウザを小さくすると
要素も小さくなる
Slide 51
Slide 51 text
Grid で要素を繰り返し配置する
Slide 52
Slide 52 text
1 2 3
4 5 6
7 ・・・・
同じ大きさの要素が n 個並ぶ Grid
Slide 53
Slide 53 text
1 2 3
4 5 6
7 ・・・・
画面サイズに応じて、幅と数を調整したい
1 2
3 4
5 ・・・
1
2
3
Slide 54
Slide 54 text
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
CSS
子要素の最低限の
維持したい幅を指定する
余っているスペースに
子要素をフィットしてくれる
繰り返しグリッドを設定してくれ
る。子要素の数が確定できない場
合に便利
Slide 55
Slide 55 text
Flexbox と Grid 使い分け
Slide 56
Slide 56 text
Flexbox は一次元、Grid は二次元
Flexbox
Flexbox は縦か横のどちらかに限定される。
折り返したとしても1方向を維持する
Grid
Grid は縦横を自由に設定可能
Slide 57
Slide 57 text
Flexbox は一次元、Grid は二次元
Flexbox
Flexbox は縦か横のどちらかに限定される。
折り返したとしても1方向を維持する
Grid
Grid は縦横を自由に設定可能
横並びなメニューやヘッダーなどの
UI 構築に向いている
ページ全体のレイアウトや、折り返しが
必要な繰り返しコンテンツに向いている
Slide 58
Slide 58 text
レスポンシブな画像
Slide 59
Slide 59 text
画像をレスポンシブにする目的
画像ファイルサイズの最適化
画像の見え方の最適化
Slide 60
Slide 60 text
同じ画像で、それぞれの
デバイスに配信する問題
小さく表示する
のに、大きい画
像をダウンロー
ドして無駄だ…
デバイスによって最適なファイルサイズが異なる
Slide 61
Slide 61 text
画像をレスポンシブにする目的
画像ファイルサイズの最適化
画像の見え方の最適化
解決方法は、2つ
Slide 62
Slide 62 text
HTML
srcset 属性でピクセル密度ごとに分ける
普通のディスプレイの場合
Mac の Retina ディスプレイ
や 4K、スマホなどの場合
高解像度スマホなど
解決 1
Slide 63
Slide 63 text
HTML
sizes 属性で画面サイズに応じて分ける
解決 2
ブラウザの画面サイズに応じて、表示する画像を
振り分けられる。シンプルな記法のわりに難しい
挙動をするので最適化するのは厳しい印象。
正直、普段使いする必要はないと思う。
Slide 64
Slide 64 text
画像をレスポンシブにする目的
画像ファイルサイズの最適化
画像の見え方の最適化
解決方法は、2つ
この手の最適化は手動でやるのは運用上、無理が
出てくるので、画像リサイズサービスや CDN な
どを使って自動で最適化するのがオススメ
Slide 65
Slide 65 text
画像ファイルサイズの最適化
画像の見え方の最適化
画像をレスポンシブにする目的
Slide 66
Slide 66 text
モバイルだと横長の画像が縮小され
小さくてイメージが伝わりにくい
Slide 67
Slide 67 text
HTML
picture タグで画像を出し分ける
解決
選択肢になる画像を source で定義する。
Media query を使って使用する条件を設定
Slide 68
Slide 68 text
拡大クロップしたものを適用した例
Slide 69
Slide 69 text
Media query のブレイクポイント
Slide 70
Slide 70 text
ブレイクポイント
何を設定すればいいの問題
p {
color: red;
}
@media (min-width: ???px) {
p {
color: blue;
}
}
さまざまなデバイスが
あるし、どんな閾値で
設定するのが良いか決
めにくい…
Slide 71
Slide 71 text
定番なオススメ設定
p {
color: red;
}
@media (min-width: 481px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
Slide 72
Slide 72 text
定番なオススメ設定
p {
color: red;
}
@media (min-width: 481px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
共通
＋
スマホ
Slide 73
Slide 73 text
定番なオススメ設定
p {
color: red;
}
@media (min-width: 481px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
タブレット
+
横向きスマホ
Slide 74
Slide 74 text
定番なオススメ設定
p {
color: red;
}
@media (min-width: 481px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
デスクトップ
+
大型タブレット
Slide 75
Slide 75 text
モバイルファーストで作る
p {
color: red;
}
@media (min-width: 481px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
モバイルから作り始めて、徐々
に解像度が大きいデバイスに合
わせて作っていく
Slide 76
Slide 76 text
p {
}
@media (max-width: 480px) {
p {
color: red;
}
}
@media (min-width: 481px) and (max-width: 768px) {
p {
color: blue;
}
}
@media (min-width: 769px) {
p {
color: green;
}
}
個人的にはこちらの厳密に指定
するスコープタイプが好き
Slide 77
Slide 77 text
@media (min-width: 481px) {}
@media (min-width: 769px) {}
@media (max-width: 480px) {}
@media (min-width: 481px) and (max-width: 768px) {}
@media (min-width: 769px) {}
スタイルが被ってい
るので、打ち消しが
必要になることがあ
る
スタイルがかぶらな
いので考えやすい
（冗長になることもある）
Slide 78
Slide 78 text
1. 概念
2. 作り方
3. 小ネタ
レスポンシブ Web デザイン
Slide 79
Slide 79 text
フォントサイズは px 指定いいの？
Slide 80
Slide 80 text
px でも問題ない
結 論
昔はダメだった（文字サイズが固定で拡大できなかった）
また、今でも一部のフォントサイズ拡大機能は使えなくな
るので、ベストは rem などの相対指定。理解して px を使
う分には現実的でベターと考えている
Slide 81
Slide 81 text
IE 対応って…？
Slide 82
Slide 82 text
autoprefixer 使おう
結 論
勝手に IE や他ブラウザ対応の CSS に書き換えてくれる
Slide 83
Slide 83 text
スマホだけ改行したい
Slide 84
Slide 84 text
@media (min-width: 769px) {
.sp_br {
display: none;
}
}
スマホではここで
改行したい
Slide 85
Slide 85 text
ありがとうございました！
次回は... Vim 入門 をやります！木曜21時から30分
質問感想など呟いていただけると嬉しいです！
- ハッシュタグ #mu_zaru
- ツイッター情報 @mu_vpoe , @zaru
チャンネル登録
Good ボタン
お願いします！
ムーザルちゃんねる