すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 2.HTMLの基礎を学ぼう

Webページは、「HTML」と「CSS」という2つの言語を組み合わせて作られています。

HTMLは、Webページといった文書の構造を作ることが役割で、CSSは、HTMLで作成された文書の見た目を調節することが役割です。

HTMLとCSSの役割

HTMLとCSSを学ぶことで、Webサイトの基本的な仕組みを理解できるようになります。

また、Rubyなどのプログラミング言語を学んでWebアプリケーションを開発したい人もHTMLとCSSの知識は必要になるので、基礎を押さえておきましょう。

HTMLの概要を理解しよう

HTMLは簡単に説明すると、Webページを作成するための言語です。
手を動かしながら、HTMLがどのような言語なのかを確認していきましょう。

ページのソースを確認しよう

まずは、Google Chromeで「おすすめのテキストエディタ11選」のページを開きましょう。

ページを開いたら画面上(画像がない箇所)で右クリックして、以下のようにメニューから「ページのソースを表示」をクリックしましょう。

ページのソースを表示

クリックすると、以下の画像のように別タブでページが開かれます。Chromeの画面上には、記号や英単語、日本語が組み合わさったテキストがたくさん表示されていますね。

これは「おすすめのテキストエディタ11選」のページを構成するHTMLです。

HTMLソース

上記のようなWebページなどの「元となる情報」は、ソースコードソースと呼ばれます。

試しに、以下の箇所のHTMLを見てみましょう。

HTMLを確認する箇所

まずは、以下の動画のようにテキストエディタは、プログラミングを行う上で必須のツールです。をコピーしましょう。

テキストをコピーする

続いて、以下の動画ようにソースコードが表示される画面で「検索バー」を開き、先ほどコピーしたテキストを貼り付けて検索しましょう。

検索する

よく見ると、テキストはpという記号で囲われていますね。
こちらのpは、「Paragraph」の略で段落に付ける記号になります。

p要素

1つ下のテキストも、以下の画像のようにpで囲われていますね。

よく見ると、markstrongという記号で囲われる箇所があります。markは、目立たせたいテキストに付ける記号で、strongは強調したい重要なテキストに付ける記号になります。

p要素以外の要素

このようにHTMLでは、文章の意味を考えて適切な記号で囲うことで、Webページを作成します。記号は、タグと呼ばれます。

HyperText Markup Language

HTMLとは「HyperText Markup Language」の略で、Webページを作成する為に開発されたマークアップ言語です。

  • HyperText - 画像やリンクを埋め込める高機能なテキストのこと
  • Markup - 文書の各部分をタグで囲い、意味をつけること
  • Language - 決まりごと(ルール)

HyperText(ハイパーテキスト)

HyperTextとは、ハイパーリンク(クリックすると別のページに移動するリンク)を挿入することができるテキストのことです。

他にも、画像や動画などのデータをリンクとして埋め込むことができます。

HyperText

HyperTextの仕組みを使うことで、関連するWebページ同士を閲覧できるように結びつけ、情報を整理することができます。

Markup(マークアップ)

Markup(マークアップ)とは、コンピュータが文書の構造を認識できるように、文書の各部分をタグと呼ばれる記号で囲み、意味をつけることです。

先ほどのソースコードでも、pという記号で囲われる部分がありましたね。pは段落に付ける記号なので、「この部分は段落」という意味づけを行なっているのです。

マークアップ

コンピュータは人間のように「見出し」や「段落」をデザインやレイアウトから認識して判断することができないので、このようなマークアップが必要になります。

コンピュータと人間

マークアップ

文書の各部分をタグで囲み、意味づけを行うことを「マークアップする」と呼びます。

マークアップすることで、具体的にはWebブラウザがWebページ内の各部分の意味を理解して表示できるようになります。

ポイント
  1. HTMLとは「HyperText Markup Language」の略で、HyperTextを作るために「タグ」でマークアップする言語のこと
  2. マークアップするとは、文書の各部分をタグで囲み、意味づけを行うこと
  3. 言語は、タグを付ける際の決まりごとを意味する

HTMLを書いてみよう

ここから先は「Visual Studio Code」を使って、実際にHTMLを書きます。

