Joken Web design講習会 #2 CSS

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

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