それでは、背景色変更パーツの作成に取り掛かります。HTMLに書く場所はmainタグ内です。
まず、ページタイトルになるテキストと、ページ説明のテキストを書きます。（下の画像16～17行目）
※見やすいようにスペースを入れていますが、こちらはお好みになります。（例えば14行目とか）

html

<h1>はテキストを入力できるタグです。見出しとして利用します。テキストはお好みで入力します。
h1～h6まであって、h1→h6と文字サイズが変化します。web画面（webブラウザ）はこんな感じです。

webブラウザ表示

デザインは後でやるので、いったんここはこのまま進めます。

また、<main>タグにクラス名を記載しておきます。（上のHTML画像の15行目）
クラス名は、タグ内に「class="○○"」と書いて指定できます。
デザインする際など、要素たちに名前を付けることによって細かく指定できたりします。
名づけ方法は「class」と「id」があります。classは複数利用が可能な名前、idはひとつの要素にしか付けられない名前　という違いがあります。

ここでいったん補足です。入力したものをどうすればwebブラウザで見れるのか、その方法を確認しましょう。 　
VS Codeにコードを書いていき保存する事で、ローカル上で確認することができます。

フォルダに保存している「colorchecker.html」をダブルクリックするとページが表示されます。
※コードを間違えていたりすると表示されません

ただ、これだといちいち開かないといけなくてめんどうです。
VS Codeの拡張機能を使うとすばやく確認できますので、そちらをご紹介。

「Live Server」という拡張機能があります。コードを更新するたびにブラウザページを自動でリロードしてくれる機能になります。

インストールすると、VS Code右下の小さいスペースに、こんな表示が追加されます。
「Go Live」（もしくは「Port:5500」など）と表示された部分をクリックすると、webブラウザを表示してくれます。

こういう感じで、<div>タグを使うことで、デザインを細かく設定できるようになります。

html

<h2>の下に、<div>を追加します。クラス名も記載します。ここではcolor-paletteにしました。
続いて、この<div>タグ内に更に<div>を追加し、こちらのクラス名はcolor-innerとしました。

クラス名はこんなイメージとなります。

color-paletteという箱の中に、更に2個の箱を設置します。
まずは背景色の方のdivの入力を進めます。文字色の方は後ほど。

html

color-inner名の<div>タグ内に、説明文と色変更バーを追加します。
<h4>タグのところですが、バーを動かした時にコードを表示させたいと考えています。この動きはJavaScriptで指定します。
現時点では色々書くと混乱しますので、いったん空欄にして飛ばします。

同様に、下の色変更バーの部分も現時点で書けるところを書いています。
こちらも後ほどJavaScriptで指定しますので、いったん何の機能もないバーを設置します。
<p>は文章入力に利用するタグです。また、<p>タグ内の途中にある<br>は段落の事で、これを入れると文章の途中で段落を入れてくれます。
赤、緑、青のバーをそれぞれ記載します。<input>で色々な部品を設置できます。ここではtype="range"と入力します。
type属性は他にも、textやradio、emailなどが入力できます。

webブラウザ表示

ウェブ画面を確認すると、このようになります。

更に、</p>の下にどんどん追加していきます。

html

<label>タグを使ってみます。このタグ内に<input>でテキストボックスも追加します。
こうすると、webページの「カラーコードを手入力したい～～」のテキスト部分をクリックすると、テキストボックスにカーソルが行くようになります。
ここの名前は「id」で付けます。私はidは基本JavaScriptで使う用にするイメージで進めていますが、CSSはidでも指定できますのでclassを省略する形です。
placeholderはテキストボックスに入力例を入れることができます。うっすら表示されるやつです。
<button>タグはその名の通り、ボタンを設置することができます。
ただ、現時点では何も設定していないので、web上では「ポチッ」となるだけで何も起こりません。

webブラウザ表示

画面はこんな感じです。

いったん、HTMLで背景色変更パーツに必要なものを書き終わりました。デザインに進みます。
HTMLの<main>部分は、現時点ではこんな感じです。

html

cssにも文字コードを指定します。1行目に記載してしまいましょう。HTMLと書き方が若干違います。

css

さて、ここで全体的な設定をしてしまいます。HTMLには、指定していない設定（既定の設定）が存在します。
今書いている最中のページを確認すると、CSSは何も書いていない状態ですが、なにやら余白があるような表示です。