前回学習した「フォルダ作成」を参考に、デスクトップ上に作業用フォルダのhtml-basicを作成しましょう。フォルダ内にはindex.htmlを作成しておきましょう。

デスクトップ

Visual Studio Code上で、以下の画面を表示できたら準備完了です。

Visual Studio Code画面

それでは、手を動かしながらHTMLの基礎文法を学んでいこう!

ぴかわかさん

HTMLタグの仕組み

<>で囲まれた文字列の並びがタグです。タグの名前は、要素名と呼びます。

タグ

HTMLでは、タグでマークアップするときに、表現したい内容を<要素名></要素名>で囲みます。

ポイント
  1. タグは、「<>で囲まれた文字列の並び」を指す
  2. タグの名前を「要素名」と呼ぶ

開始タグ・終了タグ・要素

<要素名>開始タグ</要素名>終了タグと呼びます。

タグの仕組み

多くの場合、開始タグと終了タグはペアで使われます。終了タグには、要素名の前に/が入るので注意してください。

開始タグと終了タグ、表現したい内容を含めた全体のことを「要素」と呼びます。

タグと要素

用語がたくさん出てきたので、以下のサンプルコードで整理しておきましょう。

HTML | サンプルコード
1
<p>HTMLとは「HyperText Markup Language」の略です。</p>
用語 サンプルコードの箇所
タグ <p></p>
要素名 p
開始タグ <p>
終了タグ </p>
要素 <p>HTMLとは「HyperText Markup Language」の略です。</p>
適切なタグでマークアップしてみよう

こちらのテキストをHTMLのタグで囲っていきます。

index.html | マークアップ前
1
2
HTMLの概要を学ぼう
HTMLとは「HyperText Markup Language」の略です。

まずは、上記のテキストをWebブラウザで表示させてみましょう。

テキストをindex.htmlに書き、command + Sでファイルを保存しましょう。
そして、動画のようにChromeにドラッグ&ドロップして画面に表示させます。

テキストをWebブラウザで表示

テキストには、タグで囲み意味付け(マークアップ)していないので、人間側が「ここは見出し」「ここは段落」と考えていても、Webブラウザは認識することができません。

そのため、以下のように解釈された画面を表示します。

マークアップしない場合

Webブラウザが見出しと段落を解釈できるように、テキストをタグで囲み、意味を付けていきましょう。

マークアップする際には、テキストの意味を考えて、適切なタグを選びます。
以下のHTMLの概要を学ぼうでは「大見出し」の意味を付けて、HTMLとは~は「段落」の意味を付けます。

index.html | マークアップ前
1
2
HTMLの概要を学ぼう <!-- 大見出しの意味を付ける -->
HTMLとは「HyperText Markup Language」の略です。<!-- 段落の意味を付ける -->

テキストの意味から、h1タグとpタグを選びます。h1は「1番大きな見出し」という意味を持ちます。pは「段落」でしたね。

それでは、以下のようにテキストをタグで囲み、意味を付けてみましょう。
※タグは、全て半角文字で書きましょう。

index.html | h1タグとpタグでマークアップする
1
2
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>

index.htmlを再度保存し、動画のように先ほどのページを再読み込みしましょう。

ページを再読み込み

ページを再読み込みすると、Webブラウザによって「h1要素の見出し」と「p要素の段落」が解釈され、以下のように表示されます。

マークアップ後

マークアップする前と比較しても、見出しの文字が大きくなったり、段落をあけて表示されていますね。

マークアップ前後の比較

このようにHTMLでは、テキストの意味を考えて適切なタグで囲むことによって、文書の構造を作ることができます。

ポイント
  1. マークアップは、表現したい内容を<要素名></要素名>で囲む
  2. <要素名>を「開始タグ」、</要素名>を「終了タグ」と呼ぶ
  3. 「要素」とは、開始タグと終了タグ、表現したい内容を含めた全体のこと

属性

要素には、属性を指定することができます。
属性とは、要素の動作を調整するために開始タグ内で使用される文字列のことです。

属性を指定するには、開始タグを<要素名 属性名="属性値">という形式で書きます。

属性

例えば、ハイパーリンクを意味するa要素では、以下のようにhref属性を使って、リンク先のURLを指定します。aは「Anchor」の略です。

