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
570
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.3k
Other Decks in Design
See All in Design
AIで加速するアクセシビリティのこれから
magi1125
3
590
sachi_y_portfolio
sachi337
0
420
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.5k
How to get a Tiger to Tulsa
mcduckyart
0
120
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
840
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
portfolio_YumiYasuda
yum0418
0
310
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
190
Bulletproof Design System with TypeScript
takanorip
6
3.8k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Why Our Code Smells
bkeepers
PRO
337
57k
Become a Pro
speakerdeck
PRO
29
5.4k
KATA
mclloyd
30
14k
Building Adaptive Systems
keathley
43
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Scaling GitHub
holman
461
140k
Bash Introduction
62gerente
613
210k
The Cult of Friendly URLs
andyhume
79
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Docker and Python
trallard
45
3.5k
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 多様な表現紹介 みはしゆうき