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

Joken Web design講習会 #2 CSS

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

Joken Web design講習会 #2 CSS

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

Avatar for ちげ

ちげ

December 11, 2018

More Decks by ちげ

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

Other Decks in Programming

See All in Programming
ふつうのFeature Flag実践入門
Avatar for irof irof
8
4.2k
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
270
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
12
4.5k
Datadog LLM Observabilityで実現する 安全なLLM Usage 管理
Avatar for Brown 3150
0
120
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
180
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
810
エンジニア向け会社紹介/Findy Company Profile
Avatar for Findy findyinc
6
350k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
610
フロントエンドとバックエンドで「1文字」を揃えよう
Avatar for てきめん tekimen youkidearitai
PRO
0
760
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
190
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
420
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
310

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
HDC tutorial
Avatar for Michiel Stock michielstock
2
720
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
320
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
430
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
490
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
350
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
150

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 ίί⾣