HTML | サンプルコード
1
<a href="https://pikawaka.com/tips/texteditor">おすすめのテキストエディタ11選</a>
用語 サンプルコードの箇所
タグ <a></a>
要素名 a
属性名 href
属性値 https://pikawaka.com/tips/texteditor
要素 <a href="https://pikawaka.com/tips/texteditor">おすすめのテキストエディタ11選</a>

要素名と属性名の間は、半角スペースで区切るよ!

ぴかわかさん
要素に属性を指定してみよう

それではa要素にhref属性を使って、リンク先のURLを指定してみましょう。

リンク先には、HTMLについて調べるときにおすすめのリファレンスサイト「HTMLクイックリファレンス」を設定します。URLはhttp://www.htmq.comです。

以下の内容をindex.htmlに書いて、ハイパーリンクを設定しましょう。

index.html | ハイパーリンクを設定する
1
2
3
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>

動画のようにファイルを保存し、ページの再読み込み後にリンクをクリックすると「HTMLクイックリファレンス」に移動することができます。

ハイパーリンクを設定

属性は、複数指定することができます。

例えばhref属性に加えて、リンク先のページを開くウィンドウを指定できるtarget属性を加えることもできます。属性と属性の間も半角スペースで区切ります。

以下の内容をindex.htmlに書いて、target属性を指定しましょう。

index.html | target属性を指定する
1
2
3
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com" target="_blank">HTMLクイックリファレンス</a>

target="_blank"は、新規ウインドウでリンクを開くことを示します。

動画のようにファイルを保存し、ページの再読み込み後にリンクをクリックすると、新規ウインドウでページが開かれていますね。

ハイパーリンクを別タブで開く

このように要素に属性を指定することで、特定の機能を追加することができます。

ポイント
  1. 属性とは、要素の動作を調整するために開始タグ内で使用される文字列のこと
  2. 属性の指定は、開始タグを<要素名 属性名="属性値">という形式にする
  3. 要素名と属性名の間、属性と属性の間は、半角スペースで区切ること

空要素

HTMLではタグでマークアップするときに、表現したい内容を「開始タグ」と「終了タグ」で囲むと説明してきましたが、空要素は例外になります。

空要素は、内容を持たない要素のことで「開始タグ」だけで利用することができます。

空要素 意味 タグ
br 「Break」の略で「改行」を意味します。 <br>
hr 「horizontal rule」の略で「水平方向の罫線」を意味します。 <hr>
img 「image」の略で「画像」を意味します。 <img>

imgタグで画像を表示させよう

それでは、imgタグを使って見出しの前に画像を表示させてみましょう。

ロゴ画像表示

画像を表示するには、img要素にsrc属性を指定する必要があります。
src属性値には、画像ファイルの場所(パス)を書きます。

imgタグの基本的な使い方
1
<img src="画像ファイルの場所">

まずは、サンプル画像をダウンロードするために、以下のリンクをクリックしましょう。

logo.png

次にhtml-basicフォルダ内にimgという画像ファイルを管理するフォルダを作成しましょう。

フォルダ作成方法

以下の動画のようにimgフォルダを作成します。

フォルダを作成までの流れ

続いて、先ほどダウンロードしたlogo.pngを作成したimgフォルダに入れます。

ダウンロードフォルダにあるlogo.pngをドラッグ&ドロップして、以下の動画のようにimgフォルダに入れましょう。

imgフォルダに画像を入れる

そして、index.htmlの1行目にsrc属性値が空のimgを追加しましょう。

index.html
1
2
3
4
<img src="">
<h1>HTMLの概要を学ぼう</h1> <p>HTMLとは「HyperText Markup Language」の略です。</p> <a href="http://www.htmq.com" target="_blank">HTMLクイックリファレンス</a>

src属性値には、logo.pngがある場所を設定する必要があります。

以下の動画のようにlogo.png上で右クリックし、メニューに表示される「相対パスをコピー」をクリックして、src属性値に貼り付けてファイルを保存しましょう。

src属性値を設定する

フォルダの区切りは/になります。logo.pngimgフォルダ内にあるので、src属性値にはimg/logo.pngを指定しました。

