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
KTD
December 24, 2024
Programming
0
450
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
30k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
240
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
明日から始めるリファクタリング
ryounasso
0
130
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
100
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Six and a half ridiculous things to do with Quarkus
hollycummins
0
160
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
690
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
810
XP, Testing and ninja testing ZOZ5
m_seki
3
610
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Code Reviewing Like a Champion
maltzj
525
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Writing Fast Ruby
sferik
629
62k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
615
210k
Practical Orchestrator
shlominoach
190
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Facilitating Awesome Meetings
lara
56
6.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
HTML/CSSの概要
HTML/CSSとは? スーパー簡単に言うと、WEBページを作るためのプ ログラミング言語みたいなものです。
HTML/CSSとは? HTML → WEBページの構造・内容を作る CSS → WEBページを彩る
HTML
<div> <p>Hello</p> <p>こんにちは</p> </div> HTMLとは? Hello こんにちは
<div> <p>Hello<p> <p>こんにちは</p> </div> HTMLとは? 常に、 「<HTMLタグ>内容</HTMLタグ>」の形
HTMLとは? Hello こんにちは
HTMLタグ - 文字 <p>文字</p> ページに表示する文字
HTMLタグ - リンク <a href=”https://homie.co.jp”>こちらへ</a> 飛ばしたいURL ページに表示する文字
HTMLタグ - 画像 <img src=”http://example.com/image.png”></img> 画像のURL
CSS
<div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSの部分 HTMLの中に「style=”CSSの内容”」で記述
CSSとは?
<div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSとは? styleの中は「プロパティ1:値1;プロパティ2:
値2;」の形で記述
CSS - テキストカラー <p style=”color: red;”>赤色の文字</p> <p style=”color: rgb(112, 220,
5);”>緑色の文字</p> カラーコード (red/blueとかでもいいし、rgb(...)どちらでも可)
CSS - バックグラウンドカラー <p style=”background-color: red;”>赤色背景</p> カラーコード (red/blueとかでもいいし、rgb(...)どちらでも可)
CSS - テキストサイズ <p style=”font-size: 10px;”>10px文字</p> <p style=”font-size: 24px;”>24px文字</p> ※pxはサイズの単位
文字の大きさ
CSS - 太字 <p>文字</p> <p style=”font-weight: bold;”>太字</p> 文字の太さ イタリック(italic)なども可
CSS - 上下に余白 <p>1番目</p> <p style=”margin-top: 100px;”>2番目(上に空白)</p> <p style=”margin-bottom: 200px;”>3番目(下に空白)</p>
<p>4番目</p> 空白の大きさ
CSS - テキストサイズ&カラー <p>文字</p> <p style=”font-size: 200px; color: blue;”>青色200px</p> 文字の大きさ
テキストの色
<p style=”font-size: 32px; “>Hello</p> <p style=”margin-top: 200px; color: rgb(122, 246,
153);”>こんにちは</p> HTML/CSS例① こんにちは Hello
<img src=”https://homie.co.jp/homie.svg”></img> <p style=”font-weight: bold;”>こんにちは</p> HTML/CSS例② こんにちは