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
ブロガー勉強会〜HTML+CSSの超基礎編〜
Search
okutani
November 22, 2015
Programming
0
1.5k
ブロガー勉強会〜HTML+CSSの超基礎編〜
ブロガーのためのHTML+CSSの勉強会資料
okutani
November 22, 2015
Tweet
Share
More Decks by okutani
See All by okutani
Webエンジニアが 副業・フリーランスで活躍するために知っておくべき10のこと
okutani_t
1
310
Git勉強しよう会 #3
okutani_t
0
380
Git勉強しよう会 #2
okutani_t
0
690
約3年間WordPressで運用したブログで使い倒したプラグイン紹介
okutani_t
1
470
年末商戦に向けてCSとエンジニア間で取り組んだこと 〜Last Winter〜
okutani_t
0
360
フリーランスのWebエンジニアが月100万円稼ぐまでに読んだ参考書7選
okutani_t
0
180
Git勉強しよう会 #1
okutani_t
0
540
ブログ運営から学ぶ 『読まれる記事』とバズの話
okutani_t
0
77
Other Decks in Programming
See All in Programming
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Kiroで始めるAI-DLC
kaonash
2
630
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
RDoc meets YARD
okuramasafumi
4
170
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
130
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
780
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Writing Fast Ruby
sferik
628
62k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Site-Speed That Sticks
csswizardry
10
820
A Tale of Four Properties
chriscoyier
160
23k
The Cult of Friendly URLs
andyhume
79
6.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Speed Design
sergeychernyshev
32
1.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
ϒϩΨʔษڧձ ʙ)5.- $44ͷجૅฤʙ
ࣗݾհ ✤PLVUBOJ wࡀ wϒϩάWEFFQӡӦ wࣄͰ)5.-ͱ͔1)1ͱ͔ wझຯ٢ࣉ८Γ
ࠓͷͳ͕Ε ᶃ8FCαΠτͷ͘͠Έ ᶄ)5.-ʜ$44ʜ ͬͯͳʹ ᶅϒϩάαΠτΛͭͬͯ͘ΈΑ͏
ΞΠεϒϨΠΫ͍ͨΉʂ
ΞΠεϒϨΠΫ ͙Β͍ ᶃ͔ΜͨΜͳࣗݾհ ᶄ͜ΜͳϒϩάͬͯΔ PSΓ͍ͨ ᶅ࠷ۙ͏Ε͔ͬͨ͠ɾͨͷ͔ͬͨ͜͠ͱ
ᶃ WebαΠτͷ͘͠Έ
8FCαΠτ͕ݟ͑Δ͘͠Έ
8FCαΠτ͕ݟ͑Δ͘͠Έ 8FCαΠτΛ࡞Δ
8FCαΠτ͕ݟ͑Δ͘͠Έ
8FCαΠτ͕ݟ͑Δ͘͠Έ Πϯλʔωοτ্ Ξοϓϩʔυ
8FCαΠτ͕ݟ͑Δ͘͠Έ Πϯλʔωοτ্ Ξοϓϩʔυ αʔόʔ
8FCαΠτ͕ݟ͑Δ͘͠Έ
8FCαΠτ͕ݟ͑Δ͘͠Έ 8FCαΠτ͕ΈΕΔ ͓ΘΓ
ᶄ HTMLͱCSS
)5.- ✴)ZQFS5FYU.BSLVQ-BOHVBHF ✴8FCαΠτͷʰߏʱΛද͢ ✴ίϯϐϡʔλ͕ཧղͰ͖Δ ✴จࣈͱ͔ը૾ͱ͔Ϧετͱ͔ʜ
)5.- ✴)ZQFS5FYU.BSLVQ-BOHVBHF ✴8FCαΠτͷʰߏʱΛද͢ ✴ίϯϐϡʔλ͕ཧղͰ͖Δ ✴จࣈͱ͔ը૾ͱ͔Ϧετͱ͔ʜ ࠓΔͷ )5.-
$44 ✴$BTDBEJOH4UZMF4IFFUT ✴8FCαΠτͷʰݟͨʱΛܾΊΔ ✴จࣈͷ৭ɺӨΛ͚ͭͨΓʜ
$44 ✴$BTDBEJOH4UZMF4IFFUT ✴8FCαΠτͷʰݟͨʱΛܾΊΔ ✴จࣈͷ৭ɺӨΛ͚ͭͨΓʜ ࠓΔͷ $44
ͨͱ͑
)5.-ͱ$44
CSS͕ແ͍ͱ…ʁ
)5.-ͱ$44
)5.-ͱ$44
)5.-ͱ$44 ݟ่͕ͨΕͯ͠·͏
ٯʹɺࠓͬͨͷ͕ ʮHTMLʯͱ͍͏͜ͱ (+JavaScriptͳͲ)
͏͢͜͠ৄ͍͠આ໌ ↓ ษڧձ༻ࢿྉ+ϚχϡΞϧ
ᶅ ϒϩάαΠτΛͭͬͯ͘ΈΑ͏
ϩοΫΫϥΠϛϯά
͔ͬͯΒ ֮͑Δ΄͏͕ ͍֮͑͢
ԿࣄͬͯΈΔ (ཧղ͋ͱͰOK)
ϒϩάαΠτ࡞ ͜ͷαΠτΛ ͔Βͭͬͯ͘Έ·͠ΐ͏
αϯϓϧαΠτΛ֬ೝ ษڧձ༻ࢿྉࢀর
JOEFYIUNMΛΤσΟλͰ։͍ͯ࡞ۀʂ
ଓ͖WebߨٛͰ
WordPressͰHTMLΛ ॻ͘ʹ… ↓ DEMO
Կ͔͋Γ·ͨ͠ΒWebͰʂ ຊ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