HTML&CSS プログラミング

【HTML&CSS】要素の幅・高さ・背景の色の変え方とclassの使い方

投稿日:

こんにちは新札幌周辺情報です。今回は要素の幅・高さ・背景色の変え方とclassの使い方について学びました。要素一つ一つにclassをつけていくことで、細かい設定ができるようになります。

要素の幅の変え方

width:○○px;で要素の幅を設定できます。上の写真は<img>タグを横幅1000px位にしてみました。

要素の高さの変え方

高さの設定もできます。height:○○px;と入力します。450pxに設定してみました。ちょっと潰れた感じになってしまいました。

要素の背景色の変え方

文字の背景色も変えることができるようです。background-color:○○;で設定できます。○○のところに任意の色を入力します。今回は背景の色を黄色に変えてみました。

スポンサーリンク

classを使って要素に名前をつける

要素に名前をつけることで要素ごとの細かい設定を変えていくことができるみたいです。上記写真は<h2>タグの文章が2つ並んでいます。h2 color:red;と設定すると上も下も赤い文字になってしまします。そこでh2タグにclassをつかって別々の設定ができるようにしました。

<h2>の中にclass="○○"と入力します。"を付け忘れに注意が必要です。今回はそれぞれclassにredとblueという名前をつけました。

その後cssで色などを変えていきます。先ほど設定したclassの名前を使っていきますが、名前の先端に.(ドット)を付けなければいけないらしいです。

今回覚えたことのまとめ

widthを使って要素の幅を変えることができる。

heightを使って要素の高さを変えることができる。

background-colorを使って要素の背景色を変えることができる。

classを設定して同じ種類のタグでも別々な設定をすることができる。

※cssで.(ドット)の付け忘れに注意する。

スポンサーリンク

-HTML&CSS, プログラミング

Copyright© 新札幌周辺情報 , 2020 All Rights Reserved Powered by STINGER.