【HTML】HTML入門
ここではWebサイトをつくときに必要な技術であるHTMLについて説明します。
事前準備
理解を深めるためにはPCを用意して手を動かしながら学習することでより理解できるかと思います。
操作の説明は基本的にはWindows10の環境を前提としています。
それ以外の環境の場合は適宜読み替えてください。
Mac環境でも同じことができます。
拡張子の表示
拡張子とは、ファイルの種類を識別するためのもので、ファイル名の後ろについている「.」の後に続く文字のことです。
例えば、Excelで作成したファイルの場合は「.xlsx」または「.xls」。
Wordで作成したファイルの場合は「.docx」または「.doc」となります。
拡張子が表示されていれば、拡張子で何のファイルかを判断できます。
開発をする場合は、拡張子が表示されていたほうが何かと都合が良いので、設定で拡張子を表示しておきましょう。
Windowsの場合、デフォルトの環境では、拡張子は表示されない設定になっています。
拡張子が表示される設定の仕方は、エクスプローラーを起動 ⇒ 表示タブ ⇒ 「ファイル拡張子」のチェックボックスにチェックを入れます。
エクスプローラは、画面下のタスクバーの中にあるフォルダのアイコンをクリック、またはキーボードの「Windowsキー + E」で起動します。
Macの場合もデフォルトでは拡張子は表示されません。
Finder ⇒ 環境設定 ⇒ 詳細 ⇒ 「すべてのファイル名拡張子を表示」のチェックボックスで表示の切り替えができます。
Webブラウザの用意
Webブラウザとは、インターネットを閲覧するためのソフトウェアのことです。
普段PCやスマホでインターネットを閲覧する際に、何かしらのWebブラウザを使用していることかと思います。
HTMLの学習をするにあたって、作成したWebページの結果を確認するためにWebブラウザが必要となります。
Windows10の場合は、デフォルトで「Edge」や「Internet Explorer」といったWebブラウザがインストールされています。
Macの場合は「Safari」がデフォルトでインストールされます。
HTMLの学習や開発においては「Google Chrome」が便利なので、ここでは「Google Chrome」を使用していきます。
特にブラウザにこだわりがなければ、「Google Chrome」をインストールし、デフォルトのブラウザとして設定しておきましょう。
デフォルトのブラウザとして設定しておくと、HTMLのファイルをダブルクリックしたときにそのブラウザで起動するようになります。
Chromeのダウンロードページ
他に、有名なブラウザとしては「Firefox」「Opera」等があります。
これ以降はGoogle Chromeは単にChromeと呼びます。
テキストエディタを用意
テキストデータ(文字だけのデータ)を編集するためのソフトウェアです。
HTMLファイルやCSSファイル、プログラムのファイルを作成する場合、通常はテキストエディタを使用します。
文章を書くときにはWordなどの文書作成ソフトもありますが、文書ソフトは文字フォントやフォントサイズなど、プログラムとは無関係の情報まで保持されてしまうので、通常プログラミングにおいては使用しません。
Windowsの場合は標準で「メモ帳」というテキストエディタがあありますが、機能が少ないため、通常使いやすいエディタを別途インストールして使用する場合がほとんどです。
普段から使用しているエディタがあればそれを使用して構いませんが、ここでは「Visual Sutdio Code」というエディタを使用する前提で講義を進めるので、エディタにこだわりがなければ「Visual Sutdio Code」をダウンロードしてインストールしましょう。
Visual Studio Code ダウンロードページ
テキストエディタで書いたHTMLやプログラムなどの内容を「ソースコード」と呼びます。
人によっては「ソース」や「コード」と呼ぶ場合もありますが、全て同じ意味です。
作業用フォルダの作成
HTMLの学習をするにあたって、実際にHTMLのファイルを作成していきます。
任意の場所に作業用のフォルダを作成しておきましょう。
例えば、Cドライブの直下に「web-lesson」などのフォルダを作成し、その中にHTMLファイルを作成していきす。
リファレンスの確認
プログラミングの業界ではリファレンスという言葉がよくできます。
要はマニュアルのようなものです。
分からないことがあったり、調べたいことがあれば、リファレンスを参照して開発を進めます。
HTMLの場合はMDNをリファレンスとして活用してください。
MDNの説明で理解できないない場合は他のサイトも参考にしてみましょう。
HTMLを見てみる
HTMLが実際どんなものなのかを事前に確認しておきましょう。
Google Chromeで、普段見ているWebページ（どのWebページでもいいです）を開いて、適当な箇所で右クリックし、「ソースの表示」を押下します。
そうするとそのWebページの内容がHTMLで表示されます。
その中で不等号記号（「<」「>」）があるはずです。
不等号記号に囲われたものをタグ(HTMLタグ)と言います。
HTMLは、このタグを学習することでできるようになります。
基本的な用語
HTMLの学習に入る前に、おさえておきたい用語を紹介しておきます。
Webページ
HTML等で作成されたページのことをWebページといいます。
簡単に言えば、Webブラウザ上に表示されているものがWebページです。
インターネットを閲覧しているときに見ているものがWebページだと考えてください。
Webサイト
Webページの集まりのことです。
通常インターネットを閲覧するときは、1つのページだけを見るのではなく、トップページからリンクをたどって様々なWebページを閲覧するかと思います。
例えばyahooのサイトなどでは、トップページから様々なニュースのページを見ることができます。
そのような一つのサービスの中でのWebページの集まりをWebサイトと呼びます。
ホームページ
インターネットを使って閲覧するページを一般にホームページと呼ぶことが多いですが、厳密にはホームページとはWebブラウザを起動したときに表示されるWebページのことです。
また、Webサイトの中のトップページのことをホームページと呼ぶ場合もあります。
日常会話の中では、「Webページ」「Webサイト」「ホームページ」は厳密に区別する必要性はありませんが、Webについて学習する上ではきちんと区別するようにしましょう。
Webサーバー
Webサイトを公開する時に必要となるサーバーソフトウェアです。
Webサイトは、Webブラウザとテキストエディタさえあれば作成することは可能ですが、作成したWebサイトは自分のPCでしか見る事はできません。
インターネット上に公開して世界中の人に見てもらうためには、Webサーバーが必要になります。
この記事では詳しくは説明しませんが、公開する時には必要になると知っておきましょう。
HTMLの基本
HTMLとは
HyperText Markup Languageの略で、Webページを作成するための技術です。
Markupとは印をつけるという意味です。
HTMLでは、タグと呼ばれるものを用いて、文章に印をつけて意味を持たせます。
通常Webページを作成する場合、HTML単体でWebページを作成する場面はほとんどなく、CSSやJavaScriptといった別の技術と組み合わせながら作成します。
HTMLを作ってみる
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <!-- コメント --> <p>こんにちは</P> </body> </html>
ブラウザ上の表示
こんにちは
index.htmlというファイル名で上記の内容のファイルを作成し、適当な場所に保存してください。
保存出来たら、Chromeでそのファイルを開きましょう。
index.htmlをダブルクリックするか、Chrome上にドラッグ&ドロップする事でChromeで開くことができます。
タブに「Sampleページ」が表示され、ブラウザに「こんにちは」が表示されていれば成功です。
表示が成功したら、内容を変更してみましょう。
試しにテキストエディタで再度index.htmlを開き、「こんにちは」の部分を「こんばんは」に修正して保存してみましょう。
この時Chromeは閉じなくても問題ありません。
修正を終えたらブラウザでF5キー、またはCtrl + R、またはブラウザの左上にある更新ボタンをクリックして、最新に更新して下さい。
修正内容が反映されるはずです。
HTMLでは、このように、テキストエディタで修正・ブラウザで更新を繰り返しながら、作成を進めていきます。
解説
先ほどのHTMLファイルを元にHTMLの基本を解説していきます。
ファイル名・拡張子
Webサイトのトップページは「index.html」となる場合が多いです。
慣習になっているので、特にこだわりがなければトップページのファイル名は「index.html」としておきましょう。
HTMLファイルの拡張子は「.html」または「.htm」となります。
日本語のファイル名にすることも可能ですが推奨はされません。
英語でそのページを表す適切なファイル名にすることが望ましいです。
タグ
不等号記号（「<」「>」）に囲われているものをタグ(正確にはHTMLタグ)と言います。
例えば、<html lang="ja">は、htmlタグ。<head>はheadタグ。
タグは基本的に開始タグと終了タグがセットになります。先頭に「/」が入ったタグが終了タグです。
「<head>内容</head>」のような形です。この、開始タグ、内容、終了タグ、を合わせた全体を「要素」と呼びます。
上記の場合、「head要素」のように呼ばれます。
タグの中には、内容と終了タグを持たないものもあります。metaタグやbrタグがその代表です。
どんなタグがあるか、どんな意味があるか、終了タグが必要かどうか、などはリファレンスに詳しく掲載されています。
属性
属性はタグに対してオプションを指定するものです。
タグの中に
<!-- タグに属性を付ける --> <タグ 属性="属性値">
の用に記述します。
スペース区切りでいくつでも指定することができます。
必ず半角スペースで区切りましょう。
全角スペースだとうまく動作しない場合があるので注意が必要です。
<!-- 属性は何個でもつけれる --> <タグ 属性1="属性値" 属性2="属性値">
のような形です。
例えば、
<html lang="ja">
は、lang属性に属性値"ja"を指定している状態です。
タグによって、指定できる属性が異なります。
タグによっては、特定の属性が必須になるものもあります。
属性値の指定の仕方も属性によって様々です。
詳しくはリファレンス等で調べてみてください。
要素
タグの部分でも説明しましたが、開始タグ、内容、終了タグを合わせたものを要素と呼びます。
要素は基本的に以下の形になります。
<!-- 全体を要素と呼ぶ --> </開始タグ 属性="属性値">内容</終了タグ>
HTMLは基本的に要素の組み合わせです。
なので、タグの種類、属性の種類を覚え、その組み合わせて様々なWebページを作成することがHTML上達のコツです。
内容の部分は、基本的にテキストか、別の要素が入ります。
要素の中に別の要素が入っていることを入れ子構造と言います。
例えば、上記のindex.htmlでは、html要素の中に、head要素やbody要素が入れ子になっています。
また、要素が入れ子構造になっているとき、html要素から見てhead要素やbody要素のことを、子要素といいます。
また、head要素やbody要素から見て、html要素のことを親要素といいます。
用語として覚えておきましょう。
それぞれの要素は開始タグと終了タグの位置関係が入れ子構造でうまく対応していなければいけないことに注意しましょう。
例えば、
<html> <head> ・・・ </html> </head>
のように、入れ子になっていない場合は、不具合の原因になりますので注意しましょう。
それぞれのタグの解説
サンプルのHTMLのそれぞれの内容について解説します。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <!-- コメント --> <p>こんにちは</P> </body> </html>
宣言
<!DOCTYPE html>
これはHTML5の宣言です。
HTMLファイルを作成する場合は、1行目に必ず書くものだと思ってください。
ちなみにHTML4の場合は以下の宣言になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
新しくWebサイトを作成する場合は新しいバージョンでの作成になりますので、HTML5の宣言の仕方を覚えておけばいいでしょう。
HTML5では、新しいタグや属性などが色々と追加されています。
それらのタグはブラウザが対応しているかどうかが問題で、バージョンが比較的新しいブラウザを使用しているのであれば、大抵の場合は対応しているので気にする必要はありません。
古いバージョンのブラウザを使用する場面があった時に、場合によってはHTML5のタグが対応していない可能性もあるということを頭にいれておきましょう。
htmlタグ
<html lang="ja"> ... </html>
htmlの内容はhtmlタグの中に書きます。
つまり、宣言の後には必ずhtmlタグがあり、その中にWebページの内容を書くことになります。
lang属性には、そのWebページの言語の設定を書きます。
日本語のページの場合は"ja"となります。
（jpじゃないことに注意）
headタグ
<head> ... </head>
headタグは、Webページの情報を定義するためのタグです。
HTMLファイルを作成する際には必ず書くタグと思ってもいいでしょう。
titleタグ
<head> <title>Sampleページ</title> ... </head>
titleタグはブラウザのタブに表示される文字になります。
名前の通り、Webページのタイトルを表す内容を書きます。
metaタグ
<head> ... <meta charset="UTF-8"> </head>
metaタグでは、Webページの文字コードを指定しています。
ここでは、文字コードをUTF-8に設定しています。
ここで指定した文字コードとHTMLファイルの文字コードが違っている場合は、ブラウザで表示した内容が文字化けすることがあります。
metaタグは終了タグありません。
また、metaタグではWebページが検索エンジンに確認されるように説明文を書くこともできます。
その場合、以下のように書きます。contentの中に検索エンジンにヒットしてほしい説明を書きます。
<meta name="description" content="説明">
その他、スマホ向けの表示方法を指定することもできます。
PC向けに作ったWebページは、何も設定をしなければスマホで見た場合に縮小されてしまいます。
以下のmeta要素を追加すると、スマホの画面で見ても縮小されずに表示されてくれます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bodyタグ
<body> ... </body>
bodyタグには、ブラウザに表示される内容を書きます。
Webページを作成する場合には必ず書くタグだと思っておいてもいいでしょう。
pタグ
<p>こんにちは</P>
pタグのpはパラグラフのpです。
パラグラフとは段落のことです。
HTML内に文章を書く場合に、段落を表したい場合、pタグが囲ってあげれば、その範囲が一つの段落になります。
文章を書く際によく使用されるタグです。
pタグで囲った文章は、その単位で改行されます。
つまり、
<!-- 2行に表示される--> <p>こんにちは</p> <p>こんばんは</p>
上記のように書くと２行で表示されますが、
<!-- 1行で表示される--> <p> こんにちは こんばんは </p>
上記のように書くと１行で表示されます。
コメント
<!-- -->
の中に書かれた部分をコメントと言います。
コメントは、ソースコードに影響を与えません。
ソースコードだけでは分かりにくい部分があるときに、読みやすくする目的で、補足説明としてコメントを使用することが多いです。
もともと書かれていたソースコードをコメント化することを、コメントアウトといいます。
ソースコードを修正する場合に、後々元に戻せるように、元々あったソースコードをコメントにすることもよくあります。
ただし、HTMLの場合はブラウザで「ソースの表示」をした際にコメントの内容まで見られてしまうので、他人に見られてはまずい内容はコメントにしないようにしましょう。
ここまでのまとめ
- HTMLはWebページを作成するための言語。
- HTMLはタグを使って文書を作成する。
- タグは開始タグと終了タグがセットになってる。ただし、一部終了タグが不要なものもある。
- タグには属性を付けることができる。
- タグと属性と内容を合わせて要素という。
- HTMLファイルを作成する場合は、宣言、html要素、head要素、body要素は必ず書く。
- head要素にはWebページの情報を、body要素にはブラウザに表示される内容を書く。
様々タグの紹介
ここでは数多く存在するHTMLタグの中からWebページの作成で頻繁に使用されるであろう主要なタグを紹介していきます。
サンプル
まずは以下のサンプルのHTMLファイルを作成して結果を確認してみてください。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <h1>HTML/CSS</h1> HTMLとCSSについて紹介します。 よろしくお願いします。 <h2>HTML</h2> HTMLはWebページを作成するための言語です。<br> <strong>HyperText Markup Language</strong> の略です。 <hr> <h2>CSS</h2> CSSはWebページのレイアウトを整えるための言語です。<br> <strong>Cascading Style Sheets</strong> の略です。 </body> </html>
解説
見出し
このサンプルではh1タグとh2タグが使用されています。
これは、見出しを表すタグになります。
数値は1~6まで使用することができ、数値が小さくなるにつれ、フォントサイズが小さくなります。
※ただし、フォントサイズはCSSで変更することが可能なため、サイズが重要なわけではありません。
例えば新聞の一面などを見ると、その日の最も主要なニュースの見出しが一番上に表示されています。
その内容の中にさらにサブの見出しがあり、テーマごとに内容が分かれていることがあります。
新聞をWebページに当てはめるなら、一つのテーマの中の最もメインの見出しがh1要素で、サブの見出しがh2要素となります。
そのサブの内容の中で更に細かく見出しが分かれる場合は、h3を使用します。
つまり、一つのテーマの中で、大きな見出しから小さな見出しを作成していく場合にh1~h6を使い分けていくことになります。
<!-- 見出し --> <h1>HTML/CSS</h1>
<!-- 太字 --> <b>HTML</b>
強調
strongタグで囲った文字は、強調されて表示されます。
<!-- 強調 --> <strong>HTML</strong>
改行
brタグは、改行を表すタグになります。
HTML内で文章を書く際、改行を入れていても、ブラウザで表示した際には改行されません。
そのため改行したい場合には改行用のタグを使用します。
brタグを書くと、書いた場所で文章が改行されます。
また、brタグは閉じタグがなく、タグ単体で使用します。
<!-- 改行 --> <br>
文章の場合はpタグを使うことでも改行することができます。
どちらを使うかはケースバイケースで、好みにもよります。
水平線
hrタグは、水平線を表すタグです。
このタグもbrタグ同様、終了タグなく、タグ単体で使用します。
hrタグを書いた場所に水平線が表示されるようになります。
<!-- 水平線 --> <hr>
ここまでのまとめ
- 見出しをつけるときはh1~h6タグを使う
- 強調するときはstrongを使う
- 改行したいときはbrタグを使う
- 水平線を表示したいときはhrタグを使う
テーブルとリスト
続いては、テーブルやリスト表示する場合を見ていきます。
まずはサンプルのコードを書いて表示を確認してください。
サンプル
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> 単元一覧(番号なし) <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Git</li> <li>Java</li> </ul> <br> 単元一覧(番号あり) <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Git</li> <li>Java</li> </ol> <br> 単元の説明 <dl> <dt>HTML</dt><dd>Webページを作る技術</dd> <dt>CSS</dt><dd>Webページのレイアウトを整える技術</dd> <dt>Git</dt><dd>バージョン管理システム</dd> </dl> <br> <table border="1"> <caption>成績表</caption> <tr> <th>単元</th><th>点数</th> </tr> <tr> <td>HTML</td><td>80</td> </tr> <tr> <td>CSS</td><td>70</td> </tr> <tr> <td>JavaScript</td><td>60</td> </tr> <tr> <td>Git</td><td>74</td> </tr> <tr> <td>Java</td><td>85</td> </tr> </table> </body> </html>
解説
リスト
リストは、箇条書きで要素を並べて表示する場合に使用します。
番号付きリスト、番号なしリスト、定義済みリストの3つがあります。
まずは番号付きリスト、番号なしリストについてです。
番号付きリスト、番号なしリストは ul, ol, li の3つのタグを使います。。
ulは unordered list の略で、番号のないリストを表します。
olは oederd list の略で、番号(順番)があるリストを表します。
ulの場合はそれぞれの項目の前に黒丸が、olの場合はそれぞれの項目の前に連番が付いています。
liは list item の略で、リストの一つ一つの項目の該当する内容に付けるタグとなります。
ちなみに、ulタグでの黒丸は、CSSで別の形や色に変更することもできます。
また、olでの数値も、CSSでアルファベットやローマ数字など、色々変更することができます。
次にdlについてです。
dlはdescription list の略で、dtタグで定義した内容と、ddタグで定義した内容をセットにしたリストです。
この例では、単元名と単元の説明を1セットにしたリストを作成しています。
<!-- 番号付きリスト --> <ol> <li>...</li> ... </ol> <!-- 番号なしリスト --> <ul> <li>...</li> ... </ul> <!-- 定義済みリスト --> <dl> <dt>定義する項目</dt><dd>定義内容</dd> </dl>
テーブル
テーブルはExcelのような表形式の表示をしたい場合に使用します。
HTMLで表を表現したい場合にはtableタグを使用します。
tableタグとセットで使用するタグは、captionタグ、trタグ、thタグ、tdタグです。
captionタグは、表のタイトルを表します。
trタグは、table row の略で、横の1行を表します。
thタグは、table header の略で、表の中の見出しを表す項目に使用します。
dtタグは、table data の略で、表の中の一つ一つのデータの項目に使用します。
captionタグとtrタグは、table要素の子要素になり、thタグとtdタグはtr要素の子要素になります。
また、tableタグにborder属性を入れることで、表の区切り線が付くようになります。
ここでのサンプルでは使用していませんが、tableタグの要素として使用されるタグに
theadタグ、tbodyタグ、tfootタグがあります。
これは、行をグループ化するためのタグです。
複数の行を一塊として扱いたい場合、thead、tbody、tfooterなどのタグを使用します。
<!-- テーブル --> <table> <caption>表のタイトル</caption> <tr> <th>表の見出し</th>... </tr> <tr> <td>表のデータ</td>... </tr> </table>
ここまでのまとめ
- リストには番号付きリスト、番号なしリスト、定義済みリストがある
- 番号付きリストはulタグ
- 番号なしリストはolタグ
- ulとolのリストの項目にはliタグ
- 定義済みリストはdl, dt, ddタグ
- 表形式で表示するときはtableタグ
- tableタグの中ではtr, th, tdタグなどを使う
リンクと画像
続いては、Webページにリンクを張る方法と、画像を読み込む方法を見ていきます。
サンプル
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <h1 id="link">リンク集</h1> <p><a href="https://www.google.com">Googleへ</a></p> <p><a href="https://www.google.com" target="_blank">新しいタブでGoogleへ</a></p> <p><a href="sample.html">サンプルページへ</a></p> <p><a href="#link">トップへ</a></p> h1>画像</h1> <!-- 相対パスによる指定 --> <img src="image/sample.png" width="100" height="50" alt="サンプルの画像"> <br> <!-- 絶対パスによる指定 --> <img src="C:/web/image/sample.png" width="200" height="100" alt="サンプルの画像"> </body> </html>
解説
リンク
まずはリンクについて解説します。
Webサイトを作成する際は、リンクによって様々なWebページに遷移することができます。
リンクを作成するにはaタグを利用します。
aタグでは、href属性が必須の属性になっており、必ず指定してあげる必要があります。
Webページ上では、aタグで囲われてテキストがクリックできるようになり、クリックするとhrefで指定したWebページにリンクします。
別のWebサイトへのリンクの場合、そのサイトへのURLをhref属性で指定します。
<!-- Webサイトへのリンク --> <a href="https://www.google.com">Googleへ</a>
リンクするときに、ブラウザの別タブを開きたい場合はtarget属性を書き、"_blank"という値を指定します。
target属性にはあらかじめ決められた値を指定します。
どんな値があるかはHTMLのリファレンスを参照ください。
<!-- リンクを別タブで開く --> <a href="https://www.google.com" target="_blank">
同じWebサイト内の別ページにリンクしたい場合は、ファイル名を指定します。
絶対パス、または相対パスによる指定が可能です。
<!-- 同じWebサイト内の別ページへのリンク --> <a href="sample.html">サンプルページへ</a>
同じWebページ内の別の個所にリンクすることもできます。 その場合、#の後に飛びたいタグのid属性の値を指定します。
<!-- 同じページの別の個所へのリンク --> <h1 id="link">リンク集</h1> ... <a href="#link">トップへ</a>
画像
HTMLでは画像を埋め込むこともよく行われます。
画像を埋め込む場合は、imgタグを使用します。
imgタグは閉じタグはありません。
src属性によって画像のファイルを指定します。
この時にもファイルの指定の仕方で相対パスか絶対パスが使用できます。
widthとheight属性によって横幅と縦幅を指定することができます。
alt属性には、画像ファイルが見つからなかった場合に表示されるテキストを指定することができます。
パスの指定が間違っていて画像が読み込めなかった場合、読み込みに時間がかかって画像ファイルを取得できなかった場合、ブラウザが画像ファイルに対応していない場合などにテキスト情報として表示されます。
imgタグを使用する場合、width、height、は必須ではありませんが、src属性、alt属性は必ず指定する必要があります。
絶対パスと相対パス
リンクや画像ファイルの指定の説明で、相対パスや絶対パスというワードを使っていますが詳しく説明していなかったため、ここで説明します。
パスとは、簡単に言うとそのファイルまでの道のりのこと。
相対パスとは、今自分がいる場所から、対象のファイルまでのパスの表し方のこと。
絶対パスとは、そのコンピュータのルート(Windowsの場合はCドライブなど。データのトップとなる場所)からのパスの表し方のこと。
言葉だけだと分かりにくいと思いますので、具体例で示します。
今、以下のような階層のフォルダ構造があったとします。
Cドライブ
|-web
|-index.html
|-sample.html
|-image
|-sample.png
|-image.html
Cドライブの直下に「web」というフォルダがあります。
その中に、「index.html」というファイルと「sample.html」というファイルと「image」というフォルダがあります。
index.htmlからsample.htmlにリンクを張りたい場合、
相対パスの場合「sample.html」
絶対パスの場合「C:/web/sample.html」
となります。
相対パスでの指定の場合、同じフォルダ内にある場合はファイル名だけの指定でOKです。
絶対パスの場合は、Cドライブから辿っていきます。この時、フォルダはスラッシュで区切ります。
次はindex.htmlからsample.pngの画像ファイルを指定したい場合です。
相対パスの場合、「image/sample.png」または「./image/sample.png」と指定します。
「.」は、カレントディレクトリ(今作業しているフォルダ)を表します。
絶対パスの場合は「C:/web/image/sample.png」となります。
次に、image.htmlからindex.htmlを指定する方法を見てみましょう。
相対パスの場合「../index.html」となります。
「..」(ピリオド2つ)で、一つ上の階層を表します。
つまり、imageフォルダの中にいる場合、「../」をで「web」フォルダの中を表すことになります。
絶対パスの場合「C:/web/index.html」となります。
ここまで相対パスと絶対パスによるパスの指定方法を見てきましたが、この2つはどちらが良い悪いというものではありません。
状況によって使い分ければ良いのですが、Webサイトを作成する場合、HTML内では基本的には相対パスを使用することをお勧めします。
理由は、絶対パスの場合、今回でいえば「web」というフォルダを、丸ごと別の場所に移動してしまったとします。
この時、絶対パスで指定していた場合には、リンクや画像の読み込みがうまくいかなくなります。
相対パスで作成していた場合は、「Web」フォルダの中での位置関係が崩れなければ問題ないので、
フォルダを丸ごと別の場所にコピーしてもWebサイトはそのまま動作します。
特にWebサイトなどは、一度ローカルで作成した後にサーバーにアップすることも多いため、
相対パスで作成しておくことが無難です。
また、ここでは自分のPCの環境内におけるパスで話をしましたが、サーバー環境では状況が変わってきます。
サーバー環境では絶対パスは、そのコンピュータのルートではなく、Webサーバーのドキュメントルートからのパスとなります。
ここでは細かくは解説しませんが、絶対パスの場合サーバー環境とローカルのPC環境でパスの指定が変わる可能性があることも知っておきましょう。
ここまでのまとめ
- リンクを貼るときはaタグ
- aタグではhref属性でリンク先を指定
- 画像を載せるときはimgタグ
imgタグではsrc属性で画像ファイルのパスを、alt属性で画像が取得できない時のテキスト情報を指定
パスとはファイルまでの道のりのこと
- パスの指定方法には相対パスと絶対パスの2種類がある
- 相対パスは今いるフォルダからのパス指定方法
- 絶対パスはCドライブからのパス指定方法
- フォルダの区切りは「/」で表す
- 「.」で今いるフォルダを表す
- 「..」で一つ上の階層を表す
- HTMLでは相対パスを使用するのが無難
セクション
Webページの情報が多くなってくると、それに伴ってHTMLのソースコードも複雑になってきます。
HTMLのソースコードをメンテナンスしやすくするには、ヘッダー部分、メニュー部分、メインコンテンツの部分、広告の部分、フッター部分のように、ある程度のまとまりを1つのブロックとして考えることができると便利です。
HTML5ではある程度のまとまりをセクションという単位でまとめることができます。
まずはサンプルを確認してください。
サンプル
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <!-- ヘッダー情報 --> <header> <img src="logo.png" alt="ロゴマーク"> </header> <!-- ナビゲーションメニュー --> <nav> <ul> <li>ホーム</li> <li>会社概要</li> <li>サービス</li> </ul> </nav> <!-- メインコンテンツ --> <main> <h1> <p>メインコンテンツを書きます</p> </main> <!-- サブコンテンツ --> <aside> 広告 </aside> <!-- 独立コンテンツ --> <article> 本日のニュース </article> <!-- フッター情報 --> <footer> <small>© 2020 corpname inc.</small> </footer> </body> </html>
解説
セクション
一つのWebページの中にたくさんの情報がある場合、セクションという単位で関連している情報をまとめることができます。
セクションのタグを使用することで、ソースコードを読みやすくしたり、ブラウザにWebページの情報を伝えることができます。
headerタグ
ヘッダー情報をまとめる時に使用するタグです。
画面上部に表示される情報をまとめる際に使用します。
サイトのロゴを入れたり、ログイン、ログアウトボタン、アカウント情報などを表示する場合が多いです。
footer
フッター情報をまとめる時に使用するタグです。
コピーライトの情報など、画面下部に表示させる内容を書くのが一般的です。
navタグ
ナビゲーションに関することをまとめるタグです。
メニュー、パンくずリストに関する情報などをまとめます。
article
それだけで独立しているのコンテンツを載せる時に使用するタグです。
例えば、ニュース記事、ブログエントリーなどが該当します。
同じページ内のテーマと直接的には関係なく、その内容だけで配信しても違和感がないものに使用されます。
main
メインのコンテンツに対して使用するタグです。
aside
メインではないサブのコンテンツに使用されるタグです。
補足情報や広告などに使用されます。
section
上記のタグでは表現できないが、意味のものをまとめたい時に使用します。
情報を整理したい場合に使用します。
h1～h6
見出しを定義するタグとしてh1~h6を一度解説しました。
見出しのタグについては、セクションと関連しています。
一般的には、各セクションの中で見出しによってh1~h6を付けることになります。
div
ここで紹介した以外にも、複数の要素をまとめることができるタグとしてdivタグがあります。
divタグについては後述しますが、それ自体に意味を持たないタグで、CSSやJavaScirptからHTMLを扱う時によく使用されるタグです。
ここまでのまとめ
- HTML上の要素を意味のある単位でまとめたい時にはセクションを使用する
- セクション用のタグにはheader, footer, nav, main, aside, article, sectionがある
- 各セクションの中で見出しを付けたい場合にはh1~h6を使う
- セクションとは別で複数の要素をまとめるタグとしてdivタグがある
フォーム
これから先、プログラミングを学んでWebアプリケーションを作成していくにあたっては、ユーザーからの入力を受け付け、その内容によってWebページを作成して結果を表示する、といったことが必要になってきます。
このとき、HTMLでユーザーからの入力を受け付けるようにするのがフォームです。
まずはサンプルを確認してください。
サンプル
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <h1>新規登録</h1> <form action="register"> <p>名前：<input type="text" name="name" required></p> <p>メールアドレス：<input type="email" name="email"></p> <p>電話番号：<input type="tel" name="tel"></p> <p>パスワード：<input type="password" name="pass"></p> <p>パスワード（確認）：<input type="password" name="passc"></p> <p> <!-- ラジオボタン --> 性別： <input type="radio" id="male" name="sex" value="男" checked><label for="male">男</label> <input type="radio" id="female" name="sex" value="女"><label for="female">女</label> </p> <p> 生年月日： <input type="date" name="birth"> </p> <p> <!-- プルダウンリスト --> 出身： <select name="from"> <option value="tokyo" selected>東京</option> <option value="oosaka">大阪</option> <option value="hokkaido">北海道</option> <option value="okinawa">沖縄</option> </select> </p> <p> <!-- チェックボックス --> 興味がある分野： <input type="checkbox" name="like" value="HTML">HTML <input type="checkbox" name="like" value="CSS">CSS <input type="checkbox" name="like" value="JavaScript">JavaScript <input type="checkbox" name="like" value="Java">Java </p> <p> <!-- ファイル --> プロフィール画像：<input type="file" name="icon"> </p> <p> <!-- テキストエリア --> 自己紹介： <textarea name="jikosyoukai" placeholder="ご自由に入力してください" cols="30" rows="30"></textarea> </p> <p> <!-- ボタン --> <button type="submit" value="送信">送信</button> <button type="reset" value="リセット">リセット</button> </p> </form> </body> </html>
解説
formタグ
まずはformタグについてです。
HTMLで入力を受け付ける画面を作成する場合、入力を受け付けるタグは全てformタグの中に書く決まりになっています。
formタグには、action属性とmethod属性を指定します。
action属性は、入力された値を受け渡すプログラムの名前を書きます。
サンプルの例では特に何を書いても構いませんが、Webアプリケーションを作成する場合には重要な属性となります。
method属性では、データの送り方を指定します。
「GET」と「POST」の2種類があります。
ここでは詳しくは解説しませんが、入力した値をデータとして登録する場合にはPOST、入力した値を元に検索をする場合などにはGETが使用されます。
<!-- actionでデータを送るプログラム名を、methodでデータの送り方を書く --> <form action="register" method="POST"> <!-- formの子要素として入力を受け付けるタグを書く --> ... </form>
inputタグ
inputタグは、type属性の値によって、様々な形式になります。
いずれにしても、ユーザーからの入力を受け付ける要素となります。
テキストボックス
type="text" とすると、テキストボックスとなります。
名前など、ユーザーがキーボードからの文字の入力を受け付ける場合によく使用するものです。
value属性を指定しておくと、初期値を設定することもできます。
また、必須入力にする場合はrequiredを付けます。
<!-- テキストボックス --> <input type="text" name="name" required>
emailを指定すると、見た目は通常のテキストボックスと変わりませんが、メールの形式になっているかなど、入力のチェックを行ってくれます。
<!-- メールアドレスの形式でない場合にチェックを行ってくれる --> <input type="email" name="email">
パスワード
passwordを指定すると、入力した文字が黒丸となって入力値が見えないようになります。
<!-- 入力した値が伏字になる --> <input type="password" name="pass">
数値の入力
数値のみを入力したい場合は、typeでnumberを指定します。
max属性やmin属性を指定することで、入力の最大値や最小値を設定することもできます。
<!-- 数値を入力する --> <input type="number" name="num">
ラジオボタン
複数の選択肢から1つだけを選択するような場合、ラジオボタンを使用します。
それぞれの選択肢でname属性には同じ値を指定します。
checked属性を入れておくと、Webページが表示されたときに初めからチェックが入った状態になります。
また、ラジオボタンの隣にある文字(この場合は「男」)をクリックした場合にもチェックされるようにするには、labelタグを使用します。inputタグのid属性と、labelタグのfor属性を紐づけすることで、クリックしたときに反応するようになります。
<!-- ラジオボタン --> <input type="radio" id="male" name="sex" value="男" checked> <!-- 文字をクリックしてもチェックされるように --> <label for="male">男</label>
プルダウンリスト
複数の選択肢から一つだけを選ぶタイプの入力として、プルダウンリストもあります。
selectタグを使用し、選択肢はoptionタグで定義します。
初期表示として設定しておきたい項目にはselected属性を付けます。
<!-- プルダウン --> <select name="from"> <!-- optionでリストの内容を書く --> <option value="tokyo" selected>東京</option> <option value="osaka">大阪</option> ... </select>
チェックボックス
複数の選択肢で複数の選択を可能とする場合にはチェックボックスを使用します。
基本的な使用方法はラジオボタンと同じで、複数選択できるという点が異なります。
ラジオボタンと同じく、labelと紐づけることもできます。
checked属性で初期値をチェック済みにしておくことも可能です。
<!-- チェックボックス --> <input type="checkbox" name="like" value="HTML">
ファイル
inputタグのtype属性でfileと指定すると、ファイルのアップロードが可能になります。
<!-- ファイル選択 --> <input type="file" name="icon">
テキストエリア
テキストボックスでは入力しきれないある程度長い文章を入力する必要がある場合にはテキストエリアを使用します。
placeholder属性を指定すると、何も入力していないときに指定した内容が薄い文字として表示されます。
colsでテキストエリアの横幅、rowsで縦幅を指定することができます。
入力文字数を制限したい場合はmaxlength属性を使用します。
<textarea name="jikosyoukai" placeholder="ご自由に入力してください" cols="30" rows="3"></textarea>
ボタン
ボタンを使用するにはbuttonタグを使用します。
typeでsubmitを指定すると、このボタンを押下した際に、formタグのaction属性で指定したプログラムに入力されている値を送信することができます。
typeでresetを指定すると、ボタン押下時に入力内容が初期化されます。
typeでbuttonを指定すると、クリックすることはできますがデフォルトでは何も起きません。
JavaScriptでボタンをクリックしたときに何かしらの処理をしたい場合などに使用します。
<!-- プログラムに値を送る --> <button type="submit" value="送信">送信</button> <!-- 入力された内容をリセットする --> <button type="reset" value="リセット">リセット</button> <!-- 何かしらの処理を定義する --> <button type="button" value="チェック">チェック</button>
name属性とvalue属性
ここで紹介したformの要素は、ほとんどのタグにname属性とvalue属性を設定しています。
この2つの属性に何の意味があるのか疑問に思った人もいるかもしれません。
この2つの属性は、このWebページ単体ではあまり意味を持ちませんが、
プログラムが入力された値を受け取る際に重要となる属性です。
formタグのaction属性で指定したプログラムが、
name属性の値を指定することで、そのタグのvalue属性の値を取得できるという仕組みです。
テキストボックスの場合、value属性を指定すると、画面表示時に初期値が入力された状態になります。
formのまとめ
- ユーザーからの入力を促すタグは全てformタグの子要素として記述する。
- 1行の入力を受け付ける場合はテキストボックス(type="text")を使用する。
- 複数行の入力を受け付ける場合はテキストエリアを使用する。
- 複数の選択肢から一つだけ選択する場合はラジオボタンかプルダウンリストを使用する。
- 複数の選択肢から複数選択する場合はチェックボックスを使用する。
- 入力値を送信するにはボタンでサブミットを指定する。
- サブミットボタンを押した場合、formタグのaction属性で指定したプログラムへデータを送信することができる。
- 送信したデータを受け取るときにはname属性とvalue属性の値を使用する。
divとspan
HTMLの中でよく使用するタグにdivタグとspanタグがあります。
サンプル
index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> <meta charset="UTF-8"> </head> <body> <h1>HTML/CSS</h1> <div> <h2>HTML</h2> HTMLはWebページを作成するための言語です。<br> <span>HyperText Markup Language</span>の略です。 </div> <div> <h2>CSS</h2> CSSはWebページのレイアウトを整えるための言語です。<br> <span>Cascading Style Sheets</span>の略です。 </div> </body> </html>
解説
divタグとspanタグ
このサンプルでは、新しくdivとspanという2つのタグが登場しています。
この2つのタグ、一度削除してみると分かりますが、あってもなくてもWebページ上の見た目は変わりません。
実はdivとspanは両方ともそれ単体では意味を持たないタグです。
ではどういう風に使用するかというと、次に説明するid属性やclass属性と組み合わせて使用することがほとんどです。
HTMLだけでは恩恵を受けにくいですが、CSSやJavaScriptを使用する場合、特定の要素に対してレイアウトを変えたり処理を加えたりすることがよくあります。
この時、要素を特定するための手段としてid属性やclass属性を使用します。
divやspanという意味を持たないタグを使用することによって、HTMLの文書自体には影響を与えず、CSSやJavaScriptでの操作をしやすくすることができます。
ではdivタグとspanタグは何が違うのでしょうか。
この2つは、ブロックボックス要素か、インラインボックス要素か、という違いがあります。
ブロックボックス要素とインラインボックス要素
ブロックボックス要素は、その要素に四角い領域が確保され、縦幅や横幅、枠線や余白などを定義することができます。
また、要素が縦に並ぶという特徴があります。
インラインボックス要素は、横幅や縦幅を定義することはできず、要素が横に並ぶという特徴があります。
先に紹介したdivタグとspanタグの場合、divタグがブロックボックス要素で、spanタグがインラインボックス要素となります。
divとspanに限らず、全てのタグはブロックボックス要素かインラインボックス要素のどちらかに分類されます。
詳しくはリファレンスなどを参照してください。
グローバル属性
属性は、タグによって指定できるものが決まっていますが、一部、どのタグにも付けることができる属性があります。
それをグローバル属性と呼びます。いくつか種類がありますが、よく使用されるのは以下の3つです。
- id属性
- class属性
- style属性
id属性
id属性は、HTML内の要素を特定するための属性です。
id属性を指定する際は注意点があります。
それは、値が数値から始まってはいけない、という点と、同じページ内で同じ値を使用できないという点です。
以下のサンプルでは、idの値がabcとなっている要素が2つあります。
これはHTMLのルール上NGとなります。
※仮にidの値が重複していた場合、ブラウザ上は正常に表示されますが、
CSSやjavaScriptと組み合わせて使用した際に、思わぬ不具合が起きる可能性があるので、注意してください。
<div id="abc"> <h1 id="aaa">AAA</h1> <!-- idの値が同じになっているためNG --> <h1 id="abc">ABC</h1> </div>
つまり、1つのWebページ上で、idが分かれば1つだけの要素が特定できるというのがidの特徴です。
class属性
class属性も、目的はid属性と同じく、要素を特定するための属性です。
id属性との違いは、class属性の場合は、同じWebページ内で値が重複しても良い、ということです。
異なるタグだけど、CSSで同じレイアウトを適用したい、という場合などにclass属性の値を同じにすることで、共通のCSSを使ってレイアウトをそろえる、といったことができるようになります。
<div class="abc"> <h1 class="aaa">AAA</h1> <!-- idの値が同じになってもOK --> <h1 class="abc">ABC</h1> </div>
style属性
style属性は、CSSというレイアウトに関する設定をするための属性です。
本格的にWebサイトを作成する際には、CSSは別のファイルに切り出すことがほとんどなので、使用頻度は少ないです。
ですがHTMLとCSSを学習するときや、軽く試してみたい時などに簡単に試すことができるので便利です。
本格的なWebサイトを使用する際にはほとんど使用しませんが、覚えておきましょう。
<!-- CSSで文字色を赤くする --> <h1 style="color: red;">AAA</h1>
読みやすいコードの書き方
HTMLに限らず、作成したソースコードは後からメンテナンスすることが多く、また、自分以外の人間が読むこともあります。
そんな時、ソースコードが読みやすく書かれているかどうかは重要なポイントです。
ここでは読みやすいコードを書くためのポイントをいくつか解説します。
インデントを揃える
以下の2つのサンプルを見てください。
サンプル1
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> </head> <body> ・・・ </body> </html>
サンプル2
<!DOCTYPE html> <html lang="ja"> <head> <title>Sampleページ</title> </head> <body> ・・・ </body> </html>
内容は全く同じですが、一般にサンプル2の方が見やすいです。
これは、入れ子になっているタグは、スペースを入れているからです。
これを、インデントと言います。日本語だと字下げという意味です。
HTMLに限らず、プログラミングでも同様ですが、ソースコードを書くときは適度に改行やスペースを入れて読みやすくしておくことが重要です。
めんどくさがらずにきちんとインデントを整えることに慣れておきましょう。
ツール（テキストエディタ）によっては、自動でインデントをいい感じにそろえてくれるのもあるので、探してみると良いでしょう。
わかりやすい名前を付ける
HTMLでは、id属性やclass属性の値、inputタグのname属性の値など、自分で適当に値をつけておく必要がある場面が多く発生します。
その時に、意味のないテキトーな値(aaa, abc, asdfなど)を設定していると、後から時間がたってソースコードを見た時に混乱してメンテナンスしにくくなります。
属性の値を付ける時には、何を表す要素なのかを考え、分かりやすい名前を付けることを心がけましょう。
コメント
分かりやすいソースコードにするために、コメントを有効に活用しましょう。
コメントに書く必要のないことまで書いたり、コメントの量が多すぎると逆に分かりづらくなりますが、適度にコメントを書いておくことで、後で読み返す際の手助けになります。
コメントを有効活用しましょう。
補足
タグの覚え方
タグには様々な種類があり、丸暗記しようとするとなかなか大変です。
しかし、意味を理解すれば覚えやすくなります。
例えば、テーブル要素で使われるタグとして、tr, th, td 等があります。
そのままだと覚えにくいですが、
- tr : table row(テーブルの行)
- th : table header(テーブルのヘッダー)
- td : table data(テーブルのデータ)
のように、何の略か分かれば覚えやすくなります。
リスト要素で使われるタグとしては、ul, ol, li 等があります。
これは、
- ul : unordered list(番号なしのリスト)
- ol : ordered list(番号付きのリスト)
- li : list item(リストの項目)
の意味です。この意味を知っているだけで各段に覚えやすくなります。
他にもタグはたくさんありますが、大抵英語の意味を省略したものがタグの名前になっています。
タグの意味を考え、何の略かを覚えることが、タグの意味を覚える近道です。
勉強法
HTMLの学習サイトなどを紹介。
ドットインストール
1つ3分の動画でプログラミングが学べるサービスです。
HTML等の、Web系に関する講座が豊富で分かりやすいので、
HTMLを学ぶにはドットインストールが最もオススメです。
progate
ブラウザで実際にソースコードを入力しながら結果を試せるサービス。
自分で手を動かして慣れたい、という方にはおすすめです。
TODO
- Emmet
おすすめ書籍
HTML/CSSの知識と共に、デザインに関する知識も同時に学ぶことができる入門書。
とても分かりやすいです。
実際に手を動かして試しつつ、Tipsを読むことでより理解を深めることができます。
