サカシタネットデザイン

HOME > 講習会資料 > 色々なタグの使い方

HTMLの雛形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body></body>
</html>

いろいろなタグ

タグ内容をコピペ(コピー&ペースト)してお使いください


画像を表示させるタグ

標示内容 タグ内容
文字
文字
文字
文字
文字

回り込み解除
<img src="2448007_150.jpg" align="bottom"> 画像の下ラインに文字位置がくる<br clear="all">
<img src="2448007_150.jpg" align="middle"> 画像の中央に文字位置がくる<br clear="all">
<img src="2448007_150.jpg" align="top"> 画像の上ラインに文字位置がくる<br clear="all">
<img src="2448007_150.jpg" align="right">画像右端寄せ<br clear="all">
<img src="2448007_150.jpg" align="left">画像左端に寄せ<br clear="all">
<br clear="all">回り込み解除

リンクを張るタグ

標示内容 タグ内容
トップページ サカシタネットデザイン メール <a href="index.html">トップページ</a>
<a href="http://saka4ta.net">サカシタネットデザイン</a>
<a href="mailto:hsaka@saka4ta.net">メール</a>

ページ内の特定行にリンクを張るタグ

標示内容 タグ内容
アンカータグ <a name="top">アンカータグ</a>

特別なタグ

標示内容 タグ内容

文字コードを指定する
<!--注釈を記入する -->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

レイアウトタグ

標示内容 タグ内容

改行
改行
     半角スペース5つ
引用文
<br>
<pre>改行
改行</pre>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;半角スペース5つ
<BLOCKQUOTE>引用文</BLOCKQUOTE>


ブロックで指定するタグ

標示内容 タグ内容
中揃え
右揃え
左揃え
<div align="center">中揃え</div>
<div align="right">右揃え</div>
<div align="left">左揃え</div>

文字の色を変えるタグ

標示内容 タグ内容
■黒(#000000)
■グレー(#808080)
■シルバー(#c0c0c0)
■白(#ffffff)(ここは白なのでバックが白の場合は見えません)
■ピンク(#ff00ff)
■紫(#800080)
■栗色(#800000)
■赤(#ff0000)
■黄(#ffff00)
■ライム(#00ff00)
■緑(#008000)
■青緑(#008080)
■青(#0000ff)
■ネイビー(#000080)
■アクア(#00ffff)
■オリーブ(#808000)
<font color="black">■黒(#000000)</font><br>
<font color="gray">■グレー(#808080)</font><br>
<font color="silver">■シルバー(#c0c0c0)</font><br>
<font color="white">■白(#ffffff)</font>(ここは白なのでバックが白の場合は見えません)<br>
<font color="fuchsia">■ピンク(#ff00ff)</font><br>
<font color="purple">■紫(#800080)</font><br>
<font color="maroon">■栗色(#800000)</font><br>
<font color="red">■赤(#ff0000)</font><br>
<font color="yellow">■黄(#ffff00)</font><br>
<font color="lime">■ライム(#00ff00)</font><br>
<font color="green">■緑(#008000)</font><br>
<font color="teal">■青緑(#008080)</font><br>
<font color="blue">■青(#0000ff)</font><br>
<font color="navy">■ネイビー(#000080)</font><br>
<font color="aqua">■アクア(#00ffff)</font><br>
<font color="olive">■オリーブ(#808000)</font><br>

文字の種類を変えるタグ

標示内容 タグ内容
太字(Bold)
取消線(Delete)付き
強調(Emphasize)
斜体(Italic)
内容の追加(Insert)
下線(Underline)付き
取消線(Strikeout)付き
取消線(Strike-through)付き
強調(Emphasize)
通常の位置上つき(Superscript)
通常の位置下つき(Subscript)
<b>太字(Bold)</b><br>
<del>取消線(Delete)付き</del><br>
<em>強調(Emphasize)</em><br>
<i>斜体(Italic)</i><br>
<ins>内容の追加(Insert)</ins><br>
<u>下線(Underline)付き</u><br>
<s>取消線(Strikeout)付き</s><br>
<strike>取消線(Strike-through)付き</strike><br>
<strong>強調(Emphasize)</strong><br>
通常の位置<sup>上つき</sup>(Superscript)<br>
通常の位置<sub>下つき</sub>(Subscript)<br>

見出しを記述するタグ

標示内容 タグ内容

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

段落タグ

標示内容 タグ内容

段落

<p align="center">段落</p>

リスト表示するタグ

標示内容 タグ内容
  1. デフォルトはアラビア数字
  2. デフォルトはアラビア数字
  3. デフォルトはアラビア数字
<ol>
<li>デフォルトはアラビア数字</li>
<li>デフォルトはアラビア数字</li>
<li>デフォルトはアラビア数字</li>
</ol>
  1. 大文字アルファベット
  2. 大文字アルファベット
  3. 大文字アルファベット
<ol type="A">
<li>大文字アルファベット</li>
<li>大文字アルファベット</li>
<li>大文字アルファベット</li>
</ol>
  1. 小文字アルファベット
  2. 小文字アルファベット
  3. 小文字アルファベット
<ol type="a">
<li>小文字アルファベット</li>
<li>小文字アルファベット</li>
<li>小文字アルファベット</li>
</ol>
  1. ローマ数字(大)
  2. ローマ数字(大)
  3. ローマ数字(大)
<ol type="I">
<li>ローマ数字(大)</li>
<li>ローマ数字(大)</li>
<li>ローマ数字(大)</li>
</ol>
  1. ローマ数字(小)
  2. ローマ数字(小)
  3. ローマ数字(小)
<ol type="i">
<li>ローマ数字(小)</li>
<li>ローマ数字(小)</li>
<li>ローマ数字(小)</li>
</ol>

水平線を引くタグ

標示内容 タグ内容




<hr />
<hr width="100" size="5">
<hr width="50" size="10">
<hr noshade>

センタリングするタグ

標示内容 タグ内容
センター
<center>センター</center>

表示位置指定要素するタグ

標示内容 タグ内容
表示位置指定する align="center"
右より表示 align="right"
左より表示 align="left"
<h1 align="center">侮ヲ位置指定する align="center"</h1>
<h1 align="right">右より侮ヲ align="right"</h1>
<h1 align="left">左より侮ヲ align="left"</h1>

引用表示するタグ

標示内容 タグ内容
引用文を表示するタグ
<blockquote>引用文を侮ヲするタグ</blockquote>

テーブルの作成タグ

標示内容 タグ内容
2列を一つに
項目1 項目2
1-1 1-2
2-1 2-2
3-1 3-2
<table border="1">
<tr>
<th colspan="2">2列を一つに</th>
</tr>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>

その他テーブル関連タグ

標示内容 タグ内容
表題
3列を一つに
  項目1 項目2
データ1 1-1 1-2
データ2 2-1 2-2
データ3 3-1 3-2
<table border="1">

<CAPTION>舞・amp;lt;/CAPTION>
<tr>
<th colspan="3">3列を一つに</th>
</tr>
<tr>
<th> </th>
<th>項目1</th>
<th>項目2</th>
</tr>
<tr>
<th>データ1</th>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<th>データ2</th>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<th>データ3</th>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>

文字の大きさを変える「font」 タグ

標示内容 タグ内容
フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6
フォントサイズ7
<font size="1">フォントサイズ1</font>
<font size="2">フォントサイズ2</font>
<font size="3">フォントサイズ3</font>
<font size="4">フォントサイズ4</font>
<font size="5">フォントサイズ5</font>
<font size="6">フォントサイズ6</font>
<font size="7">フォントサイズ7</font>

Copy Right Sakashita Net Design Since 1997

HOME

Windows

Mac

Linux

Link

Support

HOBBYIST


xrea.com