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
420
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
160
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
140
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
290
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
260
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
270
Laravel Boost 超入門
fire_arlo
2
210
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
730
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
420
🔨 小さなビルドシステムを作る
momeemt
4
670
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
670
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Navigating Team Friction
lara
189
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
4 Signs Your Business is Dying
shpigford
184
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GitHub's CSS Performance
jonrohan
1032
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Embracing the Ebb and Flow
colly
87
4.8k
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例② こんにちは