その他テキストのタグ

テキスト(文字列)に適用する、さまざまなタグを紹介します。

EMタグ

強調を定義します。デフォルトでは斜体で表示されます。

STRONGタグ

強い重要性を定義します。デフォルトでは太字で表示されます。

SMALLタグ

注釈や細目を定義します。デフォルトではひとまわり小さい文字サイズで表示されます。

TIMEタグ

日付や時刻を定義します。datetime属性では標準フォーマットで日付時刻を定義します。

SUPタグ

上付き文字を定義します。

SUBタグ

下付き文字を定義します。

その他テキストのタグのサンプル

Webブラウザで表示すると、以下のようになります。
sample18

フォームのタグ

入力フォームを作成するタグとその属性を紹介します。

FORMタグ

入力フォーム全体を定義します。action属性でフォームの送信先を指定します。FORMタグ内に送信したい項目すべてと、送信ボタンを定義します。すると1つのボタンでフォーム内容がすべて送信されます。

action属性

フォームの送信先、つまり送信データを処理するプログラムのパスを指定します。

method属性

フォームの送信方式を指定します。GETとPOSTがあります。どちらにするかはプログラマに確認しましょう。

INPUTタグ

テキストフィールド、ラジオボタン、チェックボックス、送信ボタンなどさまざまなフォームコントロールを定義します。種類はtype属性で設定します。

type属性

フォームコントロールの種類を指定します。

type=”text”
1行のテキストフィールドを作成します。
type=”email”
メールアドレス入力用テキストフィールドを作成します。スマートフォンではメールアドレス入力用のキーボードになります。
type=”tel”
電話番号入力用テキストフィールドを作成します。スマートフォンでは電話番号入力用のキーボードになります。
type=”password”
パスワード入力用テキストフィールドを作成します。入力された値が伏字となります。
type=”radio”
ラジオボタンを作成します。name属性が同じラジオボタンはグループとなり、グループ内では1つしか選択ができなくなります。checked属性を指定すると初期値がオンとなります。
type=”checkbox”
チェックボックスを作成します。チェックボックスでは複数の項目を選択することが許されています。checked属性を指定すると初期値がオンとなります。
type=”submit”
送信ボタンを作成します。ボタンのキャプションはvalue属性で指定します。
type=”image”
画像を使用した送信ボタンを作成します。src属性で画像のパスを指定します。
type=”reset”
リセットボタンを作成します。ボタンを押すと各コントロールがリセットされ、初期値に戻ります。
type=”hidden”
隠し項目を作成します。画面上には表示されず、送信日時などプログラムで値を設定し、送信ボタンで他の項目と一緒に送信します。

LABELタグ

フォームコントロールと項目名をグループ化します。コントロールと項目名をLABELタグでくくる方法と、コントロールのid名を、LABELタグのfor属性に設定する方法があります。

フォームのサンプル

Webブラウザで表示すると、以下のようになります。
sample16

その他のフォームコントロール

TEXTAREAタグ

複数行のテキストフィールドを作成します。終了タグが必須なので忘れないようにしましょう。タグ内に文字列を指定すると、初期値となります。

SELECTタグ

プルダウンリストを作成します。複数のリスト項目の中から1つだけ選択する形式と、複数行を同時に表示し複数項目を選択する形式があります。

OPTIONタグ

プルダウンリストのリスト項目を作成します。selected属性を指定すると、初期値となります。

OPTGROUPタグ

プルダウンリストのリスト項目をグループ化します。label属性でグループ名を指定します。

その他のフォームコントロールサンプル

Webブラウザで表示すると、以下のようになります。
sample17
sample17-1

テーブル(表)のタグ

HTMLで表を作成するためのタグを紹介します。

TABLEタグ

表全体を定義します。デフォルトでは枠線が表示されませんが、border属性を指定すると表示することができます。ただし、レイアウトの確認を済ませたらborder属性を削除し、スタイルシートで枠線を定義してください。

TRタグ

表の行を定義します。まずは1行分だけ作成してブラウザで確認し、問題なければ必要な行数分コピーをして、セル内を変更するとよいでしょう。

TDタグ

表の通常セルを定義します。TRタグ内に必要な列数分だけTDタグを定義します。通常セルでは左右左揃え、上下中央揃えがデフォルトです。

THタグ

通常セルの代わりに使用し、見出しセルを定義します。見出しセルでは左右中央揃え、太字がデフォルトとなります。

CAPTIONタグ

TABLEタグとTRタグの間に記述し、表のタイトルを定義します。表の上に表の幅に対して中央揃えで表示されます。

表のサンプル

Webブラウザで表示すると、以下のようになります。
sample14

セルの結合

複数のセルを結合して1つにする方法を説明します。

cospan属性

colspan=”横に結合するセル数” と指定し、複数列にまたがるセルを作成します。colspan属性でセルを結合すると、同じ行の右にセルがはみ出るので、不要なセルは削除します。

rowspan属性

rowspan=”縦に結合するセル数” と指定し、複数行にまたがるセルを作成します。rowspan属性でセルを結合すると、下の行の右にセルがはみ出るので、不要なセルは削除します。

セルの結合サンプル

Webブラウザで見ると、以下のようになります。
sample15

リストのタグ

HTMLのリストは3種類あります。

記号付きリスト

番号なしリストとも呼ばれます。デフォルトではリスト項目の先頭が黒丸となります。単純な箇条書きや、リストマークを非表示にしてナビゲーションなどに使用します。

番号付きリスト

デフォルトではリスト項目の先頭が数字となります。手順やランキングなどに使用します。

定義型リスト

見出し語とその説明で1組の項目となるリストです。項目の説明や、更新履歴の日付と更新内容などに使用されます。

ULタグ

