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
410
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
令和最新版手のひらコンピュータ
koba789
14
8k
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
660
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.6k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.3k
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Featured
See All Featured
Docker and Python
trallard
45
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Embracing the Ebb and Flow
colly
87
4.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
For a Future-Friendly Web
brad_frost
179
9.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
4 Signs Your Business is Dying
shpigford
184
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
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例② こんにちは