【HTML】要素とスタイルの整理

2023年6月10日
2024年6月30日
ITログ, WordPress
css, HTML

WordPress

当ブログはWordPressのテーマである「THE THOR」のデザイン着せ替え機能で「デモサイト03」をベースに構築しています。

ほぼカスタマイズせずに使っていますが、要素の色やサイズなどのスタイルを若干変更することもあります。そこでHTML（HyperText Markup Language）における要素とスタイルの取り扱いについて備忘録的に整理してみました。

1 用語の整理
2 要素とタグの基本
- 2.1 要素の構成
- 2.2 属性と属性値
3 ブロック要素とインライン要素
- 3.1 ブロックを構成し改行を伴う要素
- 3.2 テキスト行の中で使用され改行を伴わない要素
4 要素のスタイル
5 ブロック要素を構成する主なプロパティ
6 おわりに

用語の整理

まずはHTMLで要素を取り扱う際の基本的な用語について整理します。

要素　タグとそのタグで囲まれた内容の全ての部分
タグ　内容に何らかの意味を与える不等号（< >）で囲まれている記号
属性　タグの形状や働きを決める補足情報
属性値　属性の設定値
CSS　要素のスタイルやレイアウトを指定するためのスタイルシート言語
セレクター　要素を特定するためのパターンや条件
プロパティ　要素に適用するスタイルの特性や属性

要素とタグの基本

要素の構成

要素は、タグとそのタグで囲まれた内容の全ての部分を指します。

タグは、予約された語句（タグ名）を不等号（< >）で囲んだ文字列で、開始タグと終了タグで内容を囲み要素に意味を与えます。

終了タグにはタグ名の前にスラッシュ「/」が入ります。なお、終了タグを省略して良いタグや終了タグ自体存在しないタグもあります。

終了タグを必要とする主なタグ　<div> <h2> <a> <ul> など
終了タグを省略してよい主なタグ　<p> <li> <tr> <td> など
終了タグが存在しない主なタグ　<br> <hr> <img> など

また、タグは配置順序や役割など類似のルールを持つカテゴリーに分類されています(コンテンツモデル)。コンテンツモデルの詳細は、WHATWG が策定した標準仕様の日本語訳である以下のサイトを参照するとよろしいのではないかと思います。

HTML Living Standard 日本語訳

属性と属性値

さらに、タグにはその働きを決めるための補足情報である属性と属性値を付加することができます。付加することができる属性はタグの種類によって異なります。

＊このaタグのhref属性は”https://firmcues.com”へのリンクを指定しています。
＊target属性の”_blank”はリンクを新しいウィンドウやタブで開くことを指定しています。

id属性とclass属性の使用例

<div id="myDiv" class="container">
  <!-- id属性は要素に一意の識別子（myDiv）を与えます。 -->
  <!-- class属性は要素を特定のクラス（container）に属するものとして分類します。 -->
</div>

src属性とalt属性の使用例

<img src="path/to/image.jpg" alt="代替テキスト">
<!-- src属性は画像ファイルのパスまたはURLを指定します。
<!-- この属性によって指定されたパスまたはURLから読み込まれます。 -->
<!-- alt属性は、画像が表示されない場合や読み込みに失敗した場合に代替テキストを提供します。 -->

width属性とheight属性の使用例

<img src="path/to/image.jpg" alt="代替テキスト" width="300" height="200">
<!-- width属性とheight属性によって、画像の幅を300ピクセル、高さを200ピクセルに設定しています。 -->

これらの例は一般的な使用例であり、実際のHTMLでは他の属性やさまざまな要素と組み合わせて使用します。

ブロック要素とインライン要素

要素には、ブロックを構成し改行を伴う要素と、テキスト行の中で使用され改行を伴わない要素の二つの主な種類があります。

ブロックを構成し改行を伴う要素

ブロック要素ともいわれます。主に以下の特徴を持つ要素です。

通常、新しい行から始まり、要素の前後に改行が挿入されます。
幅の100%をデフォルトで持ち、親要素の幅いっぱいを占めます。
他のブロック要素やインライン要素を内包することができます。
主な要素：<div> <p> <h1>～<h6> <ul> <li> など

テキスト行の中で使用され改行を伴わない要素

インライン要素ともいわれます。主に以下の特徴を持つ要素です。

通常、テキストの中に挿入され、テキストの一部として扱われます。
改行は自動的に挿入されません。
幅や高さは内容に合わせて自動的に調整されます。
ブロック要素を内包することはできませんが、他のインライン要素は内包できます。
主な要素：<span> <a> <img> <strong> <input> など

要素のスタイル

HTMLのスタイルは、主にCSS（Cascading Style Sheets）を使用して適用します。CSSは、セレクタとプロパティを使用してHTMLの各要素に対してスタイルを指定し、それらの要素の外観やレイアウトを制御することができます。HTMLでスタイルを指定するためには主に三つの方法があります。

インラインスタイル
スタイル要素
外部スタイルシート

セレクタとプロパティ

セレクタは、要素を選択するためのパターンや条件を定義します。セレクタは要素の種類、クラス、ID、属性などを指定し、スタイルを適用する要素を選択します。

