HTML/CSS超絶浅い説明

HTML/CSSの超絶浅い説明（10分用）

Transcript

1. HTML/CSSの概要
2. HTML/CSSとは？ スーパー簡単に言うと、WEBページを作るためのプ ログラミング言語みたいなものです。
3. HTML/CSSとは？ HTML → WEBページの構造・内容を作る CSS　 → WEBページを彩る
4. HTML
5. <div> <p>Hello</p> <p>こんにちは</p> </div> HTMLとは？ Hello こんにちは
6. <div> <p>Hello<p> <p>こんにちは</p> </div> HTMLとは？ 常に、 「<HTMLタグ>内容</HTMLタグ>」の形
7. HTMLとは？ Hello こんにちは
8. HTMLタグ - 文字 <p>文字</p> ページに表示する文字
9. HTMLタグ - リンク <a href=”https://homie.co.jp”>こちらへ</a> 飛ばしたいURL ページに表示する文字
10. HTMLタグ - 画像 <img src=”http://example.com/image.png”></img> 画像のURL
11. CSS
12. <div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSの部分 HTMLの中に「style=”CSSの内容”」で記述 CSSとは？
13. <div> <h1>Hello</h1> <p style=”font-size: 24px; color: red;”>こんにちは</p> </div> CSSとは？ styleの中は「プロパティ1：値1；プロパティ2: 値2;」の形で記述
14. CSS - テキストカラー <p style=”color: red;”>赤色の文字</p> <p style=”color: rgb(112, 220, 5);”>緑色の文字</p> カラーコード （red/blueとかでもいいし、rgb(...）どちらでも可）
15. CSS - バックグラウンドカラー <p style=”background-color: red;”>赤色背景</p> カラーコード （red/blueとかでもいいし、rgb(...）どちらでも可）
16. CSS - テキストサイズ <p style=”font-size: 10px;”>10px文字</p> <p style=”font-size: 24px;”>24px文字</p> ※pxはサイズの単位 文字の大きさ
17. CSS - 太字 <p>文字</p> <p style=”font-weight: bold;”>太字</p> 文字の太さ イタリック（italic）なども可
18. CSS - 上下に余白 <p>1番目</p> <p style=”margin-top: 100px;”>2番目(上に空白)</p> <p style=”margin-bottom: 200px;”>3番目(下に空白)</p> <p>4番目</p> 空白の大きさ
19. CSS - テキストサイズ＆カラー <p>文字</p> <p style=”font-size: 200px; color: blue;”>青色200px</p> 文字の大きさ テキストの色
20. <p style=”font-size: 32px; “>Hello</p> <p style=”margin-top: 200px; color: rgb(122, 246, 153);”>こんにちは</p> HTML/CSS例① こんにちは Hello
21. <img src=”https://homie.co.jp/homie.svg”></img> <p style=”font-weight: bold;”>こんにちは</p> HTML/CSS例② こんにちは