HTMLタグ一覧

htmlで使われるタグを列挙します。

htmlタグ

タグ

タグとは<と>で構成されるもので、例えば<p>がタグにあたります。　<p>は開始タグで、</p>は終了タグといいます。

終了タグが存在しない要素、例えばimgやbr、hrがあります。

要素

要素とは開始タグから終了タグまでの間のひとまとまりを指します。

<p>青空がほどけている</p>

これが要素です。

a：リンクタグ

<a href="http://xxx.com/next.html">次のページへ</a>

target=”"でリンク先の表示法を指定できる。

<a href="http://xxx.com/next.html" target="_blank">次のページへ</a>

target=”"でリンク先の表示法を指定できる。

  • _blank = 新しいウィンドウで表示
  • _parent = 親ウインドウで表示
  • 等

body：本体

<html> <head> <title>自家製　HP作成マニュアル</title> <body> <p>自家製　HP作成マニュアルへようこそ！</p> </body> </html>

br：改行

私は正直者です。<br />でもたまにウソをつきたくなる時も<br />ありますけど。
私は正直者です。
でもたまにウソをつきたくなる時も
ありますけど。

blockquote：引用

<blockquote> <p>我輩は猫である。</p> <p>名前はまだない。</p> </blockquote>

我輩は猫である。

名前はまだない。

h1～h6：見出し

<h1>自家製HP作成マニュアル</h1> <h2>HPの作り方</h2> <p>ホームページの作り方を掲載しています。</p> <h3>そもそもHPとは</h3> <p>HPとはこういうことなんです。</p> <p>以下h6まで続く・・・</p>

自家製HP作成マニュアル

HPの作り方

ホームページの作り方を掲載しています。

そもそもHPとは

HPとはこういうことなんです。

以下h6まで続く・・・

map：画像の複数領域にリンクを指定

<img src="map.jpg" width="100" height="100" border="0" usemap="#mapname"> <map name="mapname"> <area shape="rect" coords="111,112,113,114" href="test1.php" title="ラーメン屋"> <area shape="rect" coords="222,223,224,225" href="test2.php" title="蕎麦屋"> <area shape="circle" coords="33,44,55" href="test3.php" title="うどん屋"> <area shape="poly" coords="99,888,777,666,333,222" href="test4.php" title="おにぎり屋"> </map>

座標指定

  • circle：円形
  • rect：長方形
  • poly：多角形

p：段落

<p>静かである。</p> <p>山が、である。</p>

静かである。

山が、である。

：

table

<table> <tr> <th>a</th> <th>b</th> <th>c</th> </tr> <tr> <td>あ</td> <td>い</td> <td>う</td> </tr> </table>

上記ソースは以下のような表になる。

a b c
あ い う

ul,ol：リスト

<ul> <li>いくら</li> <li>たらこ</li> <li>かずのこ</li> </ul>
  • いくら
  • たらこ
  • かずのこ

olは番号付きリスト

<ol> <li>いくら</li> <li>たらこ</li> <li>かずのこ</li> </ol>
  1. いくら
  2. たらこ
  3. かずのこ

スタイルシート css

使い方：記述法

スタイルシートはこのように記述する。

h1{ font-size:100%; margin:0 0 0 20px; }

上記の例では、見出しh1を100%のフォントサイズで表示し、マージンを左側に20ｐｘもうけることを指示しています。

ではこのスタイルシートをどこに記述すればよいのか？　３つの方法があります。

  1. <style></style>内に記述
  2. タグ内に記述
  3. 別ファイルに記述し、link要素で読み込む

3の手法がスマートです。　HTMLからデザインを分離することによりシンプルになり、HTMLを修正することなく、デザインを変えたりできます。

使い方：classとid

  • classはページ中で何度も使われる
  • idはページ中一度だけ

a：hover,visited

リンクを装飾します。

a:link{color:#3366FF;} a:visited{color:#CC33FF;} a:hover{color:#33CCFF;} a:active{color:#339966;}

記述の順番が重要です。

  • a:linkはまだアクセスしたことのないリンク
  • a:visitedは既にアクセスしたことのあるリンク
  • a:hoverはマウスカーソルが乗ったときのリンク
  • a:activeは選択されている状態のリンク

line-height

行間を指定します。

p{ line-height:1.5; }

line-height:1.5px;のように、単位を指定しないほうが使いやすいです。

position

出現順に関係なく要素の位置を指定する。

#sample{ position:releative; （基準点を指定） } #test{ position:absolute; top:100px; left:20px; width:400px; （#sampleの上から100px、左から20pxの位置に指定） }

text-decoration

テキストの装飾。

  • text-decoration:line-through; = 取り消し線
  • text-decoration:underline; = 下線

メモ

  • 複数のclass属性を割り当てるには、半角スペースで区切りながらclass名を列挙すればよい。　<div class="a b">例</div>

自家製　HP作成マニュアル