プロパティは、選択された要素に適用されるスタイルの特性や属性を指定します。色やフォント、サイズ、余白など、要素の外観やレイアウトに関する様々なスタイルの詳細を指定するために使用します。

セレクタとプロパティは組み合わせて要素のスタイルを指定します。セレクタで要素を選択し、選択された要素に対してプロパティと値の組み合わせを指定することで、要素のスタイルを具体化します。

スタイルの指定方法①「インラインスタイル」

HTML要素のstyle属性を使用して直接スタイルを指定します。この方法は特定の要素に対してのみスタイルを適用したい場合に便利です。ただし、スタイルが個々の要素に直接記述されるため、変更の際に手間がかかることがあります。例えば、以下のように要素内でスタイルを指定します。

<p style="color: red; font-size: 18px;">これは赤色でフォントサイズが18ピクセルの段落です。</p>

「インラインスタイル」では、HTML要素自体がセレクタとなります。例えば、<p>要素にスタイルを指定する場合、<p>がセレクタとなります。また、要素内のstyle属性を使用して直接スタイルを指定します。

上の例では、colorプロパティを用いてテキストの色を、font-sizeプロパティを用いてフォントサイズを指定しています。

スタイルの指定方法②「スタイル要素」

style要素を使用してHTML内にスタイルを定義します。この方法では、HTML内の特定の要素に適用されるスタイルを指定することができます。style要素はheadセクション内に配置されます。

例えば、以下のように以下のようにstyle要素を使用してスタイルを定義します。

<html>
<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <p>これは赤色でフォントサイズが18ピクセルの段落です。</p>
  <p class="highlight">これはハイライトされた段落です。</p>
 </body>
</html>

「スタイル要素」では、<head>要素内の<style>と</style>の間にCSSを記述します。上記の例では、pセレクタを使用してすべての<p>要素（段落）にスタイルを適用しています。

具体的には、colorプロパティで赤色を、font-sizeプロパティで18ピクセルのフォントサイズを設定しています。

なお、スタイル要素内でドット付きのセレクタを使用することにより、特定のクラスを持つ要素に対してスタイルを適用することができます。

上記の例では、セレクタ .highlight を使用して、class 属性が “highlight” の要素に対してスタイルを適用しています。具体的にはbackground-color プロパティで黄色の背景色を、font-weight プロパティで太字のテキストを設定しています。

スタイルの指定方法③「外部スタイルシート」

スタイルを別のCSSファイル（style.css）に分離し、HTMLファイル内でそれを参照する方法です。これにより、スタイルを複数のHTMLファイルで共有することができます。

スタイルが定義されたCSSファイルをHTMLファイルのhead要素内で、link要素を使用して参照します。

<!-- CSSファイル（styles.css） -->
p {
  color: red;
  font-size: 18px;
}

<!-- HTMLファイル -->
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <p>これは赤色でフォントサイズが18ピクセルの段落です。</p>
  </body>
</html>

「外部スタイルシート」では、「スタイル要素」と同様にCSSセレクタを使用してHTML要素を選択し、プロパティでスタイルを適用します。ドット付きのセレクタも同様に使用できます。

ブロック要素を構成する主なプロパティ

ブロック要素を構成するために使用される主なプロパティには、以下のようなものがあります。

width（幅）
- 要素の幅を指定します。
- デフォルトでは、ブロック要素は親要素の幅いっぱいを占めるように表示されます。
- ピクセル、パーセント、または他の単位で幅を指定できます。
height（高さ）
- 要素の高さを指定します。
- デフォルトでは、要素の高さは内容に応じて自動的に調整されます。
- ピクセル、パーセント、または他の単位で高さを指定できます。
margin（マージン）
- 要素の外側の余白を指定します。
- 要素と要素の間のスペースを作成し、要素を他の要素から離します。
- 上下左右の各方向に個別のマージンを指定することができます。
padding（パディング）
- 要素の内側の余白を指定します。
- 要素のコンテンツと境界線（ボーダー）の間のスペースを作成します。
- 上下左右の各方向に個別のパディングを指定することができます。
border（ボーダー）
- 要素の境界線を指定します。
- ボーダーのスタイル、太さ、色などを指定できます。
- 上下左右の各方向に個別のボーダーを指定することができます。
position（位置）
- 要素の位置を指定します。
- position: static（デフォルト）は通常のドキュメントフローに従って要素を配置します。
- position: relativeを指定すると、要素を現在の位置から相対的に配置できます。
- position: absoluteやposition: fixedを使用すると、要素を特定の位置に配置できます。

これらのプロパティを使用して、ブロック要素の外観やレイアウトを制御することができます。要素の大きさやスペースの調整、ボーダーの装飾などを行うことで、柔軟なデザインや配置を実現することができます。

おわりに

HTMLの要素とスタイルを自分なりに整理してみました。要素は文書の構造を表現し、スタイルは見た目やレイアウトを制御できます。

これらの要素とスタイルを適切に組み合わせて使用することで、見た目にも美しく整ったWebページを作成することが可能です。もっとも「デザイン力」が必要であることは言うまでもありませんが（残念ながら私にはありません…）。

WordPressのテーマを使っているとあまり気にすることはないかもしれませんが、構造を理解しておくことでカスタマイズや修正に役立つ場面がきっと訪れると思います