close

ホームページ作り方[文字の修飾]

文字を表示・修飾するときのタグについて説明します。見た目は変化しますが、HTMLタグでは論理的に意味付けをするのが目的です。見た目を変えるときは、スタイルシートを用います。

 
<H1>〜<H6>タグ
 

見出しタグです。このタグで囲まれた文字列を太字にし、上下に空白が空き ます。1が一番大きな文字で数字が大きくなるごとに小さくなります。このタグ は見出しを指定するのもので、文字の大きさを指定するタグではありません。

デフォルトのフォントサイズは次のようになります。

<H1>タグ

<H2>タグ

<H3>タグ

<H4>タグ

<H5>タグ
<H6>タグ
 
<P>タグ
 

このタグで囲まれた文字列を段落として扱います。段落の下には、一文字分 の空白(一列分の空白)が空きます。

1段落目の文章です。このタグで囲まれた文字列を段落として扱います。段落の下には、一文字分の空白(一列分の空白)が空きます。通常のp要素はこのように表示されます。画面の端まで行くと、自動的に次の行に文章が移行します。

2段落目の文章です。このタグで囲まれた文字列を段落として扱います。段落の下には、一文字分の空白(一列分の空白)が空きます。スタイルシートを使用しているため、一段落目と表示が異なっています。

 
<BR>タグ
 

このタグを入れると、改行されます。
空白は空きません。
対ではなく単独で使われる例外的なタグです。
この文章には一文ごとに<BR>タグを入れて改行しています。

 
<EM>タグ
 

囲まれた文字列を konoyouni 斜体にして強調します。あくまで強調目的で書体を変えるためのタグではなりません。

 
<STRONG>タグ
 

囲まれた文字列を このように 太字にして強調します。これも強調目的です。

 
<SUP>タグ
 

囲まれた文字列を このように 上付き文字にします。べき乗x2や序数4thの記述に便利です。

<SUB>タグ
 

囲まれた文字列を このように 下付き文字にします。脚注番号[1]や化学式H2Oなどの記述に便利です。

<DEL>タグ

囲まれた文字列を このように 取り消し線を引き、削除を示します。

<INS>タグ

囲まれた文字列を このように 下線を引き、挿入を示します。

<blockquote>タグ
<blockquote>タグは、引用された文章を示します。cite属性で引用元を指定します。<blockquote>タグで囲まれた文字列は、インデントされて表示されます。この文章は<blockquote>タグで書かれています。
短い引用は<q>タグを使います。short quotationこのように表示されます。
<ruby>タグ

<ruby>タグはルビを定義するタグです。rp要素でルビを指定します。

<ruby>雨宮勇徒の研究室

<rp>(</rp>

<rt>あまみやゆうとのけんきゅうしつ</rt>

<rp>)</rp>

</ruby>

上のタグは「雨宮勇徒の研究室 ( あまみやゆうとのけんきゅうしつ ) 」と表示されます。

ruby未対応のブラウザでは雨宮勇徒の研究室(あまみやゆうとのけんきゅうしつ)と表示されます。

<pre>タグ

<pre>タグは入力した文字列が空白や改行を含めてそのまま表示されます。タグは有効です。

preタグはそのままブラウザに表示されます。文字は等幅フォントになります。

  空白も改行も有効です。

リンク強調といったタグは有効です。

HTMLの基礎の基礎/HTMLの構造/ヘッダタグ/リンクの張り方/リストの作り方/テーブルの作り方/画像の貼り方/

MDN Web Docs

The World Wide Web Consortium