ProgateでHTML&CSSを勉強してみた③<色・大きさ・背景色指定>

こんにちは。Kazu(@bs_0318)です!

これまでHTMLを使い、文字を表示する方法を教えてきましたが、それだけでは見栄えが良くありません

ということで、今回はCSSを使って、文字の色・大きさ、背景色を指定する方法を書いていきます。

ではまずは、CSSとは何なのか話していきましょう。

 

CSSとは?

CSS・・・ウェブページのスタイルを指定するための言語。HTMLと組み合わせて使用する。
HTMLで書いた要素を装飾することができる。

これだけで説明は十分かと思います。

HTMLは「文字を表示する役割」、CSSは「文字を装飾する役割」があることだけ、しっかりと覚えておきましょう。

 

色の指定

HTMLで

<h1>Progateへようこそ</h1>

と打ってみます。そうすると次のように表示されます。

これは前回までに学習しましたね。

ですが、これだと黒字で味気がないですよね。色を赤色に変えてみましょう。

コードは以下のとおりです。

h1{ color:red ;}

まずは、装飾を加えたいタグを書きます。この場合は<h1>ですね。
そしてその後ろに{(かっこ)color:(コロン)を書きます。
これで色指定の準備はできました。
最後は、指定したい色を書き、;(セミコロン)とかっこで閉じます。
今回は、「red」と書きましたが、「#ff0000」のような文字列でも色を指定することができます。
実際、文字列で色を指定するほうが一般的です。

実際に打ってみます。

そうすると・・・

赤色に変更されましたね。

このように、簡単に色を指定することができます。

 

大きさの指定

次に、文字の大きさの指定についてです。

仕組みは、先ほどの色指定とほぼ同じです。以下のように指定します。

h1{font-size:100px;}

先ほど同様、装飾したいタグとかっこを打ちます。
そしてその後ろにfont-size◯pxを書きます。pxは大きさの単位で、前に「100」のように数字を置くことで、効果を成します。

実際に打ってみます。

そうすると・・・

 

 

先ほどよりも文字が大きくなりましたね。

 

背景色の指定

最後に、背景色の指定についてですが、先ほどまでの2つとこちらも同じ仕組みです。

以下のように書きます。

h1{background-color:#dddd}

最初に書いた、色の指定ではcolorのみでしたが、背景色ということで、backgroundを付けます。

あとは、同じです。

実際に打ってみます。

するとこのように反映されます。

灰色の背景色が付きましたね。

 

まとめ

以上色の付け方、文字の大きさの指定について書いてきました。

HTMLをCSSで装飾することで、一気に見栄えが良くなりましたよね?

他にも装飾の方法はたくさんあるので、少しずつご紹介していきたいと思います。

今回も最後までご覧いただき、ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です