HTMLタグ 2

◆ 見出し

<h★></h★>

<h>タグは見出しを指定する時に使います。★の部分には1～6までの数字が入ります。h1が一番上位で数字が大きくなるほど下位になります。

表示

h1の見出し

h2の見出し

h3の見出し

h4の見出し

h5の見出し
h6の見出し
HTML
<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>

◆ 文字の上付き、下付き

<sup></sup>
<sub></sub>

<sup>や<sub>は、意味のある使い方をしないといけなくなりました。単なる装飾としての使用は控えた方が宜しいでしょう。

表示
ax2+bx+c=0
水素の化学式は、H2、酸素はO2です。
HTML
ax<sup>2</sup>+bx+c=0
水素の化学式は、H<sub>2</sub>、酸素はO<sub>2</sub>です。

※ ”ax2+bx+c=0 ”には、スタイルシートでフォントの種類を指定しています。

◆ 汎用的なブロックレベルの領域を指定

<div></div>

div要素は、汎用的なブロックレベルの領域を指定するときに使用します。内容を一つのまとまりとして扱えるようになります。前後が改行されます。

表示
背景色をピンクに指定


中の文字や画像を
まとめてセンタリング
HTML
<div style="width:100px;height:100px;background-color:#ff69b4;">背景色をピンクに指定</div>

<div style="width:300px;height:100px;background-color:#ffffff;text-align:center;">
<img src="lion1.gif"><br>中の文字や画像を<br>まとめてセンタリング</div>

※ <img src="lion1.gif">は、ライオンの画像を貼る為のタグです。 style="～"の部分は、スタイルシートです。

◆ 汎用的な範囲を指定

<span></span>

span要素は、汎用的な範囲を指定するときに使用します。前後の改行はありません。

表示
『トワイライト』のエドワードになりたい！
HTML
『トワイライト』の<span style="color:#ffffff;background-color:#00cc33;">エドワード</span>になりたい！

◆ リスト

<ul>
  <li></li>
</ul>

<ol>
  <li></li>
</ol>

順不同のリストは、ul要素とli要素で、番号付きのリストは、ol要素とli要素で作ります。前者の場合は、先頭に黒丸（）が付き、後者の場合は、先頭に数字が付きます。 リストは、字下げ（インデント）された状態で表示されます。

表示

◆ 好きな映画ベスト３ ◆

  • ロード・オブ・ザ・リング
  • トワイライト
  • トランスフォーマー

◆ 二度と観たくない映画ベスト３ ◆

  1. リング
  2. シャイニング
  3. 死霊のはらわた
HTML
<p>◆ 好きな映画ベスト３ ◆</p>
<ul>
<li>ロード・オブ・ザ・リング</li>
<li>トワイライト</li>
<li>トランスフォーマー</li>
</ul>

<p>◆ 二度と観たくない映画ベスト３ ◆</p>
<ol>
<li>リング</li>
<li>シャイニング</li>
<li>死霊のはらわた</li>
</ol>

◆ 定義リスト

<dl>
<dt></dt>
<dd></dd>
</dl>

<dl>～</dl>で囲んで定義リストを作ります。<dt></dt>には説明する用語を、<dd></dd>には、その説明文を入れます。 <dt></dt>と<dd></dd>のセットは増やすことができます。

表示
『ロード・オブ・ザ・リング』
フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
『トワイライト』
人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
HTML
<dl>
<dt>ロード・オブ・ザ・リング</dt>
<dd>フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。</dd>
<dt>トワイライト</dt>
<dd>人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。</dd>
</dl>

◆ 整形済みテキスト表示

<pre></pre>

<pre>と</pre>で囲まれた領域は、スペースや改行がそのまま表示されます。

表示
『ロード・オブ・ザ・リング』

あらすじ：
　　フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
　　エルフやドワーフや魔法使いも出てくるよ。

『トワイライト』

あらすじ：
　　人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
　　様々な吸血鬼の仲間たちも出てくるよ。
HTML
<pre>
『ロード・オブ・ザ・リング』

あらすじ：
　　フロドとサムが仲間たちの助けを借りて指輪を取り戻す話。
　　エルフやドワーフや魔法使いも出てくるよ。

『トワイライト』

あらすじ：
　　人間のイザベラ・スワンと吸血鬼のエドワード・カレンの純愛物語。
　　様々な吸血鬼の仲間たちも出てくるよ。
</pre>

◆ テキストにルビを振る

<ruby>
<rt></rt>
</ruby>

<ruby>
<rp></rp><rt></rt><rp></rp>
</ruby>

テキストにルビを振ります。ruby要素はルビを振る対象、rt要素にはルビ、rp要素は括弧内にルビを表示させます（未対応のブラウザの為）。

表示

花はな
子こ



花（はな）
子（こ）
HTML
<ruby>
花<rt>はな</rt>
子<rt>こ</rt>
</ruby>

<ruby>
花<rp>（</rp><rt>はな</rt><rp>）</rp>
子<rp>（</rp><rt>こ</rt><rp>）</rp>
</ruby>

以上です。タグはまだまだたくさんありますが、簡単に説明できそうなものだけページに載せました。

上に戻る