論理?タグ

HOME>よくわかるHTML講座>論理?タグ

論文を公開するため?のタグ

見出しをつける<h1></h1>〜<h6></h6>

説明

モノによっては<h1></h1>〜<h6></h6>タグを「文字を大きくするためのタグ」と説明されているらしいですが、本来は「見出しをつけるためのタグ」です。
WEBページを一冊の本に例えると、<h1></h1>は「本の題名」、<h2></h2>は「第○部」、<h3></h3>は「第○章」などに相当すると考えていいでしょう。
<h1></h1>〜<h6></h6>がどんなスタイル(見た目、文字の大きさや行送り等)で表示されるかはお使いのブラウザに依存します。また、ページ作成者がスタイルシートなどを適用して自由に設定することも出来ます。

使用例

ソース

<h1>論理?タグ</h1> <h2>論文を公開するため?タグ</h2> <h3>見出しをつけるタグ</h3>

実行結果

このページが実行結果です(※スタイルシートを適用しています)。

定義語リストを作る

説明

定義語リスト(辞書や用語集のようなもの)を作れます。PC用ではあんまり使っているページは無いように思えますが、ケータイ用コンテンツでは多用されているようです(定義語としてよりも見た目を整えるために)。

使用例

ソース

<dl> <dt>アサヒ</dt> <dd>スーパードライを作っている。</dd> <dt>キリン</dt> <dd>ラガー、一番搾りを作っている。</dd> </dl>

実行結果

アサヒ

スーパードライを作っている。

キリン

ラガー、一番搾りを作っている。

項目リストを作る

説明

「箇条書き」を作れます。<li>を<ul>〜</ul>で囲むと順番のないリスト、<ol>〜</ol>で囲むと順番付きのリストが作れます。

使用例(順番無し)

ソース

<ul> <li>スーパードライ</li> <li>ラガー</li> <li>一番搾り</li> </ul>

実行結果

• スーパードライ
• ラガー
• 一番搾り

使用例(順番あり)

ソース

<ol> <li>スーパードライ</li> <li>ラガー</li> <li>一番搾り</li> </ol>

実行結果

1. スーパードライ
2. ラガー
3. 一番搾り

段落・その他

段落を設定する<p>

説明

段落を定義します。<br>タグで「改行」できるのだから、段落って何だ? と思われるやも知れませんが、単なる改行は「形式段落」、<p>タグは「意味段落」を示します(中学か高校の現代国語の授業を思い出して下さい)。
このタグで囲った上下にはスペースが入ります。

使用例

ソース

<p>最初の段落です。いわゆる起承転結の「起」ですよね。「起承転結」を某所で翻訳してみたら、introduction development turn and conclusion と出ました。<br />「起」は introduction なんですね。</p> <p>次の段落です。いわゆる起承転結の「承」ですよね。「承」は development なんですね。<br />イマイチしっくり来ないのは俺だけ？</p> <p>三番目の段落です。いわゆる起承転結の「転」ですよね。「転」はしっくり来ますね。</p> <p>最後の段落です。いわゆる起承転結の「結」ですよね。</p>

実行結果

最初の段落です。いわゆる起承転結の「起」ですよね。「起承転結」を某所で翻訳してみたら、introduction development turn and conclusion と出ました。
「起」は introduction なんですね。

次の段落です。いわゆる起承転結の「承」ですよね。「承」は development なんですね。
イマイチしっくり来ないのは俺だけ？

三番目の段落です。いわゆる起承転結の「転」ですよね。「転」はしっくり来ますね。

最後の段落です。いわゆる起承転結の「結」ですよね。

要素タグ<div></div>と<span></span>

説明

これらのタグで囲んだ部分は表示上の変化は何もありません。これらのタグは「'ここからここまで'を指定する」ぐらいの働きしかありません。<div>は改行が入り、<span>

は改行が入らない、という特徴があります。
通常はスタイルシートなどと組み合わせて使用します。

使用例(alignを指定する)

説明

行揃えを指定する方法の一例です。align指定よりも最近ではスタイルシートで指定するのが主流です。

ソース

<div align="left">左寄せ</div> <div align="center">中央揃え</div> <div align="right">右寄せ</div>

実行結果

左寄せ

中央揃え

右寄せ

使用例(スタイルシートで色指定する)

説明

スタイルシートとの組み合わせの一例です。他にもjavascriptと組み合わせる場合もあります。

ソース

文章中に<span style="color:red">赤色</span>にしたりして。

実行結果

文章中に赤色にしたりして。

引用・ソースその他のタグ

引用を示す<blockquote>

説明

<blockquote>〜</blockquote>で囲んだ部分は「他からの引用」であることを示します。ブラウザには上下左右に余白が入ります。

使用例

ここはオリジナル文章だ。 <blockquote>ここは引用だ。</blockquote> ここもオリジナル文章だ。

実行結果

ここはオリジナル文章だ。

ここは引用だ。

ここもオリジナル文章だ。

改行・スペースをそのまま表示する<pre>

説明

本来はプログラムやHTMLのソースを表示するためのタグです。ブラウザによっては等隔フォントで表示されます。
イチイチソースに<br />とか打ちたくないし、半角スペースが一つしか表示されないのも気に食わん、と思ったらこのタグを使いましょう。ただし特殊文字は < だったら &lt; 等とソースに書いてやる必要があります。

使用例

<pre> ここは 打った通りに 表示されます。 </pre> ここは 打った通りに 表示されないです。

実行結果

ここは
   打った通りに
                 表示されます。

ここは 打った通りに 表示されないです。