$30 off During Our Annual Pro Sale. View Details »

All About CSS

Avatar for saeka saeka
August 09, 2019
Programming
0
230

All About CSS

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

Avatar for saeka

saeka

August 09, 2019
Tweet

More Decks by saeka

See All by saeka
Sass Life
Avatar for saeka saeka
1
72

Other Decks in Programming

See All in Programming
Github Copilotのチャット履歴ビューワーを作りました～WPF、dotnet10もあるよ～ #clrh111
Avatar for KatsuYuzu katsuyuzu
0
120
ゲームの物理 剛体編
Avatar for Fadis fadis
0
370
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
320
俺流レスポンシブコーディング 2025
Avatar for TAK tak_dcxi
14
9.3k
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
130
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
150
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
130
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
130
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
3.2k
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
5
1.8k
モデル駆動設計をやってみよう ワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
Avatar for haru860 haru860
0
280
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
120

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.2k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
26
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Claude Code のすすめ
Avatar for schroneko schroneko
65
200k

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 =

  5. None

  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 ? では…

  46. None

  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ではない
  66. None

  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