2020-08-20

【HTML & CSS の解説】文字の色、大きさ、種類、高さ、幅、背景の色、タグに名前を付ける。

CSS,HTML,プログラミング

daiki

こんにちは、daiki です。

今回は、Progate で学んだ HTML & CSS を分かりやすく解説しながらアウトプットします。

文字の色、大きさ、種類、高さ、幅、背景の色、タグに名前を付ける。
こちらを解説。

Progate の HTML & CSS は一カ月でカリキュラムを終了できたので、その復習。
ついでに誰かの役に立てればと思います。

そのおかげで、こういったツイートも出来るように。
学べば学ぶほど発信の種類が増えていく。

それはさておき。
HTML & CSS を学んでいきましょう。

文字の色、大きさ、種類、高さ、幅、背景の色、タグに名前を付ける。

こちらを深堀解説😌

HTML & CSS を解説します。


まずは文字の色、大きさ、種類について。
と、その前に HTML と CSS の仕様は理解していますか?

分からない方は調べてから見てくださいね。
ここに書くと長くなるので別記事で書いておきます🙇

文字の色

HTML で書いたものを CSS で色付けします。

HTML のタグ {
  color: 指定の色;
}

こちらが公式。
実際に書いてみます。

まずは HTML

<h1>daikiblog</h1>

このまま表示させると、デフォルトの黒字で文字が表示されます。
ここに赤色の装飾加えます。

では、CSS を書いてみます。

h1 {
  color: red;
}

HTML の h1 に対して color が red という装飾がなされました。
こちらを表示させる。

※Progate から引用しています。以下略

文字が赤色になっていますね。
color 内のコードを変えることによって、様々な色に変えることが可能です。

文字の大きさ

次は文字の大きさを変化させましょう。
大きさは font-size を用います。

まずは公式から。

HTML のタグ {
  font-size: 数値px;
}

color とほぼ一緒ですね。
では、実際に書いていきます。

HTML で変化を分かりやすくするため、二つほど書いておきます。

<h1>daikiblog</h1>
<p>こんにちは daiki です。</p>

では、CSS を書いていきます。

h1 {
  font-size: 60px;
}

こちらを表示させます。

文字が大きくなっています。
px の数値を変えるだけで、大きさを自由に指定することができます。

文字の種類

どんどん進みましょう。
次は文字の種類。

コードは font-family を用います。

HTML のタグ {
  font-family: フォント名;
}

こちらが公式。
フォント名のコードは色々あります。

今回は serif を使用して書いていきます。

<h1>daikiblog</h1>

こちらの HTML を使用します。
では、CSS です。

h1 {
  font-family: serif;
}

こちらを表示させます。
まずは CSS なしのバージョン。

次に serif を装飾したバージョン。

文字が変化していますね。
フォント名を変更することで様々な文字に変化させることができます。

コードは調べたら出てくるので、調べてみてください😌

コンテンツの中身


ここまで進めてもらったら、仕組みは理解できたのではないでしょうか?
基本の公式はどれも同じです。

ただ、指定の単語が変わっているだけですね。

では次に進みます。
コンテンツ内の高さ、幅、背景の色を解説。

※コンテンツというのは h1 全体の要素のことです。
言葉だと伝わりづらいので実際に見てください🙇

背景の色

まずは背景の色を解説します。
背景の色は background-color を用います。

HTML のタグ {
  background-color: 色の指定;
}

こちらが公式。
さっそく、書いていきます。

<h1>daikiblog</h1>

まずは HTML
次に CSS

h1 {
  background-color: red;
}

こちらを表示させます。

h1 で指定している daikiblog の背景が赤色に変わっていればOK。

高さ

次に高さを調整します。
高さは縦の長さと思ってもらえれば、分かると思います。

単語は height を使用します。

HTML のタグ {
  height: 数値px;
}

公式です。
次は実際に書いていきます。

<h1>daikiblog</h1>

HTML はこちらを使用。
では、CSS です。

h1 {
  background-color: red;
  height: 80px;
}

高さを分かりやすくするため背景色も加えています。
こちらを表示。

分かりますかね?
h1 全体の高さが変わりました。

次は幅ですね。
幅は横の長さです。

単語は width を用います。

HTML のタグ {
  width: 数値px;
}

まずは公式。
では、実際に書いていきます。

<h1>daikiblog</h1>

HTML はこちらを使用。
次に CSS

h1 {
  background-color: red;
  width: 80px;
}

こちらを表示させます。

横の長さ分だけ色付けされているのが分かりますか?
これが width ですね。

タグに名前を付ける

+α です。
「タグに名前を付ける」こちらも解説。

タグとは h1 や p の事だというのは理解していると思います。
そこに名前を付けくわえてみます。

<h1 class="name">daikiblog</h1>
<h1>こんにちは daiki です</h1>

HTML のタグに class = “name” という名前を付けました。
これで一部だけ、装飾を加えることが可能になります。

これに CSS で装飾を加えてみます。

.name {
  color: red;
}

表示させます。

name という h1 タグだけが赤色になっています。
これがタグに名前を付けるという事です。

さらに詳しく知りたい方は、別記事で書いているのでそちらをどうぞ。↓

class=”○○○” の単語は自由でもいい。だけど分かりづらいのはダメ。


以上です😌