スタイルシート(CSS)でpタグの背景色を設定 HTML復習②

今回はスタイルシートを使ってpタグで囲まれた部分の背景色を設定します。

はてなブログでのやり方を説明していきます。

まずはてなブログでCSSを使う場合の一つにhead要素にスタイルを設定していく方法があります。

今回はその方法を使っていきます

ダッシュボード

↓

設定

↓

検索エンジン最適化

↓

headに要素を追加

と移動してそこに記述していきます

試しにpタグのクラスblue1の背景色を青色にしてみましょう。

次のように記述します

<style>

p1.blue1{

background-color;blue;

}

</style>

これで記事中でpタグのblue1というクラスを使うと青色になります

ではいってみよう！

記事中には次のように記述します

<p class="blue1">pタグのblue1クラス内に書かれた部分の背景色がスタイルシートで設定したように青色になります</p>

するとこうなります。

pタグのblue1クラス内に書かれた部分の背景色がスタイルシートで設定したように青色になります

これはできたらめちゃくちゃ楽しいです。おぉ！ってなります笑

今度は水色にしてみましょう

色　skyblueを使った場合

この場合も予めCSSでpタグのskyblueクラスを設定しておきます。

<style>

p.skyblue{

background-color;skyblue;

}

</style>

記事中には次のように記述します。

<p class="skyblue">ここの文字の背景色がskyblueになります</p>

するとこうなります

ここの文字の背景色がskyblueになります