MIRS1701-UNDEF-0001 MIRS1701 HTMLリファレンス

本ドキュメントは、HTMLの書き方及びMIRS1701ライブラリの使い方を記したものである。

作成者

HTMLとは

名称	MIRS1701 HTMLリファレンス
番号	MIRS1701-UNDEF-0001

版数	最終更新日	作成	承認	改訂記事
A01	2017.6.13	鈴木　宏和		初版

HTMLとはHyperText Markup Languageの略である。
HyperText(ハイパーテキスト)とは、複数の文書を相互に関連付け、結び付ける仕組みである。「テキストを超える」という意味からHyperTextと名付けられた。テキスト間を結びつける参照のことをハイパーリンクと言う。

Markup Language(マークアップ言語)は、視覚表現や文章構造などを記述するための形式言語である。

<tag>ここがタグ付けされる対象</tag>

上記のように、記号を交えた「タグ」で対象を囲み、要素とする。特に、HTMLやXMLではタグを入れ子にして記述する。

HTMLの文法

基本文法

HTMLは、表現したい文章を意味あるブロックに分割し、それぞれのブロックの位置づけを明らかにする。そのブロックの範囲を明確にする識別子(記号)をタグと呼ぶ。
タグは、括弧(「<」と「>」)で囲まれた文字の並びである。
以下にタグについての説明を記す。

ブロックレベル要素とインライン要素

ブロックレベル要素

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つの塊として認識される。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入る。

インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

配置

ブロックレベル要素の中にはブロックレベル要素やインライン要素が入るがインライン要素の中にはブロックレベル要素が入ることは無い。ただし、例外はある。

文書構造とデザインの分離

HTMLはユーザの前にコンピュータが読み込むことが前提であるため、HTMLには文書の構造のみを記し、デザインはCSSという文書に分離しなければならない。
具体的には、文字色、文字サイズ、下線、センタリング、等の情報をHTMLに書くべきではないということである。

HTMLエスケープシーケンス

HTMLエスケープシーケンスとはウェブページ作成時にそのままでは表示できない文字を表示するための代替文字である。 HTML特殊文字と呼ばれる。
ウェブページを作成する際、<という文字を表示したいとき、単純に<と入力してもうまく表示されない。そこで、<と入力することで表示できるようになる。
調べれば情報はたくさん出てくるが、文字列を入れると自動的にエスケープして出力するような機能を提供するwebページを利用するのが便利である。

コーディングルール

html文書を書くときは入れ子に応じてインデントをするのが一般的である。また、1行が長くなりすぎるとソースが見づらいため必要に応じた改行を入れるべきである。
実際に表示される際の文章の改行は<br>というタグを入れることで改行できる。

タグリファレンス

ヘッダなどの直接文書構造との関わりが無いタグ

ここにあるタグはおまじないとして用いる方が手っ取り早いため本質を捉える必要は無い。
また、全て必須要素であるため省略してはならない。

囲まれた範囲がコメントであることを示す。コメントはブラウザに無視される。

<!DOCTYPE html>

文書の最初に書く。これは、以下に続く文書がhtml5であることを示している。
このタグに終了タグは無い。

<html>

囲んだ範囲がhtml文書であることを示す。lang属性を付加し、"ja"と属性値を与えて明示的に日本語の文書であることを示すほうが良い。

<head>

囲んだ範囲が文書の基本情報を指定する部分であることを示す、基本的にここに書いた内容はWebブラウザ画面に表示されない。
このセクションで以降に示すタグは全てheadタグの中で使う。

<meta>

文書に関する情報（メタ情報）を指定して、ブラウザや検索ロボットに知らせるためのタグである。 MIRSドキュメントでは文字エンコーディングを示すcharset属性を付加し、文字化けを防ぐために使う。属性値は"utf-8"である。そのため、htmlファイル自体もutf-8で保存しなければならない。
このタグに終了タグはない。

<title>

囲んだ範囲が文書のタイトルであることを示す。このタグはwebページ名としてブラウザに反映される。

