HTMLとCSSの旅(6)

背景の色を変えてみる

早速コードみていきましょう！

HTML

<p>テキスト</p>

CSS

p {
   background-color: green;
}

これを実行すると. . .

テキスト

と背景に色がつきました。

「background-color: 色;」と指定すればできます。もう簡単ですね笑

横幅と高さを変えてみる

今背景に色がつきましたけど、右側に多くの余白がありますよね。

これを変えてみようと思います。

HTML

<p>テキスト</p>

CSS

p {
   background-color: green;
   width: 100px;
   height: 20px;
}

これを実行すると. . .

テキスト

バランスは悪いですがこんな感じに横幅と高さを変えることができました。

「width: 横幅;」「height: 高さ;」と指定することによってできます。

背景の色だけでなく写真などものこれによって大きさを変えることができます。

まだ写真の載せ方は紹介していないですが、めちゃくちゃ簡単です。

タグに名前をつけてみる

前の前のブログで紹介した通り

#HTML
<h4>HTML</h4>
<h4>CSS</h4>

#CSS
h4 {
   color: red;
}

こんなコードを実行したら. . .

HTML

CSS

両方とも色が変わってしまう。

任意の場所だけ変える時はどうすればいいか。それを前の前のブログで保留にしていたのですが、今回はそれについて書きたいと思います

そのためにはclassというものを使います。

実際にコードを見てみましょう。

HTML

<h4 class="one">HTML</h4>
<h4 class="two">CSS</h4>

CSS

.one {
   color: red;
}
.two {
   color: blue;
}

これを実行すると. . .

HTML

CSS

できましたね。class使うことによって、それぞれの要素を識別し、それぞれにCSSを適用することができました。

注意点なんですが、CSSでclassを指定して書く際、「.class名 { 〜」とドットを忘れないようにしてください。