Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS多様な表現紹介 / 2020 Last LT About CSS
Search
Yuki Mihashi
December 31, 2020
Design
2
190
CSS多様な表現紹介 / 2020 Last LT About CSS
高校生主催の年越しLT大会で発表したものです。
Yuki Mihashi
December 31, 2020
Tweet
Share
More Decks by Yuki Mihashi
See All by Yuki Mihashi
チーム開発におけるデザイナーの役割 / ReDS_CCC_LT
yuki384
1
200
未踏ジュニアでやってよかったことやっておけばよかったこと / mitou jr 2021 boost
yuki384
0
170
Rails Girls に参加した13歳の少女のその後💎 / Rails Girls Gathering Japan
yuki384
2
1.9k
子ども向けプログラミング学習サイト「メクルン」/geekten
yuki384
0
240
子ども向けのプログラミング学習コンテンツを作る楽しさ / CODE-RAVE vol-2
yuki384
1
140
ビジュアルプログラミング学習サイト「メクルン」の開発 / SecHack365 Returns 2020
yuki384
0
120
プログラミングとはじめの一歩 / Girls Initiative for CoderDojo
yuki384
1
410
伝わるプレゼン資料を作ろう / Let's Make Simply Presentation Slide
yuki384
2
560
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.3k
Other Decks in Design
See All in Design
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
250131_product meetup
motokoishida
0
210
Kid Cowboy 103
marilutwin
0
270
今日から意識できるアクセシビリティ
fumiko
0
250
問いの変遷
iflection
0
160
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
130
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.7k
7 Core Values of Round-L
wired888
0
150
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Bash Introduction
62gerente
614
210k
Visualization
eitanlees
146
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
For a Future-Friendly Web
brad_frost
179
9.8k
Become a Pro
speakerdeck
PRO
28
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
307
31k
Transcript
CSS 多様な表現紹介 みはしゆうき 高校生主催の年越しLT大会 2020.12.31
みはしゆうき Twitter: @YukiMihashi N高2年 / Webデザイナー @ YassLab社 nztmの相方 ;)
About CSS Cascading Style Sheetsは、HTML や XML の要 素をどのように修飾するかを指示する仕様の一つ で、World
Wide Web Consortium がとりまとめ 勧告する。文書の構造と体裁を分離させるという 理念を実現するために提唱されたスタイルシート の具体的な仕様の一つ。(ウィキペディアより) Webサイトの 見た目をつくるやつ!
CSSって幅広い!!
例えば
例えば 四角3つならべてみる
方法1 .cover { display: flex; gap: 10px; } https://codepen.io/yuki384/pen/ExgQLvj
方法2 .cover { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:
10px; } https://codepen.io/yuki384/pen/ExgQLvj
方法3 .cover { font-size: 0; letter-spacing: 10px; } .cover div
{ display: inline-block; } https://codepen.io/yuki384/pen/ExgQLvj
方法4 .cover div { float: left; } .cover div:not(:last-child) {
margin-right: 10px; } https://codepen.io/yuki384/pen/ExgQLvj
めっちゃいろいろ方法ある
こんなこともできちゃう
モーダルウィンドウ
ハンバーガーメニュー
アニメーション
たくさん フレームワークも あるけれど
CSS たのしいです!
CSS 多様な表現紹介 みはしゆうき