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
170
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
180
未踏ジュニアでやってよかったことやっておけばよかったこと / mitou jr 2021 boost
yuki384
0
160
Rails Girls に参加した13歳の少女のその後💎 / Rails Girls Gathering Japan
yuki384
2
1.8k
子ども向けプログラミング学習サイト「メクルン」/geekten
yuki384
0
220
子ども向けのプログラミング学習コンテンツを作る楽しさ / CODE-RAVE vol-2
yuki384
1
130
ビジュアルプログラミング学習サイト「メクルン」の開発 / SecHack365 Returns 2020
yuki384
0
100
プログラミングとはじめの一歩 / Girls Initiative for CoderDojo
yuki384
1
390
伝わるプレゼン資料を作ろう / Let's Make Simply Presentation Slide
yuki384
2
520
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.3k
Other Decks in Design
See All in Design
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
太田博三(@usagisan2020)
otanet
0
230
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
250
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
690
Rayout Pattern 01
one0
0
1.5k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
720
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
Tableau曲線表現講座(2024.11.21)
cielo1985
0
260
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
69k
LLMによるRAG評価用合成テストデータの生成
licux
6
700
250131_product meetup
motokoishida
0
120
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
910
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Practical Orchestrator
shlominoach
186
10k
Embracing the Ebb and Flow
colly
84
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Automating Front-end Workflow
addyosmani
1368
200k
A Philosophy of Restraint
colly
203
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Making Projects Easy
brettharned
116
6k
4 Signs Your Business is Dying
shpigford
182
22k
The Invisible Side of Design
smashingmag
299
50k
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 多様な表現紹介 みはしゆうき