index.html | ファイルのある場所の書き方
1
<img src="img/logo.png">

最後にChromeで表示するページを再読み込みして、ロゴを表示させましょう。

ページを更新する

見出しの前にロゴ画像を表示できたら、完了です。

ポイント

空要素は「内容を持たない要素」のことで、「開始タグ」だけで利用することができる

特別な意味を持たないタグ

これまで「pタグで囲った部分は『段落』、h1タグで囲った部分は『大見出し』を示す」というような意味を持つタグについて説明してきましたが、HTMLのタグには、特別な意味を持たないタグもあります。

意味を持たないタグには、主にdivタグとspanタグがあります。

要素 意味 タグ 主な用途
div タグ自体に特別な意味はない <div></div> 他の要素をグループ化
span タグ自体に特別な意味はない <span></span> 要素の一部をグループ化

divタグやspanタグは、何の意味も持たせたくない部分をグループ化する時に役立ちます!

ぴかわかさん

divタグとは

divは「DIVison(区分)」の略で、タグ自体に特別な意味を持ちませんが、他の要素をまとめてグループ化することができます。

要素をグループ化するには、以下のようにdivタグで囲います。

HTML | サンプルコード
1
2
3
4
<p>いただきます</p>
<p>ごちそうさま</p>
<p>おはよう</p>
<p>おやすみなさい</p>
HTML | divで2つのグループに分ける
1
2
3
4
5
6
7
8
9
<div>
  <p>いただきます</p>
  <p>ごちそうさま</p>
</div>

<div>
  <p>おはよう</p>
  <p>おやすみなさい</p>
</div>

この時点ではdivタグで囲っても、ブラウザの表示結果は特に変わりません。

ブラウザ表示結果

しかし、div要素にclass属性を指定することで、グループ化した部分のデザインを変えることができます。

例えば、最初のdiv要素にclass="box"を指定し、CSSで.box {background: green;}とすることで、最初のdiv要素だけ背景色を緑にすることができます。

See the Pen Untitled by miyajima yuya (@pikawaka) on CodePen.

※CSSでデザインを適用する方法については、次の「CSS基礎」で詳しく説明します。

このようにdivは、タグ自体には意味を持ちませんが、他の要素をグループ化することで、その部分のデザインを変えることができます。

spanタグとは

spanタグはdivタグ同様に単体では特別な意味を持ちませんが、要素の一部をグループ化することができます。

要素の一部をグループ化するには、以下のようにspanタグで囲います。

HTML | サンプルコード
1
<p>WWWは、World Wide Webの略です。</p>
HTML | spanでp要素の一部をグループ化
1
<p>WWWは、<span>World Wide Web</span>の略です。</p>

この時点では、spanタグで囲っても、ブラウザの表示結果は特に変わりません。

ブラウザ表示結果2

しかし、先ほどのdiv要素のようにspan要素にもclass属性を指定することで、グループ化した部分のデザインを変えることができます。

span要素の場合は、ある要素の一部だけデザインを変えることができます。

例えば、span要素にclass="text-red"を指定し、CSSで.text-red {color: red;}とすることで、p要素の一部(span要素)の文字色を赤に変えられます。

See the Pen Untitled by miyajima yuya (@pikawaka) on CodePen.

このようにspanは、単体では意味を持ちませんが、要素の一部をグループ化することで、その部分のデザインを変えることができます。

divとspanの違い

divspanは、どちらも単体では意味を持たないタグであり、タグで囲うことでグループ化することができますが、レイアウトの初期値が違います。

例えば、ほとんどのブラウザではdiv要素の前後に改行が挿入されますが、span要素の前後には改行が挿入されません。

divとspanの違い

この辺のレイアウトの違いについては、次のCSSで詳しく学びます。

現段階ではdivspanはレイアウトの初期値の違いがあり、「他の要素をまとめてグループ化する場合はdiv、要素の一部をグループ化したい場合はspanを使う」とだけ頭に入れておきましょう。

HTMLの基本構造を理解しよう

HTMLでは文書全体に関するタグが用意されています。HTMLの基本構造やWebページのレイアウトを押さえておきましょう。

HTMLの基本構造

HTMLファイルは、次のような基本的な構造を持ちます。

html文書

