Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

018058d75600e02954f48b471765ae3a?s=47 Yuki Mihashi
December 31, 2020

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

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

018058d75600e02954f48b471765ae3a?s=128

Yuki Mihashi

December 31, 2020
Tweet

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