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
220
HTML/CSS超絶浅い説明
HTML/CSSの超絶浅い説明(10分用)
KTD
December 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
ARA Ansible for the teams
kksat
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
110
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
AHC041解説
terryu16
0
590
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
590
Writing documentation can be fun with plugin system
okuramasafumi
0
120
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
340
Lottieアニメーションをカスタマイズしてみた
tahia910
0
110
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
技術を根付かせる / How to make technology take root
kubode
1
230
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Facilitating Awesome Meetings
lara
51
6.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
604
68k
A designer walks into a library…
pauljervisheath
205
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Rails Girls Zürich Keynote
gr2m
94
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Being A Developer After 40
akosma
89
590k
The Language of Interfaces
destraynor
156
24k
The Invisible Side of Design
smashingmag
299
50k
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例② こんにちは