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