HTML&CSS入門

更新:2016/12/30

まずはじめに、HTMLとCSSについて学んでいきましょう。
すべてのWeb技術のフロントエンドにあたりますので、わからない方はしっかり覚えていきましょう。

HTMLという呼び名について

HTMLとは、(HyperText Markup Language)の略です。
HyperTextとは、相互にリンクし合う複数のページで構成されるコンテンツのことです。
Markup Languageとは、一定の記法に沿って、それぞれの情報に意味づけを行うテキストデータのことです。
Markup Languageの種類としては、以下のようなものがあります。

  • XML:システム同士のデータ交換などで利用
  • YML:システムの環境設定用のファイルなどで利用

テキストエディタ

Windows標準メモ帳ではやりづらいです。
テキストエディタをインストールしていない方は、以下から『サクラエディタ』をインストールしましょう。

『サクラエディタ』ダウンロードページ

V2(Unicode版)で良いと思います。
高機能な開発者用エディタなどは色々ありますが、シンプルなテキストエディタは、様々な局面で役に立ちます。
インストールしたら、Windows画面下のツールバーなどにドラッグしておくと、いつでも起動できて便利です。
なお、サクラエディタについては、以下の方法で『タブバーを表示する』にチェックを入れておくと便利です。(複数のテキストファイルをタブ切り替えにすることができます)
共通設定 『タブバー』プロパティ

HTMLの作成

実際にHTMLを作成して、ブラウザで表示してみましょう。
まずは以下をデスクトップなどに保存してください。

page1.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
  </head>
  <body>
    こんにちは!
  </body>
</html>

上記を保存してブラウザにドロップすると、ページが表示されるはずです。

step1-010-css1

もし「こんにちは!」と表示されずに、妙な文字化けが起きているようなら、ファイルを保存する際に、文字エンコーディングを『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ソースを確認できます。

step1-010-1

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の設定方法には、『埋め込み型』『インライン型』『外部呼出し型』の3種類があり、『外部呼出し型』が管理上お勧めです。
(小規模利用や、試験的なデザイン変更の場合は、『埋め込み型』『インライン型』を使うケースがあるのも実情です)

埋め込み型

前述のHTMLファイルを以下のように修正しましょう。

page2.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
    <style>
    body{
      background: blue;
    }
    </style>
  </head>
  <body>
    こんにちは!
  </body>
</html>

上記をブラウザで読み込むと、背景が青くなったはずです。

step1-010-css2

このように、スタイルシート(CSS)を使うことでページのデザインを設定することができます。

インライン型

以下のように、要素に直接書き込むこともできます。

page3.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>テストページ</title>
  </head>
  <body style="background:blue;">
    こんにちは!
  </body>
</html>

外部呼出し型

以下のように、別ファイルとして切り出すこともできます。(推奨)

page4.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>
style.css
body{
  background:blue;
}
このページをシェア Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn