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

Joken Web design講習会 #2 CSS

Avatar for ちげ ちげ
December 11, 2018
Programming
0
160

Joken Web design講習会 #2 CSS

奈良高専情報処理研究会で開催した公開講座、第二回のスライド資料
https://hackmd.io/s/rkrO00t2Q

Avatar for ちげ

ちげ

December 11, 2018
Tweet

More Decks by ちげ

See All by ちげ
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
Avatar for ちげ chige
7
1.3k
Stol - UNISYS hackathon
Avatar for ちげ chige
0
350
BranCo! 2021 4位 チーム「研究の虫」発表スライド / branco-2021-slide
Avatar for ちげ chige
2
2.2k
Finde neue
Avatar for ちげ chige
0
230
Nuxtはいいぞ2 / nuxtjs is good 2
Avatar for ちげ chige
0
280
よさみなロゴの選び方 / yosami-na-logo-no-erabikata
Avatar for ちげ chige
2
670
夢LT発表スライド / yume-LT
Avatar for ちげ chige
0
350
フォント入門 / intro-font
Avatar for ちげ chige
3
1k
Mille Feuille app - HackU2019Osaka | team:forkbomb
Avatar for ちげ chige
1
340

Other Decks in Programming

See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
Avatar for YAMAOKA Hiroyuki hiro_y
0
170
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
400
その面倒な作業、「Dart」にやらせませんか？ Flutter開発者のための業務効率化
Avatar for YomEngine yordgenome03
1
130
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
110
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
160
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
140
大規模アプリのDIフレームワーク刷新戦略 ～過去最大規模の並行開発を止めずにアプリ全体に導入するまで～
Avatar for GO Inc. dev mot_techtalk
1
450
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
340
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
830
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
160
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
1k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
12
900
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
KATA
Avatar for Megan Lloyd mclloyd
32
15k

Transcript

  1. 1 / 23

  2. 2 / 23

  3. <img src=”logo.png” alt=”ロゴ”> <h1> Joken公式サイト </h1> 3 / 23

  4. </html> </body> </head> ⾢ ⾢ <!DOCTYPE html> 4 / 23

  5. </body> </header> </section> </section> </section> </footer> </main> </head> <nav> <menu>

    <article> 5 / 23

  6. 6 / 23

  7. 7 / 23 IBDLNEJPTSLS0U2

  8. 8 / 23

  9. <p style=”color:red;”> 赤い文字 </p> 9 / 23

  10. <style> .red-text { color: red; } </style> ~~~~~ <p class=”red-text”>

    赤い文字 </p> 10 / 23

  11. <link rel="stylesheet” href="./sample.css"> ~~~~ <p class=”red-text”> 赤い文字 </p> 11 /

    23 .red-text { color: red; }

  12. .red-text { color: red; } セレクタ { プロパティ: 値; }

    12 / 23

  13. 13 / 23 ʮ$44ϑΝΠϧͷࢦఆͷ࢓ํʯΛνΣ οΫ ⾢͜͜ΛΫϦοΫͯ͠ɺ

  14. 14 / 23 h1 {/*IλάͷཁૉʹదԠ*/} p {/*QλάͷཁૉʹదԠ*/} .red-text {/*͜ͷΫϥε͕෇͍͍ͯΔཁૉʹదԠ*/} p.red-text

    {/*Qλά͜ͷΫϥε͕෇͍͍ͯΔཁૉ*/} h1.red-text {/*Iλά͜ͷΫϥε͕෇͍͍ͯΔཁૉ*/}

  15. 15 / 23 ͳͲͳͲ p .red-text { /*͜ͷΫϥε͕෇͘ཁૉ͕ɺ Qλάͷதʹ͋Δ৔߹ʹదԠ*/ /*

    ʢQλάΛ਌ʹ࣋ͭʣ */ } .red-text,.blue-text {  ͲͪΒͷΫϥεͷཁૉʹ΋దԠ  }

  16. p.sample-propaty { font-weight: bold; font-size: 30px; text-decoration-line: underline; border: 2px

    double red; cursor: pointer; } 16 / 23

  17. width: 100px; height: 100px; margin: 12px; padding: 8px; background: red;

    color: #fff; 16 / 20 100px 100px あいうえお かきくけこ さしすせ そ。 17 / 23

  18. width: 100px; height: 100px; margin: 12px; padding: 8px; background: red;

    color: #fff; 16 / 20 12px 8px あいうえお かきくけこ さしすせ そ。 18 / 23

  19. 19 / 23

  20. 20 / 23

  21. 20 / 23

  22. ίί⾣ 21 / 23

  23. 22 / 23

  24. 23 / 23 ίί⾣