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
160
Joken Web design講習会 #2 CSS
奈良高専情報処理研究会で開催した公開講座、第二回のスライド資料
https://hackmd.io/s/rkrO00t2Q
ちげ
December 11, 2018
Tweet
Share
More Decks by ちげ
See All by ちげ
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
7
1.2k
Stol - UNISYS hackathon
chige
0
350
BranCo! 2021 4位 チーム「研究の虫」発表スライド / branco-2021-slide
chige
2
2.1k
Finde neue
chige
0
220
Nuxtはいいぞ2 / nuxtjs is good 2
chige
0
270
よさみなロゴの選び方 / yosami-na-logo-no-erabikata
chige
2
660
夢LT発表スライド / yume-LT
chige
0
340
フォント入門 / intro-font
chige
3
1k
Mille Feuille app - HackU2019Osaka | team:forkbomb
chige
1
340
Other Decks in Programming
See All in Programming
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
QA x AIエコシステム段階構築作戦
osu
0
200
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
300
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
270
コーディングエージェント概観(2025/07)
itsuki_t88
0
430
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
280
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.5k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Designing for Performance
lara
610
69k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Invisible Side of Design
smashingmag
301
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Designing Experiences People Love
moore
142
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Balancing Empowerment & Direction
lara
1
500
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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 ίί⾣