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

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 多様な表現紹介 みはしゆうき