Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS多様な表現紹介 / 2020 Last LT About CSS

Yuki Mihashi
December 31, 2020
Design
2
160

CSS多様な表現紹介 / 2020 Last LT About CSS

高校生主催の年越しLT大会で発表したものです。

Yuki Mihashi

December 31, 2020
Tweet

More Decks by Yuki Mihashi

See All by Yuki Mihashi
チーム開発におけるデザイナーの役割 / ReDS_CCC_LT
yuki384
1
160
未踏ジュニアでやってよかったことやっておけばよかったこと / mitou jr 2021 boost
yuki384
0
150
Rails Girls に参加した13歳の少女のその後💎 / Rails Girls Gathering Japan
yuki384
2
1.8k
子ども向けプログラミング学習サイト「メクルン」/geekten
yuki384
0
210
子ども向けのプログラミング学習コンテンツを作る楽しさ / CODE-RAVE vol-2
yuki384
1
120
ビジュアルプログラミング学習サイト「メクルン」の開発 / SecHack365 Returns 2020
yuki384
0
100
プログラミングとはじめの一歩 / Girls Initiative for CoderDojo
yuki384
1
380
伝わるプレゼン資料を作ろう / Let's Make Simply Presentation Slide
yuki384
2
510
色の役割、色の素敵な使い方 / Let's Do Color Design
yuki384
7
1.3k

Other Decks in Design

See All in Design
Night Shift (beginning sequence)
cpineda57
0
930
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
600
ネーミングの極意 - その名は体を現していますか？ -
kakukoki
2
400
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
580
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.3k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
570
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
情報設計からのデザインアプローチ ～ユーザーの声を聞くよりも、もっとデータの声を聞け～
securecat
4
2.5k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
410
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
240

Featured

See All Featured
Designing for humans not robots
tammielis
250
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
RailsConf 2023
tenderlove
29
940
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Building an army of robots
kneath
302
44k
Building Applications with DynamoDB
mza
91
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Gamification - CAS2011
davidbonilla
80
5.1k

Transcript

  1. CSS 多様な表現紹介 みはしゆうき 高校生主催の年越しLT大会 2020.12.31

  2. みはしゆうき Twitter: @YukiMihashi N高2年 / Webデザイナー @ YassLab社 nztmの相方 ;)

  3. About CSS Cascading Style Sheetsは、HTML や XML の要 素をどのように修飾するかを指示する仕様の一つ で、World

    Wide Web Consortium がとりまとめ 勧告する。文書の構造と体裁を分離させるという 理念を実現するために提唱されたスタイルシート の具体的な仕様の一つ。（ウィキペディアより） Webサイトの 見た目をつくるやつ！

  4. CSSって幅広い!!

  5. 例えば

  6. 例えば 四角3つならべてみる

  7. 方法1 .cover { display: flex; gap: 10px; } https://codepen.io/yuki384/pen/ExgQLvj

  8. 方法2 .cover { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:

    10px; } https://codepen.io/yuki384/pen/ExgQLvj

  9. 方法3 .cover { font-size: 0; letter-spacing: 10px; } .cover div

    { display: inline-block; } https://codepen.io/yuki384/pen/ExgQLvj

  10. 方法4 .cover div { float: left; } .cover div:not(:last-child) {

    margin-right: 10px; } https://codepen.io/yuki384/pen/ExgQLvj

  11. めっちゃいろいろ方法ある

  12. こんなこともできちゃう

  13. モーダルウィンドウ

  14. ハンバーガーメニュー

  15. アニメーション

  16. たくさん フレームワークも あるけれど

  17. CSS たのしいです！

  18. CSS 多様な表現紹介 みはしゆうき