初心者がゼロから始める【CSS】プログラミング【学習9日目】背景色をいじってみよう

こんにちは、ryomaです。

今回は文字の背景色をCSSを使って変えてみたいと思います。
CSSは目に見えて分かる部分を変えることができるので、学習していてたのしいのですね！

それではさっそくいってみましょう

CSSを使って文字の背景色を変えてみよう

まずは外部参照を用意します。
外部参照については、以前の『外部参照を使ったCSS』という記事でまとめていますのでよかったらごらんください。

まずはh1タグとh2タグで文字を入れていきます。

ブラウザ画面に表示していきます。

まだCSSで装飾していないので通常の表記です。それではここから背景色を設定してみたいと思います。

h2タグに背景色を付けてブラウザ表示してみます。

青い背景色が入りましたね！

CSSを使って文字枠を追加してみよう

上記のコードを追加します。

黄色い枠で囲うことができたのできました。

CSSを使って文字の色を変えてみよう

先ほどの『border-width: 10px;』の下に上記のコードを追加してブラウザ表示します。

文字を白く表示することができました。CSSは学べば学ぶほど目に見えて変化を楽しめるので、かなり面白いですね。

CSSを使ってページの背景色を変えてみよう

bodyタグの部分にコードを追加しましたので、ブラウザで見ていきます。

全体の背景色を変えることが出来ました。カラーコードはMDNのページを覗いてもらえるとわかりやすいかと思いますのでリンクを入れておきます。

MDN web docs moz://a

今回はCSSを使って文字色や背景色を変更してみました。

改めて感じたことは、CSSを学習することでかなり自由に装飾を行うことが出来ると感じ、もっと理解して自分の考えていることを『形』として表現してみたいですね！

HTMLとCSSを学ぶだけでも自分でHPやブログなどを作る楽しみがふえるのではないでしょうか？