Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
CSS 多様な表現紹介 みはしゆうき 高校生主催の年越しLT大会 2020.12.31
Slide 2
Slide 2 text
みはしゆうき Twitter: @YukiMihashi N高2年 / Webデザイナー @ YassLab社 nztmの相方 ;)
Slide 3
Slide 3 text
About CSS Cascading Style Sheetsは、HTML や XML の要 素をどのように修飾するかを指示する仕様の一つ で、World Wide Web Consortium がとりまとめ 勧告する。文書の構造と体裁を分離させるという 理念を実現するために提唱されたスタイルシート の具体的な仕様の一つ。(ウィキペディアより) Webサイトの 見た目をつくるやつ!
Slide 4
Slide 4 text
CSSって幅広い!!
Slide 5
Slide 5 text
例えば
Slide 6
Slide 6 text
例えば 四角3つならべてみる
Slide 7
Slide 7 text
方法1 .cover { display: flex; gap: 10px; } https://codepen.io/yuki384/pen/ExgQLvj
Slide 8
Slide 8 text
方法2 .cover { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } https://codepen.io/yuki384/pen/ExgQLvj
Slide 9
Slide 9 text
方法3 .cover { font-size: 0; letter-spacing: 10px; } .cover div { display: inline-block; } https://codepen.io/yuki384/pen/ExgQLvj
Slide 10
Slide 10 text
方法4 .cover div { float: left; } .cover div:not(:last-child) { margin-right: 10px; } https://codepen.io/yuki384/pen/ExgQLvj
Slide 11
Slide 11 text
めっちゃいろいろ方法ある
Slide 12
Slide 12 text
こんなこともできちゃう
Slide 13
Slide 13 text
モーダルウィンドウ
Slide 14
Slide 14 text
ハンバーガーメニュー
Slide 15
Slide 15 text
アニメーション
Slide 16
Slide 16 text
たくさん フレームワークも あるけれど
Slide 17
Slide 17 text
CSS たのしいです!
Slide 18
Slide 18 text
CSS 多様な表現紹介 みはしゆうき