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
440
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
230
Model Pollution
hschwentner
1
180
止められない医療アプリ、そっと Swift 6 へ
medley
1
100
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
670
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
920
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
710
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
440
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
230
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
740
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
390
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
BBQ
matthewcrist
89
9.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Designing Experiences People Love
moore
142
24k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Thoughts on Productivity
jonyablonski
70
4.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例② こんにちは