HTMLで「背景色を変える」「文字色を変える」コードを学んでみた

背景色と文字色を変える

HTMLで、「背景色」・「文字色」が変わるコードを学んだので、記事にしています。

本記事では、プラグインやWordPressの自動装飾を使わずに、WordPressのコードエディターでコードを書いています。

投稿画面右上のコードエディターを使います。

コードエディターを使う

たとえばこんな感じで、背景色を変えます。

背景色を変えています!

文字色を変えるとこんな感じ。

文字色を変えています!

私は、プログラミングを学習中。ドットインストール#30で学んだ内容でコードを書いてみました。

(※なお、この記事で紹介するHTMLで背景色を変えたり、文字色を変えたりすることは、「HTML5では非推奨」です。

HTML5では、文書の内容はHTMLで記述し、CSSで装飾に関する記述をすることが強く推奨されています。

コードの利用にはご注意ください。)

以下、手順を解説していきます。

HTMLで背景色を変えるコード

HTMLで背景色を変える

背景色を変えるコードはこれ。

<div style="background: pink;">背景色を変えています!</div>

divタグは、指定した範囲のスタイルを変えたいときに使います。

divタグの中は、style属性を使って、値をbackground: pink;としています。

もちろん色は、いろいろ変えられる。

green

背景色を変えています!
blue
背景色を変えています!
yellow
背景色を変えています!
orange
背景色を変えています!

divタグとstyle属性について、ちょっと勉強になりました。

HTMLで文字色を変えるコード

文字色を変えるコードは、これ。

<span style="color: red;">文字色を変えています!</span>

spanタグは、文中の一部分のみのスタイルを変えるときに使います。

style属性を使って、値をcolor: red;としています。

この文字色も、いろんな色に変えることができます。

greenです。

文字色を変えています!

blueです。

文字色を変えています!

一部の文字色をyellowにしてみました。

文字色を変えています!

これも、一部の文字色をorangeにしています。

文字色を変えています!

こんな感じで、spanタグは、一部分のスタイルを変えることができます。

スタイルを変えるときはCSSを使うのですが、HTMLでも上記のような感じでスタイル変更できることが分かりました。

ドットインストール#30では、動画で解説しています。よければ参考にしてみてください。

以上となります。では!