CSS多様な表現紹介 / 2020 Last LT About CSS

高校生主催の年越しLT大会で発表したものです。

Transcript

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