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
140
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
140
未踏ジュニアでやってよかったことやっておけばよかったこと / mitou jr 2021 boost
yuki384
0
140
Rails Girls に参加した13歳の少女のその後💎 / Rails Girls Gathering Japan
yuki384
2
1.7k
子ども向けプログラミング学習サイト「メクルン」/geekten
yuki384
0
190
子ども向けのプログラミング学習コンテンツを作る楽しさ / CODE-RAVE vol-2
yuki384
1
100
ビジュアルプログラミング学習サイト「メクルン」の開発 / SecHack365 Returns 2020
yuki384
0
90
プログラミングとはじめの一歩 / Girls Initiative for CoderDojo
yuki384
1
360
伝わるプレゼン資料を作ろう / Let's Make Simply Presentation Slide
yuki384
2
480
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.2k
Other Decks in Design
See All in Design
AIイラスト生成・編集テクニック紹介
piyo7
2
160
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
130
Ubie Vitalsの取り組み紹介
8845musign
0
590
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
プロダクトデザインは子育て/Product design is parenting
medley
0
510
3 Reasons Why I Got into Design
harukausui
1
130
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.2k
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
810
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
Breaking News on the Web
souvikdg
0
380
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Automating Front-end Workflow
addyosmani
1362
200k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
A designer walks into a library…
pauljervisheath
201
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Speed Design
sergeychernyshev
9
270
The Cult of Friendly URLs
andyhume
75
5.9k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Adopting Sorbet at Scale
ufuk
71
8.8k
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 多様な表現紹介 みはしゆうき