HTML+CSS Learner

　HTML と CSS を書きながら学んでいくページです。
左側のメニューから内容を選んでください。各項目について、右下にある「Run Pen」を選択すると実行結果を見ることができます。「Run Pen」を実行後、「HTML」または「CSS」タブ下の内容を実際に変更することができます。

単位

　CSS では多くの種類の単位を扱うことができます。主な単位は px, pt, em, rem, % です。
　px や pt はインチ（in）に対しての絶対的な値になります。 72pt = 1in、96px = 1in になります。絶対的な値とは名前の通り絶対変化しない値のことです。文字サイズや要素の幅を px や ptで指定すると、親要素や画面サイズなどほかの要因に変化があっても影響されません。
　em や rem、% は、ある要素に対しての相対的な値になります。em や % はその親要素に対して、rem は html（ルート）要素に対して、大きさが変化します
　絶対的な値と相対的な値、どちらが良いかは考えた方によりますが、画像や要素の幅を扱う場合は px、文字を扱う場合は em や rem 、表や要素の幅を扱う場合は % がよく使われます。
　　他にも CSS で使われる単位はたくさんあります。詳細は「CSS の値と単位」をご覧ください。
　試しに、em、rem、% の違いをみてみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen em&rem by Yu Sekiguchi (@vtmacs003b) on CodePen.

CSSを入力するときの注意点：

CSSは英小文字で

　CSS も HTML と同様に大文字と小文字の区別はされませんが、小文字で書くことが一般的です。ただし、id名やクラス名の大文字と小文字の区別はされるので注意してください。

要素型セレクター

　要素型セレクターは HTML の指定した要素（タブ）に適用されます。
　試しに、要素型セレクターを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen type selector by Yu Sekiguchi (@vtmacs003b) on CodePen.

クラスセレクター

　クラスセレクターは HTML の指定したクラス属性に適用されます。
　１つの HTML 文書内に同じクラスを複数回入れることができます。また、１つの要素に複数のクラスを適用することができます。複数のクラスを入れる場合は半角スペースで区切ります。
　試しに、クラスセレクターを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen class selector by Yu Sekiguchi (@vtmacs003b) on CodePen.

IDセレクター

　IDセレクターは HTML の指定したID属性に適用されます。
　１つの HTML 文書に同じ ID を使うことはできません。また、１つの要素に複数の ID を適用することはできません。
　試しに、IDセレクターを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen id selector by Yu Sekiguchi (@vtmacs003b) on CodePen.

属性セレクター

　属性セレクターは HTML の指定した属性に適用されます。
　詳細は、「属性セレクター（mdn web docs）」をご覧ください。
　試しに、属性セレクターを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen attribute selector by Yu Sekiguchi (@vtmacs003b) on CodePen.

色

　CSS で色を表現するための方法はいくつかあり、そのうち代表的なものはキーワード、16進数、rgb() 関数の３種類あります。
　キーワードは、赤は red、緑は green、青は blue のように言葉で色を指定する方法です。ほとんどのブラウザは X11 カラーに準拠したキーワードに対応しています。
　16進数は、光の三原色である赤（R）緑（G）青（B）を16進数で記述し、その透明度も記述する記法です。16 進数については、以下で説明しています。16 進数の場合は数字の前にシャープ（#）を入れることになっているので注意してください。詳細は <hex-color> をご覧ください。
　rgb() 関数は、光の三原色である赤（R）緑（G）青（B）を 0 から 255 までの 10進数または % で記述し、その透明度もオプションとして記述できる記法です。詳細は rgb() をご覧ください。
　試しに、CSS で色を使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen color by Yu Sekiguchi (@vtmacs003b) on CodePen.

16 進数：

16 進数について

　16 進数は通常使われる 0 ～ 9 までの数字に A ～ F までのアルファベットを加えて数字を表す方法です。10 進数の 0 ～ 16 までとの 16 進数の対応は以下の通りです。

10進数	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16
16進数	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10

　CSS 等で使われる色は赤（R)緑（G）青（B)の 3 色ごとに 2 桁の 16 進数で表します。 2 桁の 16 進数と10 進数の対応表は以下の通りです。

10進数	15	31	47	63	79	95	111	127	143	159	175	191	207	223	239	255
16進数	0F	1F	2F	3F	4F	5F	6F	7F	8F	9F	AF	BF	CF	DF	EF	FF

　また、16 進数で色を表記するときは数字の前にシャープ（#）を入れます。CSS での色表記の場合、#0FAFFF は rbg(15, 175, 255) と同じ色になります。

フォント

　CSS では、フォントを細かく設定することができます。フォントの色は color、フォントのサイズは font-size、フォントの種類は font-family、フォントの太さは font-weight などの設定があります。
　フォント、テキスト装飾についての詳細は、「基本的なテキストとフォントの装飾（mdn web docs）」をご覧ください。　試しに、フォントを変更してみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen font by Yu Sekiguchi (@vtmacs003b) on CodePen.

グラデーション

　グラデーションには、線形グラデーション、放射グラデーション、反復グラデーション（線形と反復それぞれ）、扇形グラデーションがあります。
　細かい文法に関しては、<gradient>（mdn web docs）をご覧ください。　試しに、グラデーションを使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen gradient by Yu Sekiguchi (@vtmacs003b) on CodePen.

罫線（ボーダー）

　罫線を入れるには、border プロパティを使います。border プロパティは上下左右に罫線が引かれます。罫線を上だけに引きたい場合は border-top、下だけに引きたい場合は border-bottom、左だけに引きたい場合は border-left、右だけに引きたい場合は border-right を使うことができます。　試しに、罫線を使ってみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen border by Yu Sekiguchi (@vtmacs003b) on CodePen.

余白

　余白のためのプロパティには、margin と padding があります。margin は border の外側、 padding は border の内側に余白が入ります。
　margin も padding もそれぞれ top、bottom、left、right を付けることで上下左右に余白を入れることができます。
　試しに、余白を入れてみましょう。右下にある「Run Pen」を選択すると実行結果を見ることができます。

See the Pen margin&padding by Yu Sekiguchi (@vtmacs003b) on CodePen.