WEB作成講座
このページでは、私が頻繁に使用するタグを紹介しています。
設定可能な属性として紹介していますが、実際は私が使うであろう属性を紹介しています。（この他にも、設定できる属性は多くあるということです。）
多分、紹介しているもの以外の属性は、他の人も使うことは滅多に無いと思います。
頻繁に使うタグの説明
<html> - HTML文章であることを宣言するためのタグ
htmlタグは、この文章はHTMLで書かれていますと示すためのタグです。
HTML文章には必ず必要なタグで、HTML文章の最初から最後までを囲んでいます。
下のひな形のようにxml宣言、DOCKTYPE宣言、headタグ、titleタグ、bodyタグとセットで覚えてしまいましょう。（xml宣言、DOCKTYPE宣言はHTMLの文法のところで詳しく説明しています。）
使用可能属性ですが、下のひな形に付いている３つの属性のみを、ひな形と覚えておけばよいでしょう。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" >
<head>
<title></title>
</head>
<body>
</body>
</html>
- xmlns属性（必須）
- xmlのネームスペースを指定します。
xmlns="http://www.w3.org/1999/xhtml"と指定することになっています。- xml:lang属性（必須）
- 使用言語を指定します。日本語は、
xml:lang="ja"と指定します。 - dir属性（推薦）
- 言語の表記方向を指定します。
dir="ltr"（left to right）と指定してください。日本語（横書き）は、左から右記述するためです。- rtlと指定するのは、ヘブライ語などの右から左へ記述していく言語の場合です。
<head> - HTML文章のヘッダ部
headタグは、HTML文章のヘッダ部はココからココまでですと示すためのタグです。
一部のタグが、このheadタグの内側で使用されます。例えば、titleタグ、metaタグ、linkタグなどです。
HTML文章には必ず必要なタグです。htmlタグのところにあるひな形のとして覚えてしまえばよいでしょう。
指定可能な属性はいくつかありますが、このタグに属性を設定する必要は無いでしょう。
<body> - HTML文章のボディ部
bodyタグは、HTML文章のボディ部はココからココまでですと示すためのタグです。
ほとんどのタグは、このbodyタグの内側で使用されることになります。
HTML文章には必ず必要なタグです。htmlタグのところにあるひな形のとして覚えてしまえばよいでしょう。
指定可能な属性はいくつかありますが、このタグに属性を設定する必要は無いでしょう。
<title> - HTML文章のタイトル
titleタグは、HTML文章のタイトルを指定するためのタグです。
通常、このタグの間に書かれた文字列はブラウザのウインドウのタイトル部に表示されることになります。
HTML文章には必ず必要なタグです。htmlタグのところにあるひな形のとして覚えてしまえばよいでしょう。
指定可能な属性はいくつかありますが、このタグに属性を設定する必要は無いでしょう。
<h1>～<h6> - 文章の見出し
h1～h6のタグは、文章の見出しという意味を持たせるためのタグです。
h1が1番大見出しで、h6が小見出しということなります。（いい加減な表現です。）下の図を見ていただければ、なんとなく分かると思います。
このタグで囲まれた文字列は、太字で強調されて表示されます。文字の大きさは、h1が１番大きく、h6が１番小さく表示されます。
このタグを使用するときの注意は、順番を守るということです。うまく説明できないので、下の例を参考にしてください。
良い使い方
<h1>大見出し</h1>
<h2>中見出し</h2>
<p>文章</p>
<p>文章</p>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>文章</p>
悪い使い方
<h1>大見出し</h1>
<h4>中見出し</h4>
<p>文章</p>
<p>文章</p>
<h3>中見出し</h3>
<h5>小見出し</h5>
<p>文章</p>
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- 例えば、
title="見出しタグ（良い使い方）"のように使います。（良い使い方のサンプルソースにカーソルを乗せてみてください。） - class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<p> - 段落
HTML文章の段落を作成します。
日本語の小段落の事を指していると思ってください。基本的に、文章はこのタグ内に記述することになります。このタグが、１番使用頻度の高いタグでしょう。
（私の感覚では、）２、３文を小段落として、それぞれこのタグで囲んでいけばよいと思います。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<img /> - 画像の挿入
画像を挿入します。
このタグは空要素のため、終了タグは必要ありません。ただし、<img />のように記述する必要があります。
- src属性（必須）
- 表示する画像へのパスを設定します。
- 例えば、
src="./images/logo.png";のように指定します。 - width属性（必須）
- 画像の表示サイズ（横幅）を設定します。
- 例えば、
width="100"のように指定します。単位はpx（ピクセル）ですが、単位を記述してはいけません。 - height属性（必須）
- 画像の表示サイズ（縦幅）を設定します。
- 例えば、
height="80"のように指定します。単位はpx（ピクセル）ですが、単位を記述してはいけません。 - alt属性（必須）
- 画像の代替文字列を設定します。
- 代替文字列とは、ブラウザが画像を読み込めなかった際に代わりに表示される文字列のことです。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- 例えば、自分が描いた犬の絵を挿入したのならば、
alt="私が描いた犬の絵"のように指定してください。 - title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<a> - ハイパーリンクの作成
ハイパーリンクを作成します。
通常のリンクの場合は、<a href="http://www.google.com">Google</a>のように記述します。
メールア,ドレスのリンクの場合は、<a href="mailto:address@test.com">address@test.com</a>のように記述します。
ページ内リンクの場合は、リンクしたい要素にid属性を付けます。例えば、<h1 id="top">のようにします。その場合は、<a href="#top">とすればそのページのtopというidが付いた要素の位置にリンクがされます。
同じページ内ならば、href="#top"などとすればよいのですが、他のHTML文章からその位置にリンクするときは、href="../index.html#top"のように指定します。
- href属性（推薦）
- リンク先のURI（Uniform Resourse Identifier）を指定します。
href="http://www.google.com"のように指定します。- メールアドレスのリンクの場合は、
href="mailto:address@test.com"のように指定します。 - URIの指定方法は、フルパスでの記述のほか、HTML文章を基準とした相対パスでの指定も可能です。
- accesskey属性（推薦）
- リンクにアクセスキーを設定します。
- 「Altキー」＋「アクセスキー」で、リンクにフォーカスを移すことが出来ます。
- accesskey属性（推薦）
- リンクにタブインデックスを設定します。
- TABキーを押していくことで、リンクにフォーカスを移すことが出来ますが、その優先順位を指定します。
- 数字が小さいほど、優先順位が高く、TABキーを押す回数が少なくなります。
- title属性（推薦）
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<em> - 強調
強調を示すときに使います。
文章の中の強調したい部分を囲んでください。通常、このタグで囲まれた文字列は、イタリック体（斜体）で表示されます。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
<strong> - 強い強調
強い強調（emよりさらに）を示すときに使います。
文章の中の強調したい部分を囲んでください。通常、このタグで囲まれた文字列は、ボールド体（太字）で表示されます。
- title属性
- タグにタイトルを設定します。
- この属性を設定したタグの上にカーソルを持っていくと、設定された文字列がツールチップとして表示されます。
- class属性
- タグを仲間分けしてCSSを適用する時に使います。
- id属性との違いは、一つのページに複数指定可能なことです。
- 詳しくは、CSSの説明のページで説明します。
- id属性
- タグにID（識別文字）を指定してCSSを適用したり、リンク先の指定をする時に使います。
- id属性は、同じページ内に同じ名前のid属性を指定することは出来ません。
- 詳しくは、CSSの説明のページで説明します。
