3. 目的別リファレンス
以下にドキュメント作成にあたり必要となりうる機能,役割を持ったタグを示す.
またhead部分の解説は当ページのソース画面に記載している.
ソース画面閲覧はPCで閲覧する場合はページ上でCtrlキーとUキーを押し,スマホ等ではURLの先頭にview-source:を入力すると閲覧できる.
-
<dl>タグで括られたブロック内で<dt>タグで括った定義した用語を<dd>タグで説明することができる.
本来は定義した用語をリスト化(Definition List)し,その中で定義語を(Definition Term)示し,
定義の説明(Definition Description)するのに用いる.
しかし,本ドキュメントではスタイル(表示)を整えることに用いる.(非推奨)
スタイルを整えるにはCSSで指定すべきである.
【ソース】<dl> <dt>沼津高専</dt> <dd>沼津工業高等専門学校の略</dd> <dt>NIT</dt> <dd>National Institute of Technoligyの略</dd> </dl>
【表示】- 沼津高専
- 沼津工業高等専門学校の略
- NIT
- National Institute of Technoligyの略
改行したい箇所に<br>タグを置くことで改行することができる.
【ソース】改行したい箇所です.<br>改行しました.
【表示】
さらに,ソース等は記載しないが,<p>タグ(終了タグ有り)を用いて,長文を書く際の段落を作ることや,改行したい箇所です.
改行しました.
<div>タグ(終了タグ有り)を用いて,区分(ブロックレベル要素)を作ることもできる.
(詳しくは当ページのソースから閲覧できる.)
これらのタグを使うことでソースが見やすくなり編集の手間が省ける.
ただし使い過ぎはかえって見難くなる可能性がある為,注意が必要である.
-
リンクを貼りたい箇所に<a>タグを置くことでジャンプしたいリンクを貼ることができる.
hrefは他ページのリンクを貼りたい際に使用し,ここをnameに変更することで同ページ内のリンク(到達点)を指定することができる.
相対パス,絶対パスのどちらでも指定することができる._selfは同ウィンドウ(使用中のタブ)にリンク先のページを表示し,_blankに変更することで新規ウィンドウにリンク先のページを表示することができる.
【ソース】<a href="http://www2.denshi.numazu-ct.ac.jp/mirsdoc2/" target="_self">MIRS DATABASE</a>
【表示】MIRS DATABASE
-
表を挿入したい箇所に<table>タグを置くことで表を挿入することができる.
<tr>タグは行,<td>タグは表内の個々のセル,<th>タグは見出し(ヘッダ)を定義するものである.
clss="table010"はCSSで予め定義してある表の書式を呼び出すものである.
このドキュメント全体のCSSは別のファイルに記載してある為,当ページのソースからは閲覧できない.<caption>タグは表のキャプションを指定する際に使用するものである.
また,<td clospan="2">とすれば横方向のセルを連結することができ,
<td rowspan="2">とすれば縦方向のセルを連結できる.
いずれも""(ダブルクォーテーション)内の数字は連結するセルの数を示す.
【ソース】<table class="table010"> <caption><center>Table.1 カレンダー</center></caption> <tr> <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> </table>
【表示】
【ソース(横方向のセルをを連結)】Table1. カレンダー 月 火 水 木 金 1 2 3 4 5 <table class="table010"> <caption><center>Table.1 カレンダー</center></caption> <tr> <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th> </tr> <tr> <td>1</td><td>2</td><td>3</td><td colspan="2">4</td> </tr> </table>
【表示(横方向のセルをを連結)】
【ソース(縦方向のセルを連結)】Table1. カレンダー 月 火 水 木 金 1 2 3 4 <table class="table010"> <caption><center>Table.1 カレンダー</center></caption> <tr> <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td rowspan="2">5</td> </tr> <tr> <td>8</td><td>9</td><td>10</td><td>11</td> </tr> </table>
【表示(縦方向のセルを連結)】Table1. カレンダー 月 火 水 木 金 1 2 3 4 5 8 9 10 11
-
画像を挿入したい箇所に<img>タグを置くことで画像を挿入することができる.
src=""の""内に指定するは画像のURL(ファイル名)を入力する.
width,heightは画像の表示サイズを指定するものであり,""内にサイズを入力します.
ピクセル数で指定する場合は数字のみ,ウィンドウに対して相対的にサイズを指定する場合は数字に%を付けて入力する.
上記の属性を指定しない場合は画像本来サイズで表示される.<figure>タグを使用し,<caption>タグを使用すると画像にキャプションを追加することができる.
<figure>タグを使用せずに<p>タグでキャプションまでの内容を1つのセットとして扱うこともできる.
画像とキャプションを<center>タグで括れば表示画面の中央に表示させることもできる.また,alt=""の""内に入力された文字は閲覧者がブラウザで画像が見れない場合に表示する文字である.
<border>タグを使うことで画像の枠を描くこともできる.
【ソース(画像の表示のみ)】<img src="../MIRS1803.jpg" width="200" height="200" alt="画像1">
【表示(画像の表示のみ)】
【ソース(キャプショ追加<center>+<figure>)】
<figure> <center> <img src="../MIRS1803.jpg" width="200" height="200" alt="画像1"> <figcaption>Fig.1 MIRS1803</figcaption> </center> </figure>
【表示(キャプショ追加<center>+<figure>)】
【ソース(キャプション追加<p>)】
Fig.1 MIRS1803 <p class="imgbox"> <img src="../MIRS1803.jpg" width="200" height="200" alt="画像1"> <span class="caption">Fig.1 MIRS1803</span> </p>
【表示(キャプション追加<p>)】
【ソース(画像が見れない場合)】
Fig.1 MIRS1803
<img src="xxx.jpg" width="200" height="200" alt="画像を表示できません">
【表示(画像が見れない場合)】
【ソース(枠付き)】<img src="../MIRS1803.jpg" width="200" height="200" border="1" alt="画像1">
【表示(枠付き)】
-
<li>タグで括った文章が項目として表示される.
さらにブロックレベルの要素で<ul>を使用すると項目を順不同のリストとして表示し,
<ol>タグを使用すると項目を番号付きのリストとして表示することができる.
【ソース(順不同)】<ul> <li>起</li> <li>承</li> <li>転</li> <li>結</li> </ul>
【表示(順不同)】
【ソース(番号付き)】- 起
- 承
- 転
- 結
<ol> <li>起</li> <li>承</li> <li>転</li> <li>結</li> </ol>
【表示(番号付き)】- 起
- 承
- 転
- 結
-
添えたい文字を<sup>タグもしくは<sub>タグの中に入力することで文字を添え字にすることができる.
【ソース】X<sub>i</sub>=2<sup>3</sup>
【表示】Xi=23
-
コメントアウトしたい内容を<!-- -->タグの中に入力することでコメントアウトする(ページ上に表示させない)ことができる.
この機能は文字を非表示にするのみでなく他の要素(タグ)を括れば括った要素も無効になる.
これはhead部分のCSSにも使用できる.
【ソース】1+2の答えは<!-- 5-2の答えと -->等しい.
【表示】1+2の答えは等しい.