Tweet
Tweet

Slide 1

Slide 1 text

YouTube Live (2020.11.12 Thur. 21:00~)

Slide 2

Slide 2 text

話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画 面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！

Slide 3

Slide 3 text

今日話すこと ● ボックスモデルについて ● margin の相殺 ● block と inline の違い ● auto と negative ● margin 上か下か議論 ● UI パーツ余白設計 ● 論理プロパティについて

Slide 4

Slide 4 text

ボックスモデル

Slide 5

Slide 5 text

CSS のボックスモデル

Slide 6

Slide 6 text

width はどこまで？ CSS クイズ CSS はモダンブラウザ標準のままとする ❹ コンテンツだけ ❸ パディング含む ❷ ボーダー含む ❶ マージン含む

Slide 7

Slide 7 text

width は box-sizing で変わる box-sizing: content-box 標準 box-sizing: border-box 伝統 width はコンテンツ領域のみの寸 法となる。padding や border を 考慮する必要がある width は border を含んだ寸法と なる。見た目通りに幅を指定でき るので感覚的で使いやすい ( height )

Slide 8

Slide 8 text

margin の相殺

Slide 9

Slide 9 text

ぶつかる margin は相殺される .box1 { background: aqua; margin-bottom: 50px; } .box2 { background: hotpink; margin-top: 25px; } CSS
Box1
Box2
HTML ??px

Slide 10

Slide 10 text

ぶつかる margin は相殺される .box1 { background: aqua; margin-bottom: 50px; } .box2 { background: hotpink; margin-top: 25px; } CSS
Box1
Box2
HTML 50px 隣接する DIV の margin は数値が大き い方が採用される。そのため、50px の margin になる

Slide 11

Slide 11 text

親子の margin はどうなる？ .parent1 { background: aqua; margin-top: 25px; } .child1 { background: hotpink; margin-top: 50px; } CSS
child1
HTML CSS クイズ ??px ??px

Slide 12

Slide 12 text

親子の margin も相殺される .parent1 { background: aqua; margin-top: 25px; } .child1 { background: hotpink; margin-top: 50px; } CSS
child1
HTML CSS クイズ 50px 0px 上記例の HTML/CSS だと実際に描画されるのはこう いう感じ。child1 の margin-top 50px が使われ、 親子の DIV は上辺がくっつく

Slide 13

Slide 13 text

止める要素があれば相殺されない 何もなければ子の margin が親を突き 抜けてしまう 親に padding や border など子を 止める要素があれば突き抜けず、両 方の margin が適用される padding border

Slide 14

Slide 14 text

block と inline の違い

Slide 15

Slide 15 text

inline は左右のみ影響する display: block display: inline block 要素はボックス周りへの影響を与える inline 要素は自身のボックスにのみ影響を与 える。例外は左右の margin は適用される inline-block にすれば inline のように振る 舞いつつ block と同じく上下への margin が適用される

Slide 16

Slide 16 text

HTML の block と CSS の block HTML におけるブロック要素・インラ イン要素は、HTML5 では存在せず、 もっと細かい要素に分割されている
ブロック要素 インライン要素 CSS ではレイアウトとしてのブロック 要素・インライン要素などが定義され ている display: block ブロック要素 display: inline インライン要素 フローコンテンツ Tips

Slide 17

Slide 17 text

auto と negative

Slide 18

Slide 18 text

auto はいい感じにやる auto はブラウザがいい感じにやってくれる便利なもの で代表的な使い方は要素の真ん中よせ。 ただ 2020 現代では display: flex; justify-content: center; が使えるのであまり使わない…。 .auto { width: 200px; margin: auto; } CSS

Slide 19

Slide 19 text

negative でカバー表現 親要素と同じ幅 まで広げたいなぁ

Slide 20

Slide 20 text

negative でカバー表現 margin-left: -20px .parent { background: aqua; padding: 20px; } .child { background: hotpink; margin-left: -20px; margin-right: -20px; } CSS
HTML

Slide 21

Slide 21 text

negative でカバー表現 いい感じ .parent3 { background: aqua; padding: 20px; } .child { background: hotpink; margin-left: -20px; margin-right: -20px; } CSS
HTML 親要素に padding などのスペースがあるけど、幅は 親と一緒にしたい…とか飛び越えたいという時には negative margin にすることで飛び越えられる

Slide 22

Slide 22 text

margin 上につけるか下につけるか

Slide 23

Slide 23 text

margin の方向を統一する margin の相殺があるので、互いの要素が持 つ margin がぶつかるとレイアウトがしにく い。 サイト全体の中で方向を統一していくのがベ ター。 上下どちらがいいのかは、それぞれメリット があり一概に言い切れないのでやりやすい方 で。 上でも下でも、どちらでも良い 個人的には 上マージン派閥 下マージン派閥 ぶつかるのは避ける ❌

Slide 24

Slide 24 text

UI パーツ 余白設計

Slide 25

Slide 25 text

このボタンの余白どうする？

Slide 26

Slide 26 text

このボタンの余白どうする？ .button { margin: 10px; } CSS 流用可能性がある小さな UI パーツ自身に 余白の定義を直接するのは Not good ❌ .parent { padding: 10px; } CSS パーツを使う側が余白のコントロールをする 方向でスタイルを作っていく（色んなやり方 がある） ✅

Slide 27

Slide 27 text

論理プロパティについて 従来のプロパティ 論理プロパティ 物理的な見た目のプロパティ名から、要素に対しての論理的なプロパ ティ名へ。これによって要素が縦書きやアラビア語圏などでも統一し たプロパティ設定が可能になる。

Slide 28

Slide 28 text

.legacy-properties, .logic-properties { background: beige; margin: 10px; writing-mode: vertical-rl; } .legacy-properties { padding-top: 25px; padding-left: 25px; } .logic-properties { padding-block-start: 25px; padding-inline-start: 25px; } CSS

アイウエオ。アイウエオ。

アイウエオ。アイウエオ。

HTML 論理プロパティ

Slide 29

Slide 29 text

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