記号付きリストを作成します。リスト全体をULタグでくくります。

OLタグ

番号付きリストを作成します。リスト全体をOLタグでくくります。

LIタグ

記号付き・番号付きリストのリスト項目を作成します。1つの項目をLIタグでくくります。

記号付きリスト・番号付きリストのサンプル

Webブラウザで表示すると、以下のようになります。
sample12

DLタグ

定義型リストを作成します。リスト全体をDLタグでくくります。

DTタグ

定義型リストの見出し語を作成します。

DDタグ

定義型リストの説明文を作成します。

定義型リストのサンプル

Webブラウザで表示すると、以下のようになります。
sample13

画像のタグ

画像を表示するタグとその属性を紹介します。

IMGタグ

ページ内に画像を表示します。HTMLでの画像は埋め込みではなく、参照となりますので、ファイルの位置関係が重要となります。

IMGタグの属性

src
画像ファイルのパスを指定します。表示できる画像ファイルの形式は、「.jpg」「.gif」「.png」等です。
alt
代替文字を指定します。パスの指定ミスやサーバトラブルで画像が表示できない場合、代替文字を表示します。
width
画像の幅を指定します。単位は指定しませんが、ピクセルとなります。
height
画像の高さを指定します。単位は指定しませんが、ピクセルとなります。

FIGUREタグ

図版を指定します。図(IMGタグ)と図のキャプション(FIGCAPTIONタグ)をグループ化します。

FIGCAPTIONタグ

図のキャプションを指定します。キャプションは図の上でも下でもかまいません。

図版のサンプル

Webブラウザで見ると、以下のようになります。
sample11-2

ページ内リンク

同一ページ内で指定された位置へジャンプするリンクを作成します。

リンク先の作成

リンク先を指定するためには、タグにid属性を設定します。

リンクの作成

「<a href=”#id名”>~</a>」の形式でリンクを作成します。

ページ内リンクのサンプル

Webブラウザで表示すると、以下のようになります。
sample10-1
sample10-2

リンクのタグ

ハイパーリンクを設定するタグと属性を紹介します。

Aタグ

リンクを設定したい文字列や画像に対して指定すると、href属性で指定したリンク先へジャンプします。

Aタグの属性一覧

href
リンク先を指定します。HTMLファイルだけでなく、画像ファイルやPDFファイルもリンク先に指定できます。
title
リンクのタイトルを指定します。リンクにマウスポインタを重ねると、ポップアップでタイトルが表示されます。
target
リンクの表示先を指定します。target=”_blank”で新しいウィンドウまたはタブにリンク先を表示します。

絶対パスと相対パス

リンク先を指定するときに、対象となるファイルまでの経路(path)を指定しなければなりません。「http://」や「https://」で始まる絶対パスと、HTMLファイルの場所を基準に指定する相対パスがあります。相対パスの考え方は以下のとおりです。

同じフォルダに対象のファイルがある場合
ファイル名だけで指定できますが、拡張子まで指定しなければなりません。
下位のフォルダに対象のファイルがある場合
「フォルダ名/ファイル名」の形式で指定します。
上位のフォルダに対象のファイルがある場合
「../ファイル名」の形式で指定します。

見出しのタグ

見出しのタグを紹介します。見出しは6段階あります。デフォルトでは太字で、数字が大きいほど上位の見出しとなり、文字サイズが大きくなります。

H1タグ

最も大きな見出しです。サイト名や、そのページのタイトルなど、最も重要なところに使用します。

H2タグ

2番目のレベルの見出しです。ページ内の記事タイトルや項目名などに使用されます。

H3タグ

3番目のレベルの見出しです。H2よりさらに細かい分類やサブ領域の項目名などに使用されます。

H4タグ

4番目のレベルの見出しです。デフォルトでは段落の文字サイズと同じになるため、見出しとしてはあまり使用されません。

H5タグ

5番目のレベルの見出しです。デフォルトでは段落よりも文字サイズが小さくなり、見出しとしてはあまり使用されません。

H6タグ

6番目のレベルの見出しです。デフォルトでは段落よりも文字サイズが小さくなり、見出しとしてはあまり使用されません。

見出しのサンプル

Webブラウザで表示すると、以下のようになります。
sample5

スタイルシート(CSS)を適用するためのタグ

HTMLのタグは本来、文書構造上の意味を持ちますが、タグに意味はなく、主にスタイルシートを適用する範囲を指定するためのタグを紹介します。

DIVタグ

見出しと段落、ページ全体などをグループ化します。HEADERタグやSECTIONタグなどができる前は、CSSでレイアウトする際に汎用的に使用されていました。(ブロックレベル要素)

SPANタグ

段落内の一部の文字列を強調したり、部分的にスタイルを変更する場合に使用します。(インライン要素)

DIVもSPANも繰り返し使用される可能性が高いため、id属性やclass属性と共に使用します。

id属性

全てのタグに指定できますが、1つのHTMLファイル内で同じidは使用できません。
ページ全体を表すid=”contents”や、メイン領域を表すid=”main”といった形で使用されます。

class属性

全てのタグに指定でき、1つのHTMLファイル内に同じclassを複数使用できます。ページ内で同じスタイルに設定したい箇所は、同じclassを指定します。

DIVとSPANのサンプル

Webブラウザで表示すると、以下のようになります。
sample4

文章を表示するタグ

一般的な文章を表示するときに使用するタグを紹介します。

Pタグ

段落を作成します。段落は文章のひとまとまりを表し、デフォルトでは前後に1行の余白が入ります。

BRタグ

段落内改行を表します。HTMLでは、ソースコード上で改行してもWebブラウザ上では改行されません。改行したい箇所にはBRタグを挿入します。

段落と改行の違いサンプル

Webブラウザで表示すると、以下のようになります。
sample3