この記事ではHTML入門者を対象に、HTMLでできることや基本のコードと独学で学習するにあたってお勧めの書籍やサイトを解説します。HTMLはWebサイト作成の基本です。本記事ではHTMLでどのような表現が出来るかサマリー的に記載しますので、初心者の方は是非チェックして概要をつかんで下さい。
HTMLでできることは？
HTMLは「HyperText Markup Language」の略で、Webサイトの構造を定義するための言語です。HTML文書は、「要素」と呼ばれる様々な構成要素から成り立っています。例えばヘッダ、見出し、箇条書き、画像、ひとかたまりの文章等の「要素」を含み、それを定義するのが「<」と「>」で囲まれた「タグ」と呼ばれるものです。
作成したいページにはどのような要素があるのかをHTMLで定義することで、ブラウザに対してそれぞれのパーツの意味を伝えることが出来ます。
HTMLと一緒に使われる言語
css
「Cascading Style Sheet」の略で、HTMLとセットで記述します。HTML文書中の要素をどのように装飾するかを定義することで、文字の大きさや色等の見た目を決めることが出来ます。
HTMLの最新バージョンであるHTML5では、以前のバージョンではhtml内に記述できた属性(要素に対するオプション)が廃止になっているものもあり、その場合はcssに記述することで代替します。htmlでも一部の要素で装飾の記述は可能ですが、拡張性を高めるためにも装飾に関する記述はcssに記述していくようにしましょう。
JavaScript
動的な処理を記述するのがJavaScriptです。JavaScriptを記述することで、スライドショーやポップアップメッセージなど、コンテンツ内でHTMLだけでは表せない動的な表現をすることが出来るようになります。
HTMLの基本コード
タグは、基本的には開始タグと終了タグの2つのセットで1つの要素を表します。例えば複数行のまとまりを表すdivタグでは、まとまりの最初に開始タグ(<div>)を記述し、まとまりの最後を終了タグ(</div>)で締めくくることで、一つの要素として定義することが出来ます。
改行を表す<br>タグなどのように、タグの中には開始タグだけで完結して終了タグを必要としないものもありますが、終了タグが必要なタグの場合に終了タグを記述しないと、コンピュータが要素のまとまりの終了がどこかを認識できなくなるため、表示が崩れてしまいます。
以降では、基本的なタグを紹介します。本記事では、HTML5を前提にします。
HTML文書に関するタグ
下記は、HTML文書全体の情報や構造を表すタグです。
<!DOCTYPE>
ドキュメントのタイプ、バージョンをを宣言します。HTMLの最新バージョンであるHTML5では、シンプルに「<!DOCTYPE html>」と記述することでブラウザはHTML5であると認識します。また、このタグは次で説明する<html>タグの上に記述します。こうすることで、<html>以下の記述がHTMLで記述されていることが分かります。
<html>
html文書であることを宣言します。
<html>タグ直下の子要素には、基本的に文書のヘッダの情報を示す<head>タグと文書の本体の情報を示す<body>タグの順に配置されます。ドキュメントをフレームで分割する場合は、<head>タグと<frameset>タグの順に配置されます。
<head>
ヘッダの情報を表します。<title>タグ以外のタグで記載された情報以外はブラウザのどこにも表示されることはありません。
<title>
タイトルを記述します。下記のように、ブラウザのタグやツールバーの表示や、お気に入り登録時のデフォルトの名称、検索サイトの検索結果のタイトルに、このタグで指定した文字列が入ります。
<title>タグは省略することができないタグです。必ず<head>タグの中に1つ記述するようにします。
<body>
HTML文書の本体を表します。ブラウザに表示される部分をここに記述します。
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
HTML文書の本体
</body>
</html>
文字の表示に関するタグ
テキストの見た目を表したり、テキストの意味づけをするタグです。
<a>
ハイパーリンクを指定するタグです。href属性にURLを、開始と終了タグの間に表示する文字列を指定します。ブラウザ上で文字列をクリックすると、href属性に指定したリンク先に飛ぶことが出来ます。
使用例
<a href="https://style.potepan.com/">ポテパンスタイル</a>
表示例
ポテパンスタイル
<br>
改行を表すタグです。1行のテキストに対して意味のある区切りを表すために使用します。詩の1行や、住所の改行の場合等です。見た目の調整で長い文章を折り返したい場合等は、後述する<p>要素で段落を定義した方が適しています。
使用例
雨ニモマケズ<br> 風ニモマケズ<br> 雪ニモ夏ノ暑サニモマケヌ<br> 丈夫ナカラダヲモチ<br>
表示例
雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲモチ
レイアウトに関するタグ
ページのレイアウトを表すタグです。
<h1>～<h6>
見出しであることを表すタグです。<h1>が一番大きく最上位で、<h6>が一番小さく最下位の見出しになります。同じ番号の見出しは同じ位になります。
使用例
<h1>大見出し<h1> <h2>中見出し</h2> <h3>小見出し</h3>
表示例
大見出し
中見出し
小見出し
<p>
段落のかたまりを表すタグです。段落と段落の間には、視覚的に読みやすいように空白行が入ります。
使用例
<p> こちらは1段落目の文章になります。 こちらは1段落目の文章になります。 こちらは1段落目の文章になります。 </p> <p> こちらは2段落目の文章になります。 こちらは2段落目の文章になります。 こちらは2段落目の文章になります。 </p>
表示例
こちらは1段落目の文章になります。
こちらは1段落目の文章になります。
こちらは1段落目の文章になります。
こちらは2段落目の文章になります。
こちらは2段落目の文章になります。
こちらは2段落目の文章になります。
<ul>と<li>
それぞれ箇条書きリストとリストの項目を表すタグです。<ul>要素の中に項目<li>を並べる事で箇条書きを作成することが出来ます。
使用例
<ul>
<li>いくら</li>
<li>ツナ</li>
<li>しゃけ</li>
</ul>
表示例
- いくら
- ツナ
- しゃけ
HTMLが学べる参考書2選！
WebサイトはHTMLのみで構成するのが最小の構成になりますが、今やHTMLだけで構成されているWebサイトはほとんどありません。実践で使える技術を身に付けるためには、HTMLとCSSをセットで覚える必要があります。ここでは初心者向けにHTMLとCSSの両方を学ぶことのできるおすすめの参考書をピックアップしました。
デザインの学校 これからはじめる HTML & CSSの本
デザインの学校 これからはじめる HTML & CSSの本
一冊を通して一つのWebページを作成します。内容もそれほど重くなく、休みの日に一気にやれば一日で終わる程度の内容になっています。わかりやすさ重視で基本を丁寧に教えてくれているので、コードを書くのが苦手な方でも挫折することなく読みきってしまえるのではないでしょうか。基礎的な内容にとどめているので、一冊終えた後にできれば他の参考書やWebサイトのチュートリアルで、知識を補完・強化することをお勧めします。とにかく分かりやすいので、学習のとっかかりとしては最高の一冊です。
HTML＆CSSとWebデザインが 1冊できちんと身につく本
HTML＆CSSとWebデザインが 1冊できちんと身につく本
多くのWebサイトで使われている4つのレイアウトを実際に手を動かして製作しながら学びます。1冊終える頃には、HTMLやCSSの言語の知識だけでなくデザインの知識も身に付けることができます。最初にHTMLやCSSの基本の解説から入りますので、超初心者でも楽にステップアップしていけるでしょう。レスポンシブデザインについても触れており、マルチデバイスで閲覧できるサイトの作り方も学べます。説明が丁寧で分かりやすく、初心者にもおすすめです。
HTMLを学べるサイト3選！
先にご紹介したような書籍で実際に手を動かしてWebサイトの作り方の流れを覚えたら、自分で作りたいものを作ってみましょう。HTMLの学習サイトをリファレンス的に参照する事で、参考書で足りなかった部分を補いましょう。
HTMLクイックリファレンス
HTMLクイックリファレンス
HTMLだけでなく、CSSやJavascriptについても触れており、Webサイト製作全般の知識が身につくサイトです。Web製作のチュートリアルや小ネタのTipsは躓いた時に読んでみると思わぬヒントになることもあります。リファレンスの検索も、目的別、ABC順別のどちらでも検索できるので必要な項目の情報を簡単に探すことが出来てとても便利です。
とほほのWWW入門 HTMLリファレンス
とほほのWWW入門 HTMLリファレンス
サイト自体の歴史が長く、有名なサイトのHTMLリファレンスです。長い間こまめにメンテナンスされていて、改良に次ぐ改良を経て育ってきた優良なコンテンツです。一覧でタグごとにHTMLのバージョンが分かるので、バージョンでの違いを確認しながら参照することが出来ます。
HTMLタグボード
HTMLタグボード
初心者から上級者までどんなスキルの人も参照できるサイトです。リファレンスだけでなく、ホームページ作成講座やデザインに関するTips、広告収入について等、Webサイト製作をするに当たって一通り見ておきたい幅広い内容を網羅しています。
必要だけどついつい見落としがちな項目についても触れていて、とても良心的なコンテンツになっています。
まとめ
この記事では、HTMLの基本を解説しました。HTMLは、Webサイトの「構造」を「要素」の組み合わせで表します。HTML初心者であれば、参考書で一通りの製作過程を学び、HTMLのリファレンスサイトを補足的に参照する事でHTMLの基礎を効率的に学ぶことが出来ます。この記事でご紹介したものを参考に、学習を進めてみてください。