<link>

文書ファイルと関連する別の文書ファイルを指定し、その関係を定義するものである。 MIRSドキュメントではCSSをリンクするために使う。
rel属性に"stylesheet"、href属性にパス、type属性に"text/css"を指定する。
このタグに終了タグはない。

囲んだ範囲がスクリプトであることを示す。スクリプトの大半はJavascriptである。(誤解されがちだがJava言語とJavascriptはまったく別のものである。) MIRSドキュメントでは、要素内にスクリプトは書かず、外部ファイルへのリンクを示す。
type属性に"text/javascript"、src属性にパスを指定する。

文書の構造に関わるタグ

<body>

見出し

囲んだ範囲が見出しであることを示す。h1, h2, h3のように、hと数字で構成され、数字が見出しのレベルを示す。

<p>

<br>

改行位置を示す。ブラウザ上ではこのタグのある位置で改行される。
このタグに終了タグは無い。

<a>

囲んだ文字列をハイパーリンクにする。
href属性にパスを指定することでそのパスへのリンクができる。また、target属性に"_blank"と指定すると、新しいタブでページを開くことができる。

<ul>

囲んだ範囲が順序なし箇条書きであることを示す。後述するが、この要素内のli要素が箇条書きの項目になる

<ol>

囲んだ範囲が順序あり箇条書きであることを示す。後述するが、この要素内のli要素が箇条書きの項目になる

<li>

<table>

table内に配置され、囲んだ範囲が表のキャプションであることを示す。

<tr>

table内に配置され、囲んだ範囲が表の段であることを示す。

<th>

tr内に配置され、囲んだ範囲が表の列の見出しであることを示す。

<td>

<img>

画像を表示する。
src属性にパス、alt属性に画像が利用できない環境向けの代替テキスト、width属性にイメージの幅、height属性にイメージの高さを指定する。
このタグに終了タグは無い。

figure内に配置され、囲んだ範囲が図のキャプションであることを示す。

<div>

ブロックレベル要素で、単体では囲んだ範囲に意味は持たせられらないが、class属性やid属性を付加し、スクリプトやCSSと連動させることで便利な機能を持たせられる。

<span>

インライン要素で、単体では囲んだ範囲に意味は持たせられらないが、class属性やid属性を付加し、スクリプトやCSSと連動させることで便利な機能を持たせられる。

<hr>

使用例

<!--コメントです-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>MIRS1701 HTMLリファレンス</title>
	<link rel=stylesheet href="../../style.css" type="text/css">
	<script type="text/javascript" src="../../jquery-3.2.1.min.js"></script>
</head>
<body>
	<a href="http://www2.denshi.numazu-ct.ac.jp/mirsdoc2/mirs1701/" target="_blank">MIRS1701 管理台帳へ戻る</a>
	<table>
		<caption>表のキャプション</caption>
		<tr>
			<th>名称</th>
			<td class="title">MIRS1701 HTMLリファレンス</td>
		</tr>
		<tr>
			<th>番号</th>
			<td class="title">MIRS1701-UNDEF-0001</td>
		</tr>
	</table>
	<h1>本ドキュメントについて</h1>
	<p>
		本ドキュメントは、HTMLの書き方及びMIRS1701ライブラリの使い方を記したものである。
	</p>
	<p>言語</p>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<figure>
		<img href="hoge.jpg" alt="代替テキスト" width="200" height="200">
		<figcaption>ほげほげの図</figcaption>
	</figure>
</body>

ページテンプレート

MIRS1701ライブラリ

MIRS1701ライブラリとはHTMLを円滑に記述するためのライブラリである。
見出し番号自動生成、目次自動生成、図表番号自動生成、図表番号参照の機能を持つ。

見出し番号自動生成

"no-numbering"というclass属性を持たない全てのh1, h2, h3要素の文頭に見出し番号が振られる。また、id属性を付加するのでa要素などでリンクできる。
見出し番号はh1なら「1.」、h2なら「1.2.」、h3なら「1.2.3.」、のようになる。 idは数字間のドットがハイフンになったものが付加される。