例えば上の画像のh1タグですが、赤い斜線枠で囲んだあたりに余白が自動で付いていそうです。
気にしない場合はこのままでも良いですが、配置バランスを考えた時に「この余白はどこで設定したやつ？」となりがちなので、まずはクリアにしてしまおうかと思います。
余白はmargin、もしくはpaddingで指定できます。この2つの違いですが・・・

例えば、<h1>タグは入力した文字を表示してくれますが、ここには今、見えない設定が隠れています。

何も設定していないので見えないですが、<h1>で書いた文字の周りに枠線（border）が存在しています。
このborderの内側の余白がpadding、外側の余白がmarginになります。

初期値はどこにどのくらいの余白なのか分かりませんので、この余白を「0」にしてしまいます。
ついでにbox-sizingプロパティも追加し、デザインしやすくします。

css

「＊（アスタリスク）」はページ全体という意味です。
cssの書き方ですが、設定したい箇所を入力し、｛｝で囲んでその中にプロパティと呼ばれる設定内容を書き込みます。
＊｛margin: 0;｝で外側の余白をゼロにします。
中のプロパティの書き方は、「プロパティ名：（コロン）　設定値；（セミコロン）　」です。

marginとpaddingは両方とも「0」にします。
border-boxは要素の幅と高さの値に、borderとpaddingを含めますよ、という設定です。

ここで画面を確認すると、余白が無くなってギュッとなったのが分かります。

webブラウザ表示

それでは、ここからこのアプリ用にデザインを進めていきます。（以下、私のセンスで進めていますのでいち参考程度にご確認下さい。自分好みのデザインを試すのも良いかと思います）

css

class名を指定する場合、名前の前に「.（ドット）」を付けます。

まずはmain全体に外側の余白を付けたいので、marginを指定します。
「margin」だけ指定すると、上下左右に余白を付けられます。
単位はpx（ピクセル）で書いていますが、こちらはお好みです。

クラス名の中の個々の要素に指定したい場合、クラス名の後に空白を入れ、個々の要素を追記します。
←.main h1　のように記載すると、main名の中の<h1>にのみ設定できます。
font-sizeは文字サイズ、border-bottomは枠線の設定、max-widthは最大横幅を指定できます。
borderですが、bottomと入力すると下線の設定になります。solidは実線です。（dashedは点線とか、いろいろあります）
3pxは線の太さを指定、あと色も入力できます。
max-widthは画面サイズが大きい場合でも、表示はここまでというサイズを指定できます。

marginやpaddingは、上下左右を個別に記載するとそこだけ余白を追加できます。
topが上、bottomが下、leftが左、rightが右です。
また、「margin: 10px 5px;」みたいに指定が2つの場合、10pxが上下、5pxが左右になります。

webブラウザ表示

画面はこんな感じになりました。

どんどんやります！続いてはcolor-paletteの部分のデザインです。

css

color-palette要素自体をフレックスにします。
flexは横並びにする　という意味です。現時点では特に変化は無いですが、後ほど文字色のパーツを右側に作成予定なので、先に指定しておきます。

color-inner全体の設定はこのようにしてみました。
ここでは余白、横幅、枠線に関して記載しています。
border-radiusは枠線の角に丸みを付けるプロパティです。％とかでも指定できます。
box-shadowはdiv要素に影を付けるプロパティです。
ここでは左右の距離が0、上下の距離が2px（影が下に広がる）、ぼかしの大きさを8pxにし、色を指定しています。
あと、line-heightプロパティを追加して、行間を指定します。
pxでも良いですが、1.5や2.0といった書き方もできます。

webブラウザ表示

画面はこんな感じです。

color-innerの中の部分を細かく設定していきます。

css

<h4>、<p>、<label>の要素の余白や文字サイズを調整します。<h3>は素のままで良さそうなので記載しません。
font-weightは文字の太さを指定するプロパティです。boldで太字にすることができます。

id名の指定は、先頭に「＃」を付けます。
class名と違うのでここが注意点です。
中身の書き方は同じです。

ボタンのデザインも色々いじることが可能です。
「ポチッ」という機能はそのままに、見た目を良い感じに変更します。
border-colorは枠線の色を変更できるプロパティです。
background-colorは背景色を変更するプロパティで、ここでいう背景色はボタンの色ということになります。

webブラウザ表示

画面はこんな感じです。だいぶスッキリしてきたのではないでしょうか！？