All About CSS

All about CSS Saeka Hirai

CSS is ? All about CSS

Cascading Style Sheet All about CSS

同じ要素に対して異なるスタイルが指定されている場合、その優先順位を決めること All about CSS Cascading =

All about CSS ・ウェブサイトの⾒た⽬を作るもの・HTMLに装飾するもの・簡単に描けるけど掴み所がない・正解がよくわからない… ・なんかつけたスタイルが効かないし！(爆) みんなのCSSに対する印象

All about CSS CSSの基本構⽂を勉強する前に…

All about CSS CSSの概念はたった2つ！みんな知ってた?

All about CSS 私⾃⾝と私とあなたの関係性❤

All about CSS 私⾃⾝って？

All about CSS 私 = アバター = 例えば…

All about CSS 私の特徴ってこんな感じ・背景は海・髪の⽑が⻑い・髪の⽑の⾊は茶⾊・髪の⽑質はゆるふわパーマ・前髪は眉上・眉⽑は茶⾊
・⽬はぱっちり・⽬の⾊は⽔⾊・肌は⾊⽩・来ている服はワンピース・服の模様は⻘のストライプ・イヤリングつけてる・イヤリングの⾊は⽔⾊・靴はサンダル etc…

All about CSS CSSで書くとこんな感じ私 { 背景 : 海; 服:
ワンピース⻘のストライプ; イヤリング: つけてる⽔⾊; 靴: サンダル; 髪の⽑: ⻑い茶⾊ゆるふわパーマ; 前髪: 眉上; ⽬: ぱっちり⽔⾊; 肌: ⾊⽩; }

All about CSS 私たちの関係性は？私あなたあなた = 私の⼦供

All about CSS あなた私私たちの関係性は？ CSSの世界は継承するものあなた =
私の親?

All about CSS 私あなたあなた = 私の兄弟隣⼈ CSSの世界では
兄弟間はお隣さん私たちの関係性は？

All about CSS 私あなたあなた = 前の兄弟？同じお隣さんでも⾒える範囲は
⾃分の後ろだけ私たちの関係性は？

All about CSS CSSで書くとこんな感じ私 { ⼦供たちの並び: 横⼀列に並んでいる; } 私の⼦供
{ 体の⾊: ⻩⾊; くちばしの⾊: オレンジ; } 私あなた

All about CSS 関係性を表すCSSは他にもあるよ親 { display: ﬂex; } ⼦
{ ﬂex: 1; } 親 { display: grid; } 親 { position: relative; } ⼦ { position: absolute; } 親 { font-size: 16px; } /*(16*0.8) = 12.8px*/ ⼦ { font-size: 0.8em; }

All about CSS 2つの概念を理解したところで…

All about CSS 基本構⽂です！セレクタ(要素) { プロパティ: 値; }

All about CSS セレクタの種類 : HTMLタグ p { color: pink;
} CSS <p>テキスト</p> HTML

All about CSS セレクタの種類 : ID #pink { color: pink;
} <p id=“pink”> テキスト </p> HTML CSS

All about CSS セレクタの種類 : Class .pink { color: pink;
} <p class=“pink”> テキスト </p> HTML CSS

All about CSS プロパティはこれだけあります❤ https://developer.mozilla.org/ja/docs/Web/CSS/Reference

All about CSS 今時のCSSは Grid & Flex & VW

All about CSS Grid

All about CSS ul { display: grid; grid-template-columns: 1fr 1fr
1fr; grid-gap: 40px 50px; } CSS <ul><li>アイテム</li></ul> HTML Grid

All about CSS CSS ul { display: grid; grid-gap: 20px;
grid-template-columns: 1fr 1fr; grid-template-areas: “sales job “ “sales age “; } li:ﬁrst-child { grid-area: sales; } li:nth-child(2) { grid-area: job; } li:last-child { grid-area: age; } <ul><li>アイテム</li></ul> HTML Grid

All about CSS こういう時はGrid ・レイアウトを均等に分割して配置したい・マス⽬の好きな位置に要素を配置したい・1列に並べる個数が決まっていて、余⽩をいい感じに均等に割り振ってほしい

All about CSS Grid学習⽤ゲーム http://cssgridgarden.com/#ja

All about CSS Flex

All about CSS ul { display: ﬂex; ﬂex-wrap: wrap; }
li { margin-right: 1.04vw; margin-bottom: 1vw; } CSS Flex HTML <ul> <li> <a>アイテム</a> </li> </ul>

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

