【基本と応用】style属性を用いてHTML要素にCSSを記入する

はじめに

HTML要素にCSSを記入する方法は主に3種類あります。
1つ目はHTMLファイルとは別にCSSファイルを作成し、HTML側からCSSファイルを読み込んでCSSを適用する方法であり、この方法はもっとも一般的です。
2つ目はHTMLのヘッダにCSS要素を記載する方法です。
単一のHTMLにのみCSSを適用する際に最も手間がかからないときにのみ使用するとよいでしょう。
３つ目はstyle属性を用いてHTML要素にCSSを記入する方法です。
この方法はコードが冗長になるうえ、管理の手間が増えます。
ですので、3つ目の方法は基本的に使用しない方がよいのですが、CMSのようなWebサイト構築のための管理システムを利用する場合において、外部ファイルを利用できなかったりヘッダの中身を編集できないことが理由で、3つ目の方法のみ使用可能な場合があります。
この記事ではstyle属性を用いてHTML要素にCSSを記入する方法の基礎と応用について説明します。

対象読者

Webサイト構築のための管理システムを利用して記事を書く方

要素と属性

まずは基本編です。
下記のコードからHTMLの構成について説明します。

HTML

<p align: center>Hello World!</p>

この一文全体を要素と呼び、要素の境界を示すものを要素名やタグと呼びます。
この場合では<p>が開始タグ、</p>を終了タグと呼び、見出しや段落を構成しています。
改行を行うための<br>タグのように、終了タグがないタグもあります。
ゆるく言い換えるとHTMLの要素は<なにかのタグ>と</なにかのタグ>に文字やまた別の要素が挟まれて構成されています。

次に、属性について説明します。
属性は開始タグの中に記載し、要素全体に対して性質を与えることができます。
この例ではalignという属性名に対してcenterという属性値を与えることによって、“文字列”を“中央に配置”するという性質を与えています。

ゆるく言い換えると属性は<なにかのタグ>と</なにかのタグ>に挟まれた要素に対して色や位置、名前のような性質を与えています。

style属性

style属性はタグの中にCSSを記述できる属性です。
次の例ではstyleという属性名に対して"color: blue;"という属性値を与えることによって、“文字列”に対して“文字を青色に変更”するという性質を与えています。

属性値は複数設定することができ、組み合わせることで見出しや段落に対して複雑な性質を与えることができます。
次の例では、“文字列”に対して“文字を青色に変更”するだけでなく、“フォントサイズを30pxに変更”するという性質も与えています。

このように複数の属性値を与える場合は;で区切って次の属性値を書き始めます。
またstyle属性に対して与えたい属性値は"ダブルクォーテーション"で囲まれている必要があります。

:hoverのような疑似クラスは使用不可能

いきなり難しい話になりましたね、ここからが応用編です。
CSSでは擬似クラスと呼ばれる、要素に対して特定の状態を指定できる機能があります。
:hoverは擬似クラスの1つであり、ユーザのマウスポインタが重なった状態になったときに別のCSSを指定できます。
ボタンにカーソルを合わせた際に色が変わるやつはだいたいこの疑似クラスが使用されています。
この機能はstyle属性を用いてHTML要素にCSSを記入する場合には使用できません。
基本的に疑似クラスは外部ファイルやヘッダに書くするものであり、styleタグには書けないからです。
「えっ、じゃあカーソルを合わせたときに色が変わるボタンはつくれないの？」と思われるかもしれませんが、style属性ではなく別の属性を用いることで解決できます。

onmouseover属性とonmouseout属性

要素に対してonmouseover属性とonmouseout属性のそれぞれの属性を与えることでこの問題は解決できます。
ユーザのマウスポインタが重なった状態のときに性質を付与するonmouseover属性と、それ以外のときに性質を付与するonmouseout属性それぞれの属性値に対して、CSSを記載することでこの問題は解決します。
次の例ではカーソルを合わせたときのみ字が黒くなります。

属性値のthisは要素全体を指し、styleは要素の中のstyle属性を、colorはstyle属性の属性値を表しています。
書き方はかなり難しくなりますが、使いこなせると表現の幅がグッと上がります。
読んでいただきありがとうございました🙌