目次自動生成

"index-h1"、"index-h2"、"index-h3"のいずれかのclass属性と、何らかのid属性を持つul要素には目次が振られる。
index-h1の場合、全てのh1要素がリストされ、リンクが貼られる。
index-h2またはindex-h3の場合、そのul要素の位置以降のh2またはh3要素がリストされ、リンクが貼られる。上位の見出し要素が出現するとリストは打ち切られる。
※h1以外の目次は目次ごとに個別のid属性を振らなければ目次が生成されないので注意すること。

図表番号自動生成

何らかのid属性を持つfigure要素またはtable要素の直下に配置されたfigcaption要素またはcaption要素の文頭に図表番号が振られる。図表番号は図と表で独立していて、図の場合は「fig.1」、表の場合は「table.2」のようにつく。

図表番号参照

参照したい図表のid属性値と同じ属性値のclass属性を持つ要素には対応する図表の番号が付く。表示内容は図表番号自動生成機能に準じる。
span要素を用いるのを推奨とするが、どの要素でも使用可能である。

ページのトップに戻るボタンの設置

id属性値が"to-page-top"であるbutton要素はクリックするとページのトップに自動スクロールする機能を持つ。
ボタンを画面の定位置に固定させるためにはそのためのCSSを書く必要がある。

tsvからtableを作成

class属性値に"tsv"を持つtable要素は、指定したパスのtsvファイルをtr, td要素などに変換し、それらをそのtable要素内に追加する。
パスの指定の仕方は、class属性の二つ目に"src-パス"のように記述する(例 class="tsv src-hoge.tsv")
tsvファイルの一行目はヘッダ段になる(すべてth要素になる)。また、一行目に$anchor$という文字を含む列はデータがすべてa要素のhref属性に格納され、「リンク」という文字列が表示されるようになる。

※tsvファイルとは、タブ文字"\t"で区切られた表である。エクセルから直接コピペするとこの形式なる。

idとclass

id属性やclass属性は単体では意味を成さないが、スクリプトやCSSで特定の要素のみを扱う際にid属性やclass属性が付加されていると便利である。
class属性は特に制限なく使用できるが、id属性は属性値の重複ができないため、同じ属性値を複数の要素で使用してはいけない。

目的別リファレンス

見出しをつけたい

h1, h2, h3要素で囲む。
MIRS1701ライブラリを使っている場合、"no-numbering"というclass属性を持たない全てのh1, h2, h3要素の文頭に見出し番号が振られる。

文章を書きたい

p要素で囲む。なお、p要素は段落ごとに区切るべきである。

改行をしたい

br要素を改行箇所に配置する。br要素は閉じる必要はない。
また、pre要素で囲んだ範囲は改行や空白が省略されない。

箇条書きをしたい

番号なしならul、番号つきならol要素で囲み、その中にli要素で囲んだ箇条書きの内容を配置する。

図を挿入したい

figure要素で囲んだ中にimg要素を入れる。また、figcaption要素でキャプションをつけられる。図のキャプションは一般的には図の下であるため、imgタグの次にfigcaption要素を配置するべきである。
MIRS1701ライブラリを使っている場合、figure要素に何らかのid属性を持たせると、直下に配置されたfigcaption要素の文頭に図表番号が振られる。

表を作りたい

table要素で囲んだ中にtr要素を入れる。 tr要素で囲んだ中身が表の段になるので、その中にtd, th要素を入れることでセルが作られる。 th要素は段の見出し、td要素はデータを入れる。
キャプションはtable要素内にcaption要素を入れることで作られる。表のキャプションは一般的には表の上であるため、tr要素の先にcaption要素を配置するべきである。
MIRS1701ライブラリを使っている場合、table要素に何らかのid属性を持たせると、直下に配置されたcaption要素の文頭に図表番号が振られる。

目次

本ドキュメントについて

作成者