All about CSS こういう時はFlex ・何個要素があるかわからないけどいい感じに横並びにしたい・要素に残り幅全て割り当てたい時・要素を天地中央に持っていきたい・要素の順番をPCとスマホで変えたい時

All about CSS Flex学習⽤ゲーム https://ﬂexboxfroggy.com/#ja

All about CSS VWの話をする前に… PCデザインとスマホデザインをどう使い分けているか知っていますか？

All about CSS PC SP

All about CSS 1. 端末によって読み込むソースを分ける (バックエンド的解決) 2. 同⼀ソース内で処理を分岐させる
(フロントエンド的解決)

All about CSS 同⼀ソース内で処理を分岐させる → レスポンシブ対応

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のスタイルを書く*/ }

All about CSS CSSでよく⾒る単位って？

All about CSS px = 画素の最⼩単位

All about CSS 横幅1400pxのPC → 画⾯解像度1400px 例えば…

All about CSS 横幅365pxのスマホ → 画⾯解像度365px ? では…

All about CSS デバイスには物理値と論理値がある

All about CSS ⾼精細ディスプレイの登場 Dot by dot 論理値 Scaling 物理値

All about CSS 横幅375pxのスマホ → 画⾯解像度750px 論理値物理値 (Retina2の場合)

All about CSS 物理値(750px)でなく、論理値(375px)でCSSをかけるようにするための記述 <head> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,minimum-scale=1.0”> </head>
HTML

All about CSS 物理値(750px)でなんでCSS書いちゃいけないの？って思った⼈挙⼿

All about CSS 物理値の幅は(スマホだけでも) 640px∼1242/2160px …(2倍、3倍の⼤きさが普及)

All about CSS 640px基準で書けば 1242/2160pxの時スカスカになるし、 1242/2160px基準で書けば 640pxの時はみ出ちゃう…

All about CSS でも論理値なら320px∼414px

All about CSS 幅の範囲が狭い場合は百分率(%)を使えばいいのです！

All about CSS 百分率 = ⽐べられる量÷元にする量×100% ⼩学５年⽣のおさらい

All about CSS Example 750pxのデバイス幅でpadding40pxの場合 (⾼精細ディスプレイ対応でデザインは750pxが多いです) 40px÷750px ×100% = 5.33%
(⽐べられる量) (元にする量)

All about CSS レスポンシブ対応とはデバイス幅の⽐率で CSSを書くこと！

All about CSS HTMLのviewportで論理値指定 + CSSの⽐率計算の相性が良き

All about CSS だがしかし

All about CSS CSSの世界は継承するもの

All about CSS 元にする量(100%となる値)が常にデバイス幅とは限らないのです

All about CSS CSSの世界では⼦にとって親が100%

All about CSS 問 : aのpaddingの百分率を求めよ＜ul＞ <li><a></a></li> </ul> HTML
device = width: 750px ul = width : 500px li = width : 300px a = padding: 20px

All about CSS 問 : aのpaddingの百分率を求めよ device = width: 750px
ul = width : 500px li = width : 300px a = padding: 20px ⬅この時点でもう 100%は750pxではない

All about CSS そこでVWです！

All about CSS VWとは？ Viewport Width = Viewportの幅に対する割合

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

All about CSS お分かりいただけるだろうか

All about CSS VWだと常に100%の値が固定されるので計算がめちゃ楽！

All about CSS Grid & Flex & VW 使ってみてね

All about CSS (みんなが苦しめられる) 詳細度について最後に

All about CSS CSSが効きません！(涙) ∼あるある相談出来事∼

All about CSS なぜか

All about CSS 迷⼦センターに⼦供が来て、アナウンスが流れました。どのアナウンスが⼀番早く迎えが来てくれそうでしょうか ?

All about CSS ①「迷⼦は⼥の⼦です」 ②「迷⼦は⼥の⼦で、ワンピースを着ています」 ③「迷⼦は⼥の⼦で、ワンピースを着ている愛ちゃんという名前です」

All about CSS 迷⼦センター = ブラウザ

All about CSS ブラウザもセレクタの詳細度が⾼いと早く⾒つける(処理する)ことができるだから、強い IDはUniqueであるから尚更強い

All about CSS でもこれならOK 迷⼦の名前は⼭⽥愛ちゃんです = 迷ったらクラスを使うべし

以上が CSSの全てです All about CSS

Thank You

All About CSS

All About CSS

More Decks by saeka

Other Decks in Programming

Featured

Transcript