$30 off During Our Annual Pro Sale. View Details »
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
390
Git勉強しよう会 #2
okutani_t
0
700
約3年間WordPressで運用したブログで使い倒したプラグイン紹介
okutani_t
1
480
年末商戦に向けてCSとエンジニア間で取り組んだこと 〜Last Winter〜
okutani_t
0
370
フリーランスのWebエンジニアが月100万円稼ぐまでに読んだ参考書7選
okutani_t
0
190
Git勉強しよう会 #1
okutani_t
0
560
ブログ運営から学ぶ 『読まれる記事』とバズの話
okutani_t
0
81
Other Decks in Programming
See All in Programming
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
150
ゲームの物理 剛体編
fadis
0
350
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.5k
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
0
280
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
230
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
130
関数実行の裏側では何が起きているのか?
minop1205
1
700
Your Architecture as a Crime Scene?Forensic Analysis
manfredsteyer
PRO
0
100
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
ayumu_yamaguchi
1
120
愛される翻訳の秘訣
kishikawakatsumi
3
330
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
130
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
11
11k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
230k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Building an army of robots
kneath
306
46k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
A better future with KSS
kneath
240
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
[SF Ruby Conf 2025] Rails X
palkan
0
530
A designer walks into a library…
pauljervisheath
210
24k
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Ͱʂ ຊ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