最新バージョンであるHTML5では、以下のように記述します。

HTML文書の基本構造
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <!-- 文書に関する情報 -->
  </head>
  <body>
    <!-- 文書本体 -->
  </body>
</html>

ここまで学習してきたindex.htmlの内容は、body要素の中に配置させます。

index.html
1
2
3
4
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>

上記の内容をbody要素の中に配置することで、ブラウザ側に文書のコンテンツを示す部分だと解釈させることができます。

文書全体に関するタグを使ってみよう

それでは、index.htmlに各タグを使って基本的な構造を持たせてみましょう。

index.html | 変更前
1
2
3
4
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>
index.html | 変更後
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <!-- 文書に関する情報 -->
  </head>
  <body>
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>
</body> </html>

以下のようにブラウザ上の画面では特に何も変化は見られないですが、上記のように記述することでHTML文書としての基本的な構造を持たせることができました。

HTML文書として基本的な構造

続いて、head要素に文書に関する情報を加えてみましょう。

ページのタブにタイトルを付けてみよう

head要素には、文書に関する情報を指定することができます。

例えばhead内でtitle要素を使うと、ページのタイトルを指定することができます。このタイトルはページが読み込まれたときにブラウザのタブに表示されます。

それでは、index.htmlにページのタイトルを指定しましょう。

index.html | ページのタイトルを指定する
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
<title>HTMLの基礎を学ぼう</title>
</head> <body> <img src="img/logo.png"> <h1>HTMLの概要を学ぼう</h1> <p>HTMLとは「HyperText Markup Language」の略です。</p> <a href="http://www.htmq.com">HTMLクイックリファレンス</a> </body> </html>

ページのタイトルを指定したら、動画のようにindex.htmlを保存してブラウザを再読み込みさせましょう。

ページのタイトル

head内にtitle要素を指定することで、以下のようにブラウザのタグにページのタイトルとしてtitleタグで囲ったテキストが表示されますね。

ページのタイトルを表示

文書の言語と文字コードを指定しよう

Webサイトで「文字化け」を起こしているページを見たことはないでしょうか。

文字化けとは、フォントが反映されず文字が別の文字として表示されてしまうことですが、以下の内容を追加することで、文字化けを対策することができます。

以下のハイライト箇所の内容を追加しましょう。

index.html | 言語と文字コードを指定する
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎を学ぼう</title> </head> <body> <img src="img/logo.png"> <h1>HTMLの概要を学ぼう</h1> <p>HTMLとは「HyperText Markup Language」の略です。</p> <a href="http://www.htmq.com">HTMLクイックリファレンス</a> </body> </html>

<html lang="ja">では、html要素にlang属性を追加して文書の言語を「日本語」に指定しており、<meta charset="UTF-8">では、文字コードをHTML5で推奨されるUTF-8に指定しています。

これにより、文字化けを防ぐことができます。

基本的なWebサイトのレイアウト

さまざまな形のWebサイトがありますが、「ヘッダー、フッター、メイン」を持つ基本的なWebサイトのレイアウトを押さえておきましょう。

基本的なWebサイトのレイアウト

Pikawakaのサイトも基本的には、上記のレイアウトになります。

pikawakaのwebサイトのレイアウト

HTML5では、ヘッダー、フッター、メインのように基本的なページの構造を表すタグが追加されました。

要素 意味 タグ
header ヘッダーであることを意味する <header></header>
main 文書内の主要な内容を意味する <main></main>
footer フッターであることを意味する <footer></footer>

これらの要素はbody要素の中に配置し、ブラウザの画面上に表示させます。

body要素の中にヘッダー、メイン、フッターを配置する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
<header>
<!-- サイトロゴやメニューなど -->
</header>
<main>
<!-- ページのメインとなるコンテンツ -->
</main>
<footer>
<!-- サイトの連絡先や著作権に関する情報 -->
</footer>
</body> </html>

head要素とheader要素は、全く別の要素なので注意しよう!

ぴかわかさん

この記事のまとめ

  • HTMLとは「HyperText Markup Language」の略
  • HTMLは、Webページといった文書の構造を作ることが役割になる
  • HTMLで作成された文書の見た目を調節するのは、CSSの役割になる