簡単なHTMLは知っているけど、実際のテンプレートファイルとかを見るとよくわからなくなる人向けの記事です。HTMLとCSSの最低限の知識をつけるのが目標で、自分の勉強も兼ねてまとめています。

詳細なHTMLの仕様説明が欲しい方はそれ専用のサイトをご覧ください。この記事を書くにあたって参考にさせてもらっています。

http://www.htmq.com/html5/br.shtml
http://www.tohoho-web.com/html/index.htm

この記事では、テンプレとかでよく見るけどいまいちよく分からないタグに話を絞って書きます。正直こういう記事を見るよりも自分で書いて動かすのがいちばん覚えるので、ぜひ一緒にどうぞ。最初に自分が作ったhtmlファイルの確認の仕方を説明します。

HTMLファイルの見方

まずは好きなところにexample.htmlというファイルを作ってください。中身はhelloとか適当な文字列を書いておきましょう。これをブラウザ（SafariでもChromeとか）で開きます。入れるのは以下。

file:///(htmlファイルまでのパス)/example.html

デスクトップにexample.htmlを作った田中さんとかなら
file:///User/tanaka/Desktop/example.html
みたいな感じです。（ここら辺は正直適当）

これでそのブラウザで開くとhelloという文字列が表示されているはずです。エラーが出るときは基本的にパスが間違っているはずなので、よく見直してください。

↑こんな感じのシンプルな表示。表示ができたら、あとは適当にいろんなタグを試しましょう。

HTMLタグ

まずは用語の説明。タグ内で指定するものを属性という。
属性の例としては、<img>タグのsrc属性。これは写真を表示するファイルを示す。

例　<img src="example.png">

属性の中には、ほとんどのタグが持つグローバル属性というものもあり、id属性とかstyle属性とかがある。（これについては後述）

ここから、テンプレートとかでよく見るけど、意味がわかりづらいHTMLタグを中心に紹介します。

<meta>

その文章のメタ(meta)情報を示すもの。charset属性は文字エンコーディングの指定。name属性とcontent属性では、セットでその文章の説明を入れます。例えばnameが"auther"ならcontentには著者名を入れる、nameが"keywords"ならcontentにその文章を説明したキーワードを入れる、という感じ。他にもnameとcontentの組み合わせはあるがここでは省略。あとはhttp-equiv属性もある。

コード例
<meta charset="Shift_JIS">
<meta name="author" content="tanaka">

<h1>

見出し(heading)。h1からh6まであって数字が小さいほど大きい。h7は存在しないので、無視されて普通の文字サイズになる。

コード例

<metacharset="utf-8">←文字化けする人はこれを入れる
<h1>h1 あいうえお</h1><h2>h2 あいうえお</h2><h3>h3 あいうえお</h3><h4>h4 あいうえお</h4><h5>h5 あいうえお</h5><h6>h6 あいうえお</h6><h7>h7 あいうえお</h7>

表示例

<br>

改行(break)を表す。htmlファイル上の改行は反映されないことに注意(下の例だと、aiueoと123の間にコード上では改行が入っているが、表示では改行されていない)。

コード例

aiueo
123
<br>
hello

表示例

<ul>

順序のないリスト(unsorted list)を表す。<li>で要素を示す。ちなみに順序のあるリスト(ordered list)は<ol>を使う。使い方はほぼ一緒。

コード例

<metacharset="utf-8">←文字化けする人はこれを入れる
<ul><li>みかん
  <li>りんご
</ul>

表示例

一旦タグの紹介を止めて、CSSについて説明します。

CSSについて

簡単にいうと、その文章のレイアウトや見栄えをよくするコンピュータ言語。文章の見栄えをよくするための言語をスタイルシート言語（スタイリング言語）というが、CSSはその中で代表的な言語の一つ。

HTMLでCSSを使う方法にはいくつか種類がある。代表的なのは<style>タグを用いる方法。

<style>

スタイルシートを記述するのに使う。

コード例

<style>h5{color:red}</style><h4>h4 あいうえお</h4><h5>h5 あいうえお</h5><h6>h6 あいうえお</h6>

このように<style>タグで囲まれた中にスタイルシート言語を書く。今回の例はh5 { color:red }の行がCSSで書かれていて、文章内の<h5>タグは赤色にするという意味。

表示例

<h5>の部分だけ赤くなっているのがわかる。

次にスタイルシートを記述する方法として、タグの中に埋め込むという方法がある。

<div>

区分(division)。style属性を用いて、このタグで囲まれた範囲のページレイアウトやスタイルを指定する。

コード例
<div style=" background-color:black; color:white;">あいうえお</div>

表示例

また多くのタグは、idやclassという属性（グローバル属性）を持っている。これらはそのタグを名前づけており、これをCSSで指定してスタイリングすることが可能。

コード例

<style>#id1{color:red}.class1{background-color:black;color:white;}</style><divid="id1">あいうえお</div><divid="id2">かきくけこ</div><divclass="class1">さしすせそ</div><divclass="class2">たちつてと</div>

表示例

style内で、id名を使うときは#をclass名を使うときは.を使用していることに注意（#id1と.class1）。この例ではid1というidを持つものや、class1というclass名を持つものだけにCSSが適用されている。

<p>

段落(pragraph)を表す。<p>から</p>で囲まれた部分を一つの段落とみなす。これもstyle属性を持つのでその段落だけにスタイルを適用することが可能だし、id属性やclass属性なども持つ。

コード例

<style>p.class1{background-color:black;color:white;}</style><pclass="class1">あいうえお</p><divclass="class1">かきくけこ</div>

表示例

CSSの指定方法として、タグ名.クラス名(コード上ではp.class1)という指定の仕方も可能で、これにより同じクラス名前でもタグによって指定を変えることが可能。

<link>

文章に関連するリンク(link)を示す。rel属性にその文章の関係を示し、href属性にその文章のリンクをおく。例えば、rel="icon"ならhrefにアイコンの写真ファイルを置いたり、rel="stylesheet"ならhrefにその文章に適用したいCSSファイルを置いたりなど。

コード例
<link rel="icon" href="example.ico">
<link rel="stylesheet" href="example.css">

<a>

リンクを貼る。anchor（アンカー：船を繫ぎ止めるやつ）の略です。

コード例
<a href="index.html">目次に戻る</a>

表示例

<script>

JavaScriptなどのスクリプトやデータブロックを組み込むのに使う。type属性にはスクリプト言語やデータ形式を指定する。デフォルトはtype="text/javascript"で、JavaScriptを使う際は省略可能。src属性でスクリプトファイルを指定。

コード例　<script src="./sample.js"></script>

JavaScriptなんかでは、例えばクリックしたら動作するもの（投票ボタンを押して、投票結果が出てくるアプリとか）が作れます。これをjsファイルで作ってこのタグで記述することで、ホームページ上にそのアプリを埋め込むことが可能になります。

まだまだタグはありますが、とりあえずはここまで。時間があればまた追記します。