Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Joken Web design講習会 #2 CSS
Search
ちげ
December 11, 2018
Programming
0
120
Joken Web design講習会 #2 CSS
奈良高専情報処理研究会で開催した公開講座、第二回のスライド資料
https://hackmd.io/s/rkrO00t2Q
ちげ
December 11, 2018
Tweet
Share
More Decks by ちげ
See All by ちげ
Stol - UNISYS hackathon
chige
0
270
BranCo! 2021 4位 チーム「研究の虫」発表スライド / branco-2021-slide
chige
1
1.7k
Finde neue
chige
0
160
Nuxtはいいぞ2 / nuxtjs is good 2
chige
0
210
よさみなロゴの選び方 / yosami-na-logo-no-erabikata
chige
2
550
夢LT発表スライド / yume-LT
chige
0
230
フォント入門 / intro-font
chige
3
840
Mille Feuille app - HackU2019Osaka | team:forkbomb
chige
1
250
口座に100万振り込まれてから色々変わった話 / kouza_ni_100man
chige
3
1.1k
Other Decks in Programming
See All in Programming
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
270
Enhancing Applications with Accessibility API
kishikawakatsumi
3
970
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
Why 1 + 1 = 2 in Swift?
1plus4
1
250
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
Parallel Socket Communication in Swift
s_shimotori
0
240
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
Laravel標準バリデーションでできること
hmb_ok
2
360
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
Featured
See All Featured
Web development in the modern age
philhawksworth
201
10k
Typedesign – Prime Four
hannesfritz
36
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Building Applications with DynamoDB
mza
88
5.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
A better future with KSS
kneath
230
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
4 Signs Your Business is Dying
shpigford
174
21k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Statistics for Hackers
jakevdp
789
220k
Navigating Team Friction
lara
177
13k
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>
<article> 5 / 23
6 / 23
7 / 23 IBDLNEJPTSLS0U2
8 / 23
<p style=”color:red;”> 赤い文字 </p> 9 / 23
<style> .red-text { color: red; } </style> ~~~~~ <p class=”red-text”>
赤い文字 </p> 10 / 23
<link rel="stylesheet” href="./sample.css"> ~~~~ <p class=”red-text”> 赤い文字 </p> 11 /
23 .red-text { color: red; }
.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
20 / 23
ίί⾣ 21 / 23
22 / 23
23 / 23 ίί⾣