All About CSS

CSSに苦戦するすべての技術者のために作りました💖

Transcript

1. All about CSS Saeka Hirai
2. CSS is ? All about CSS
3. Cascading Style Sheet All about CSS
4. 同じ要素に対して 異なるスタイルが指定されている場合、 その優先順位を決めること All about CSS Cascading =
6. All about CSS ・ウェブサイトの⾒た⽬を作るもの ・HTMLに装飾するもの ・簡単に描けるけど掴み所がない ・正解がよくわからない… ・なんかつけたスタイルが効かないし！(爆) みんなのCSSに対する印象
7. All about CSS CSSの 基本構⽂を勉強する前に…
8. All about CSS CSSの概念はたった2つ！ みんな知ってた?
9. All about CSS 私⾃⾝と 私とあなたの関係性❤
10. All about CSS 私⾃⾝って？
11. All about CSS 私 = アバター = 例えば…
12. All about CSS 私の特徴ってこんな感じ ・背景は海 ・髪の⽑が⻑い ・髪の⽑の⾊は茶⾊ ・髪の⽑質はゆるふわパーマ ・前髪は眉上 ・眉⽑は茶⾊ ・⽬はぱっちり ・⽬の⾊は⽔⾊ ・肌は⾊⽩ ・来ている服はワンピース ・服の模様は⻘のストライプ ・イヤリングつけてる ・イヤリングの⾊は⽔⾊ ・靴はサンダル           etc…
13. All about CSS CSSで書くとこんな感じ 私 { 背景 : 海; 服: ワンピース ⻘のストライプ; イヤリング: つけてる ⽔⾊; 靴: サンダル; 髪の⽑: ⻑い 茶⾊ ゆるふわパーマ; 前髪: 眉上; ⽬: ぱっちり ⽔⾊; 肌: ⾊⽩; }
14. All about CSS 私たちの関係性は？ 私 あなた あなた = 私の⼦供
15. All about CSS あなた 私 私たちの関係性は？ CSSの世界は 継承するもの あなた = 私の親?
16. All about CSS 私 あなた あなた = 私の兄弟 隣⼈ CSSの世界では 兄弟間はお隣さん 私たちの関係性は？
17. All about CSS 私 あなた あなた = 前の兄弟？ 同じお隣さんでも ⾒える範囲は ⾃分の後ろだけ 私たちの関係性は？
18. All about CSS CSSで書くとこんな感じ 私 { ⼦供たちの並び: 横⼀列に並んでいる; } 私の⼦供 { 体の⾊: ⻩⾊; くちばしの⾊: オレンジ; } 私 あなた
19. All about CSS 関係性を表すCSSは他にもあるよ 親 { display: flex; } ⼦ { flex: 1; } 親 { display: grid; } 親 { position: relative; } ⼦ { position: absolute; } 親 { font-size: 16px; } /*(16*0.8) = 12.8px*/ ⼦ { font-size: 0.8em; }
20. All about CSS 2つの概念を理解したところで…
21. All about CSS 基本構⽂です！ セレクタ(要素) { プロパティ: 値; }
22. All about CSS セレクタの種類 : HTMLタグ p { color: pink; } CSS <p>テキスト</p> HTML
23. All about CSS セレクタの種類 : ID #pink { color: pink; } <p id=“pink”> テキスト </p> HTML CSS
24. All about CSS セレクタの種類 : Class .pink { color: pink; } <p class=“pink”> テキスト </p> HTML CSS
25. All about CSS プロパティはこれだけあります❤ https://developer.mozilla.org/ja/docs/Web/CSS/Reference
26. All about CSS 今時のCSSは Grid & Flex & VW
27. All about CSS Grid
28. All about CSS ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px 50px; } CSS <ul><li>アイテム</li></ul> HTML Grid
29. All about CSS CSS ul { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr; grid-template-areas: “sales job “ “sales age “; } li:first-child { grid-area: sales; } li:nth-child(2) { grid-area: job; } li:last-child { grid-area: age; } <ul><li>アイテム</li></ul> HTML Grid
30. All about CSS こういう時はGrid ・レイアウトを均等に分割して配置したい ・マス⽬の好きな位置に要素を配置したい ・1列に並べる個数が決まっていて、 余⽩をいい感じに均等に割り振ってほしい
31. All about CSS Grid学習⽤ゲーム http://cssgridgarden.com/#ja
32. All about CSS Flex
33. All about CSS ul { display: flex; flex-wrap: wrap; } li { margin-right: 1.04vw; margin-bottom: 1vw; } CSS Flex HTML <ul> <li> <a>アイテム</a> </li> </ul>
34. All about CSS CSS div { display: flex; } dt { flex-basis: 8.5em; } dd { flex: 1; margin-left: 40px; } <div> <dt>項⽬名</dt> <dd>データ</dd> </div> HTML Flex
35. All about CSS こういう時はFlex ・何個要素があるかわからないけどいい感じに 横並びにしたい ・要素に残り幅全て割り当てたい時 ・要素を天地中央に持っていきたい ・要素の順番をPCとスマホで変えたい時
36. All about CSS Flex学習⽤ゲーム https://flexboxfroggy.com/#ja
37. All about CSS VWの話をする前に… PCデザインとスマホデザインを どう使い分けているか知っていますか？
38. All about CSS PC SP
39. All about CSS 1. 端末によって読み込むソースを分ける   (バックエンド的解決) 2. 同⼀ソース内で処理を分岐させる   (フロントエンド的解決)
40. All about CSS 同⼀ソース内で処理を分岐させる → レスポンシブ対応
41. All about CSS レスポンシブ対応させるためには <head> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,minimum-scale=1.0”> </head> HTML /*750px以下はこのスタイル*/ @media screen and (max-width: 750px) { /* SPのスタイルを書く*/ } CSS /*750px以上はこのスタイル*/ @media screen and (min-width: 750px) { /* PCのスタイルを書く*/ }
42. All about CSS CSSでよく⾒る単位って？
43. All about CSS px = 画素の最⼩単位
44. All about CSS 横幅1400pxのPC → 画⾯解像度1400px 例えば…
45. All about CSS 横幅365pxのスマホ → 画⾯解像度365px ? では…
47. All about CSS デバイスには 物理値と論理値がある
48. All about CSS ⾼精細ディスプレイの登場 Dot by dot 論理値 Scaling 物理値
49. All about CSS 横幅375pxのスマホ → 画⾯解像度750px 論理値 物理値 (Retina2の場合)
50. All about CSS 物理値(750px)でなく、 論理値(375px)でCSSをかけるようにするための記述 <head> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,minimum-scale=1.0”> </head> HTML
51. All about CSS 物理値(750px)で なんでCSS書いちゃいけないの？ って思った⼈挙⼿
52. All about CSS 物理値の幅は(スマホだけでも) 640px∼1242/2160px …(2倍、3倍の⼤きさが普及)
53. All about CSS 640px基準で書けば 1242/2160pxの時スカスカになるし、 1242/2160px基準で書けば 640pxの時はみ出ちゃう…
54. All about CSS でも論理値なら320px∼414px
55. All about CSS 幅の範囲が狭い場合は 百分率(%)を使えばいいのです！
56. All about CSS 百分率 = ⽐べられる量÷元にする量×100% ⼩学５年⽣のおさらい
57. All about CSS Example 750pxのデバイス幅でpadding40pxの場合 (⾼精細ディスプレイ対応でデザインは750pxが多いです) 40px÷750px ×100% = 5.33% (⽐べられる量) (元にする量)
58. All about CSS レスポンシブ対応とは デバイス幅の⽐率で CSSを書くこと！
59. All about CSS HTMLのviewportで論理値指定 + CSSの⽐率計算         の相性が良き
60. All about CSS だがしかし
61. All about CSS CSSの世界は 継承するもの
62. All about CSS 元にする量(100%となる値)が 常にデバイス幅とは限らないのです
63. All about CSS CSSの世界では ⼦にとって親が100%
64. All about CSS 問 : aのpaddingの百分率を求めよ ＜ul＞ <li><a></a></li> </ul> HTML device = width: 750px ul = width : 500px li = width : 300px a = padding: 20px
65. All about CSS 問 : aのpaddingの百分率を求めよ device = width: 750px ul = width : 500px li = width : 300px a = padding: 20px ⬅この時点でもう 100%は750pxではない
67. All about CSS そこでVWです！
68. All about CSS VWとは？ Viewport Width = Viewportの幅に対する割合
69. All about CSS 問 : aのpaddingの百分率を求めよ device = width: 750px ul = width : 500px li = width : 300px a = padding: 20px ⬅ (500/750*100)vw ⬅ (300/750*100)vw ⬅ (20/750*100)vw
70. All about CSS お分かりいただけるだろうか
71. All about CSS VWだと 常に100%の値が固定されるので 計算がめちゃ楽！
72. All about CSS Grid & Flex & VW 使ってみてね
73. All about CSS (みんなが苦しめられる) 詳細度について 最後に
74. All about CSS CSSが効きません！(涙) ∼あるある相談出来事∼
75. All about CSS なぜか
76. All about CSS 迷⼦センターに⼦供が来て、 アナウンスが流れました。 どのアナウンスが⼀番早く 迎えが来てくれそうでしょうか ?
77. All about CSS ①「迷⼦は⼥の⼦です」 ②「迷⼦は⼥の⼦で、   ワンピースを着ています」 ③「迷⼦は⼥の⼦で、ワンピースを   着ている愛ちゃんという名前です」
78. All about CSS 迷⼦センター = ブラウザ
79. All about CSS ブラウザも セレクタの詳細度が⾼いと 早く⾒つける(処理する)ことができる だから、強い IDはUniqueであるから 尚更強い
80. All about CSS でもこれならOK 迷⼦の名前は ⼭⽥愛ちゃんです = 迷ったらクラスを使うべし
81. 以上が CSSの全てです All about CSS
82. Thank You