HTML/CSS超絶浅い説明

HTML/CSSの概要

HTML/CSSとは？スーパー簡単に言うと、WEBページを作るためのプログラミング言語みたいなものです。

HTML/CSSとは？ HTML → WEBページの構造・内容を作る CSS　 → WEBページを彩る

<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

<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例② こんにちは

KTD