htmlの基本〜ちょっと修正したい人向け〜
htmlを普段0から書かないけれど、ちょっと修正とかしたい人向けのマニュアルです。
まずは基本的なタグの解説から行います。
htmlは「 <> 」始まり「 </> 」終わりで書いていきます。
例えば、テキストにリンクをつけたい場合は、「<a href=”###dummy###” target=”_blank”>ここをクリックしてね</a>」という書き方をしていきます。
imgタグ等の例外を除いて<>で始まり</>で終わると覚えてください。
また、これらのタグを入れる場合は別のタグを跨いで閉じることはできません。
（例）
【誤】<div><p>ここに文章</div></p>
【正】<div><p>ここに文章が入る</p></div>
■インライン要素とブロック要素
タグには「インライン要素」と「ブロック要素」というものがあります。
「インライン要素」・・・<a><span><img>等
「ブロック要素」・・・<div><p><ul>等
ものすごく噛み砕いていうと「インライン要素は何も指示を出さなくても横に並ぶ」「ブロック要素は何も指示を出さなくても縦に並ぶ」とイメージしてください。
<a>インライン要素はこうやってhtmlでは縦にしても</a>
<a>改行タグとかCSSで指示をしない限り横に並ぶ</a>
<div>ブロック要素は逆に横に並べても</div><div>改行タグやCSSで指示を出さない限り縦に並ぶ</div>
また、インライン要素は横に並ぶものなのでそのままCSSで上下に余白をつけようとしてもつけることができません。
（インライン要素の上下に余白をつける場合は
■よく出るタグの説明
<h1></h1>・・・エイチワン。h1〜h6まである。見出しタグ。文章内のただの見出しということではなく、構成としてここが見出しになるというものなので何でもかんでも見出しタグは使わないようにしましょう。
また、必ずh1から使って順番にh2、h3、h3、h3・・・なるようにしましょう。
<div></div>・・・ディブ。ブロック要素。なんでも中に入れることができる便利なタグ。
<p></p>・・・ピー、ピータグ。ブロック要素。文章のひとかたまり（段落）を囲むためのタグ。
<a></a>・・・エータグ。正式名称はアンカー（目印）タグ。リンクをつけるので「リンクタグ」と読んでしまうことがありますが、リンクタグは「link」というものがあるので全くの別物。
別のページに飛ばしたり、ページ内のアンカー（目印）の場所に移動させたりできます。ゲーム用語で言うところのワープポイント。
<table>・・・テーブル。テーブルタグ。表を作るためのタグ。<table>で囲った中に<tr><td><caption><thead><tfoot><tbody>・・・と入れ組み合わせて使う。詳しくは次の項目で解説します。
■tableタグの解説
一番シンプルで基本的なタグのみ解説します。下記以外にもテーブルのキャプションやヘッダー、フッターを示すタグもあります。整えるための表ならあまり使いませんが、データを表で示す場合は適切に使用するようにしてください。
<table>・・・テーブルのひとかたまりを示すタグ。
<tr>・・・この中に入ったものは全て横に並ぶ。エクセルで言うところの行
<th>・・・表の項目（タイトル）を示すタグ。tableのhタグ。
<td>・・・表のデータを示すタグ。tableのdeta。
この4つを使えば最低限テーブルになります。
＞タイトルが横並び
<table border=”1″>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
＞タイトルが縦並び
<table border=”1″>
<tr>
<th>タイトル1</th>
<td>内容2</td>
</tr>
<tr>
<th>タイトル2</th>
<td>内容2</td>
</tr>
</table>
