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
180
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
190
未踏ジュニアでやってよかったことやっておけばよかったこと / mitou jr 2021 boost
yuki384
0
160
Rails Girls に参加した13歳の少女のその後💎 / Rails Girls Gathering Japan
yuki384
2
1.9k
子ども向けプログラミング学習サイト「メクルン」/geekten
yuki384
0
230
子ども向けのプログラミング学習コンテンツを作る楽しさ / CODE-RAVE vol-2
yuki384
1
130
ビジュアルプログラミング学習サイト「メクルン」の開発 / SecHack365 Returns 2020
yuki384
0
110
プログラミングとはじめの一歩 / Girls Initiative for CoderDojo
yuki384
1
400
伝わるプレゼン資料を作ろう / Let's Make Simply Presentation Slide
yuki384
2
550
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.3k
Other Decks in Design
See All in Design
250131_product meetup
motokoishida
0
170
デザイナーとPMの両ロール_3つのポイント
toy1618
1
290
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
190
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
150
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
340
Masked shaman-Storyboard 2025
ashley0521
0
270
Social Anxiety
ksmith2024
0
200
freee + Product Design FY25Q4
freee
4
13k
Starry | Storyboards | Scene 1-21
giofortuna_story
0
190
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
480
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
Saudade typeface
tiagoporto
0
280
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.4k
BBQ
matthewcrist
88
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Bash Introduction
62gerente
612
210k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Being A Developer After 40
akosma
91
590k
Side Projects
sachag
453
42k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Scaling GitHub
holman
459
140k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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 多様な表現紹介 みはしゆうき