Joken Web design講習会 #2 CSS

1 / 23

2 / 23

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

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

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

6 / 23

7 / 23 IBDLNEJPTSLS0U2

8 / 23

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

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

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

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

15 / 23 ͳͲͳͲ p .red-text { /*͜ͷΫϥε͕෇͘ཁૉ͕ɺ Qλάͷதʹ͋Δ৔߹ʹదԠ*/ /*
ʢQλάΛ਌ʹ࣋ͭʣ */ } .red-text,.blue-text { ͲͪΒͷΫϥεͷཁૉʹ΋దԠ }

p.sample-propaty { font-weight: bold; font-size: 30px; text-decoration-line: underline; border: 2px
double red; cursor: pointer; } 16 / 23

width: 100px; height: 100px; margin: 12px; padding: 8px; background: red;
color: #fff; 16 / 20 100px 100px あいうえおかきくけこさしすせそ。 17 / 23

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

19 / 23

20 / 23

ίί⾣ 21 / 23

22 / 23

23 / 23 ίί⾣

Joken Web design講習会 #2 CSS

Joken Web design講習会 #2 CSS

ちげ

More Decks by ちげ

Other Decks in Programming

Featured

Transcript

1 / 23

2 / 23

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

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

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

6 / 23

7 / 23 IBDLNEJPTSLS0U2

8 / 23

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

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

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

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

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

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

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

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

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

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

19 / 23

20 / 23

20 / 23

ίί⾣ 21 / 23

22 / 23

23 / 23 ίί⾣