まずはじめに、HTMLとCSSについて学んでいきましょう。
すべてのWeb技術のフロントエンドにあたりますので、わからない方はしっかり覚えていきましょう。
HTMLという呼び名について
HTMLとは、（HyperText Markup Language）の略です。
HyperTextとは、相互にリンクし合う複数のページで構成されるコンテンツのことです。
Markup Languageとは、一定の記法に沿って、それぞれの情報に意味づけを行うテキストデータのことです。
Markup Languageの種類としては、以下のようなものがあります。
- XML：システム同士のデータ交換などで利用
- YML：システムの環境設定用のファイルなどで利用
テキストエディタ
Windows標準メモ帳ではやりづらいです。
テキストエディタをインストールしていない方は、以下から『サクラエディタ』をインストールしましょう。
V2(Unicode版)で良いと思います。
高機能な開発者用エディタなどは色々ありますが、シンプルなテキストエディタは、様々な局面で役に立ちます。
インストールしたら、Windows画面下のツールバーなどにドラッグしておくと、いつでも起動できて便利です。
なお、サクラエディタについては、以下の方法で『タブバーを表示する』にチェックを入れておくと便利です。（複数のテキストファイルをタブ切り替えにすることができます）
共通設定 『タブバー』プロパティ
HTMLの作成
実際にHTMLを作成して、ブラウザで表示してみましょう。
まずは以下をデスクトップなどに保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テストページ</title>
</head>
<body>
こんにちは！
</body>
</html>
上記を保存してブラウザにドロップすると、ページが表示されるはずです。
もし「こんにちは！」と表示されずに、妙な文字化けが起きているようなら、ファイルを保存する際に、文字エンコーディングを『UTF-8』と指定して保存してください。
文字エンコーディングについて
コンピュータの世界には文字エンコーディングというものがあります。
これは別名で、
- キャラクターセット
- 文字コード
などと呼ばれますが、すべて同じ意味です。
文字エンコーディングは、国や言語やシステムごとに様々なものがあり、日本では以下の文字エンコーディングが主に利用されています。
UTF-8（UTF8）
最近のシステムの主流です。HTMLやPHPのソースコードも、データベースも、基本的にはUTF-8にします。
UTF-8では日本語以外にも複数の国の言語を扱えます。
UTF-8を保存する場合には、BOMありとBOMなしを選べることがあります。
詳しくは個別に調べて頂く必要がありますが、初心者は『とりあえず常にBOMなしで保存』としておいてください。
SJIS（Shift_JIS）
Windows標準の、英数字と日本語を扱える文字コードです。
以前のWebページで使われていましたが、最近はあまり見ません。
UTF-8に比べて文字化けなどのトラブルが起きやすいため、今後はWeb開発で使う必要はありません。
※一部の古いガラケー向けのサイトなどでは必要かも知れませんが・・
EUC-JP
Linuxで利用できる文字コードのひとつで、日本語を扱う場合に使うことが多かったものです。
以前のWebページで使われていましたが、最近はあまり見ません。
UTF-8に比べて文字化けなどのトラブルが起きやすいため、今後はWeb開発で使う必要はありません。
ISO-2022-JP（JIS）
Webページの表示には使いませんが、メール送信の際に使われる日本語用の文字コードとなります。
メール送信する場合は、この文字コード（ISO-2022-JP）が主流です。
ただし日本語専用の文字コードですので、多国語対応が必要な場合はUTF-8にすべきです。
かなり古いメールクライアントでは文字化けなどがありえますが、近年はUTF-8でメールを送ってしまってほぼ問題ありません。
まとめ
Web開発では『UTF-8』を使う。メールのみは『ISO-2022-JP』を使う。
HTMLの基本
ここで簡単に、HTMLの仕組みを解説します。
なお、HTMLの書き方は色々ありますが、今回はもっとも一般的かと思われる書き方のみ扱います。
DOCTYPE
HTMLの最上部には、<!DOCTYPE html>を記載します。まずはそういうものだと覚えておいてください。
HTMLはタグの組み合わせで表現されている
HTMLは入れ子になったタグを組み合わせて、さまざまな情報の構造を表現します。
たとえばこのサイトについても、ブラウザに表示される時点では、すべてHTMLになっています。（PHPなどのサーバサイドのプログラムで、HTMLを生成しています）
そこで試しに、このサイトのHTMLソースを表示してみましょう。
まず、画面上で右クリックをしてみてください。すると、メニューが表示され、その中に『ソースを表示』という項目が出てくると思います。（ブラウザにもよりますが、通常は同じ手順になります）
『ソースを表示』をクリックすると、以下のようなHTMLソースを確認できます。
HTMLタグの種類について
非常に多くのタグがあるため、きちんと学ぶには書籍や専門のサイトをご覧ください。以下のサイトなどは非常に見やすく、お勧めです。
主要なタグとして、以下を覚えておけばまずは用が足りると思います。
HTML基礎になるタグ
- html
- head
- body
外部のファイル読み込みや、javascriptの定義に使うタグ
- link
- script
- style
表組みの表示に使うタグ
- table
- tr
- th
- td
ブロック要素のタグ
- div
- h1
- h2
- h3
- p
- form
- hr
- ul
- li
- ol
※ブロック要素とは、タグの場所が改行される種類のタグのことです
インライン要素のタグ
- a
- span
- input
- textarea
- select
- img
- br
- strong
- font
- label
※インライン要素とは、タグの場所が改行されず、左につながっていく種類のタグのことです
開始タグと閉じタグ
タグの中には、閉じタグが必要なものと、不要なものがあります。
閉じタグが不要なもの（付けてはいけないタグ）
以下のタグについては、閉じタグを付けると正常に表示できなくなるため、付けてはいけません。
- input
- br
- hr
- img
- meta
- link
閉じタグが必要なタグ
厳密には、閉じタグが必須なものと、省略してもよいものと混在します。
わかりにくいので、上記の閉じタグが不要なもの以外は、全部閉じる必要があると覚えておきましょう。
インデントについて
HTMLのコーディングについては、通常は半角スペースを2文字続けることで、タグの入れ子構造を表現しています。（これをインデントと呼びます）
見易さのためにも、きちんとインデントすることをお勧めします。
スタイルシートを使ってみる
そろそろスタイルシート（CSS）を使ってみます。
CSSの設定方法には、『埋め込み型』『インライン型』『外部呼出し型』の３種類があり、『外部呼出し型』が管理上お勧めです。
（小規模利用や、試験的なデザイン変更の場合は、『埋め込み型』『インライン型』を使うケースがあるのも実情です）
埋め込み型
前述のHTMLファイルを以下のように修正しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テストページ</title>
<style>
body{
background: blue;
}
</style>
</head>
<body>
こんにちは！
</body>
</html>
上記をブラウザで読み込むと、背景が青くなったはずです。
このように、スタイルシート（CSS）を使うことでページのデザインを設定することができます。
インライン型
以下のように、要素に直接書き込むこともできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テストページ</title>
</head>
<body style="background:blue;">
こんにちは！
</body>
</html>
外部呼出し型
以下のように、別ファイルとして切り出すこともできます。（推奨）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>テストページ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
こんにちは！
</body>
</html>
body{
background:blue;
}
