>>>HOME >>>HTML基礎知識 >>>HTML解説
ようこそ「HP-Knowledge」へ。このホームページは、「ホームページ作成・制作」におけるHTMLとCSS(スタイルシート)の基礎知識を紹介するホームページ作成初心者向けのページです。ホームページを作るために知っておくべきHTMLとCSS(スタイルシート)の基礎知識を身につけてホームページ作成に強くなろう!

HTML解説

HTMLではタグを指定してやることで、ホームページに様々な効果を持たすことが出来ます。まずはどんな種類のタグがあって、どのような効果を持っているのかを勉強しましょう。HTMLタグは日本で記述されていないので覚えにくいかと思いますが、大丈夫。少しずつ、覚えていけばいいんです。基本的なタグを理解するだけでもホームページ作成に十分役立ちます。似たようなタグや毎回使うタグはホームページを作成するうちにタグ辞典を見なくても記述できるようになるハズです。ホームページ作成に慣れる=タグにも慣れるということになります。

HTMLの構成

HTMLの構成で頻繁に使われるタグをリストアップしてみました。

<div>~</div>

CSSでホームページをデザインする時の要となるタグ。よく「divで囲む」といった表現で使われます。ブロックや箱をイメージするとわかりやすいかも。といった感じ。複数の要素をひとまとめにする時などに使用します。

<h○>~</h○>

○は1~6までの任意の数字を入力します。このタグは「見出しタグ」とも呼ばれ、その名の通り見出しに使います。数字が小さいほど囲んだフォントが大きくなり、逆に数字が大きいほどフォントサイズは小さくなります。

<p>~</p>

段落を意味するブロック要素を持ったのタグ。「p」で囲まれた文章は、コンピューターに「一つの段落」として認識されます。メインテキストなどは大体このタグで挟むことになります。

<span>~</span>

英語で「span」は「~の間/期間」という意味になりますが、タグにおいても概ね同じ理解で大丈夫です。pタグではさまれた文章の一部分だけフォントサイズやカラーを変えたいという時などに使用することになります。

<a>~</a>

リンクを張るときに使用するタグです。文章の途中に入れることでこんなふうにリンク表示されることになります。

<img>

画像を表示するときに使用するタグです。画像をたくさん使うとページを表示するまで時間がかかるので画像の乱用は注意しましょう。

<br>

文章の改行で使われるタグです。綺麗なソースのホームページほどこの改行が少ない傾向にあります。乱用厳禁のタグ。

<ul>~</ul>

リスト書きをするためのタグ。「ul」タグは必ず「li」タグと併用することになります。

<li>~</li>

リスト書きリスト部分を表すタグ。ひとつのliタグで1リストになります。例↓

  • リスト1
  • リスト2
  • リスト3

役立つタグ

使いこなせればホームページ上での表現の幅を広げることができ、HTMLが正しく使えるようになります。がんばって覚えましょう。

<dl>~</dl>

用語説明タイプの箇条書きをする時に使うタグです。このタグは必ず「dt」、「dd」タグと併用することになります。

<dt>~</dt>

説明用語を表すタグです。上記「dl」タグ参照。

<dd>~</dd>

用語の説明を表すタグです。上記「dl」タグ参照。

<ol>~</ol>

順序をつけたリスト書きをする時に使います。これも「ul」タグと同じように「li」タグと併用することになります。

<table>~</table>

表を作成するテーブルタグです。「tr」、「td」タグと併用します。

<th>~</th>

テーブルの見出し部分を示すヘッダセルを表示するタグです。

<tr>~</tr>

表の横1行を定義するタグです。

<td>~</td>

表に配置されたセル一つ一つを定義するタグです。

aタグ

aがつくタグで利用することができる

href="○○"

○○にリンク先のアドレスを入力。これでリンク先に飛べるようになります。文章の途中に入れることでこんなふうにリンク表示されることになります。

target="○○"

○○に_blankを入力すればリンク先が別ウィンドウで開きます。しかしこのタグはあまり推奨されていないタグなので覚える必要はないかも・・・。

imgタグ

イメージ画像に持たせる効果 を指定できるタグたちです。

src="○○"

○○に画像アドレスを入力します。

width="○○"

○○に画像の幅を入力できます。px(ピクセル)などの単位をつける必要ありません。

height="○○"

○○に画像の高さを入力できます。widthと同じように、高さの単位をつける必要はないです。

alt="○○"

○○に画像説明を入力できます。音声式でガイドするパソコンだと、alt設定がされた画像の上にマウスを持っていくと○○で入力した文が読まれます。親切なホームページ設計には必須なタグです。

tdタグ

テーブルタグで利用するタグです。でもテーブルの乱用はページソースがゴチャゴチャとするので乱用は厳禁。

colspan="○○"

○○に数字を入力します。セルを横に連結させる時に使うタグです。

rowspan="○○"

○○に数字を入力。セルを縦に連結させるタグです。

属性を指定するタグ

上で紹介したタグすべてで利用可能 なタグです。併せて覚えましょう。

id="○○"

○○にはID名を入力します。主にスタイルシートを適用させる時に使います。ID名は好きな名前を付けることができますが、同じIDは1ページに1回しか使えません。

class="○○"

○○にはクラス名を入力します。IDと同じように好きな名前を付けましょう。IDと違う部分は、クラスは1ページに何度でも利用可能ということです。

おすすめWEBサイト 5選

2015/7/10 更新

Copyright(C)2008 HP-Knowledge. All Rights Reserved.