HTML超入門編
もくじ
HTMLとは
HTMLとはWebページの構造を定義する言語
HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。
HTMLでは、Webページの構造を定義していきます。
■人の構造の定義に例えたイメージ
より具体的に言うと、<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って、「これは見出し」「これは文章」「これは画像」「これはリンク」など定義していきます。
HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。
HTMLとセットで使う言語CSS
また、Webページのスタイルを整えるため、HTMLとセットでCSS（Cascading Style Sheets）という言語もよく使います。
■人に例えたイメージ
先ほどの例でいうと、具体的には「この見出しは赤文字で」「この文章のフォントは30pxで」「このグループは青線で囲む」などHTMLで定義した内容をどんな見た目に表示させるかを設定していきます。
CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
HTMLの構造
次に、HTMLの構造を説明していきます。HTMLの基本構造は下記のように記述します。
■HTMLの基本構造
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> |
HTMLの基本構造
- 先頭に<!DOCTYPE html>と記述して
- <html>で大きくくくり
- htmlの中の前半に<head>でくくり
- htmlの中の後半に<body>でくくります。
Atomでsample.htmlを新規作成します。「html」と入力して出てきた候補を選択して、htmlの基本構造を作成しましょう。
titleタグの中に「1日速習HTMLCSSセミナー」と記述して保存後、ウェブブラウザで開いて見ましょう。
!doctype html
<!DOCTYPE html>はこれからhtml5というバージョンでhtml文を書きますよという宣言文で、最初の行に記述します。
参考)[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介
最初は難しいので、とりあえずおまじないという意識で記述しておくと良いと思います。
htmlタグ
<html>～</html>はページがhtmlページであることを宣言するタグです。htmlタグの中にhtml文を記述していきます。
(※)言語指定を厳密にする場合は、<html lang="ja">〜</html>にします。
headタグ
htmlタグの前半にheadタグが入ります。headタグには、Webページのタイトル（titleタグ）や、検索エンジン向けの説明文、文字コード、外部のCSSファイルやjavascriptファイルなどを記入します。
ここに記述した内容は、titleタグなどの一部を除きWebブラウザ上には基本的に表示されません。
■人に例えた時のイメージ
bodyタグ
bodyタグの中には、実際にWebブラウザに表示される中身を記述します。
たとえば、見出し、文章、画像、テーブル、などなどのコンテンツをします。 なお、ひとつのHTML文書の中にheadタグやbodyタグが出現する回数は一回だけです。
(補足)id属性とclass属性
さて、htmlの各タグにはid属性やclass属性という属性が設定できます。
例
<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>
idやclassを設定することでCSSでレイアウト装飾する際に、「このid名がついているタグは背景を赤色にする」あるいは、「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。
<h1 id="concept">のようにidやclass名が付いていることがよくあることを覚えておきましょう。
BODY内でよく使うHTMLタグ一覧
ここでは、bodyタグ内で文書を定義するためのよく使うHTMLタグ一覧を紹介します。
| HTMLタグ | 意味 | 備考 |
|---|---|---|
| 見出し | h1〜h6 | 見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」に相当します。h1〜h6のhはheadingの略です。 |
| 段落 | p | パラグラフ(段落)は、pタグを利用します。pはParagraphの略です。 |
| 改行 | br | テキスト内・間で改行するためには、brタグを利用します。brとはBreak（改行）の略です。 |
| 画像 | img | 画像を表示するには、imgタグを利用します。imgはImageの略です。 |
| リンク | a | Webサイトやページへのリンクを作成するには、aタグを利用します。aタグはアンカー（Anchor）の略です。 |
| リスト | ul、li | 箇条書きのようにリスト表示する場合は、ulとliを利用します。ulはUnoder list(順序のないリスト)の略です。liはList Itemの略で各項目になります。ulの他にol(順序のあるリスト)もあります。 |
| テーブル(表) | table | テーブルを定義します。tableタグの他にtr、th、tdなど複数のタグを組み合わせてテーブルを作成します。 |
| 汎用タグdiv | div | タグ自体は特定の意味を持ちませんが、タグどうしをグループ化したりする際にdivタグを利用します。 |
| 汎用タグspan | span | divタグと同じように、span自身は特に意味を持っていませんが、囲んだ範囲をひとかたまりのグループとするのに、spanタグを利用します。divタグが改行が入るのに対して、spanは改行が入りません。 |
BODY内で記述するよく使うHTMLタグ詳細
さて、これまでHTMLの基本構造について説明しました。
headタグに記述する内容は最初は難しくおまじない的に書く記述も多いのでここでは割愛して、ここからはbodyタグに書く内容を主に説明していきます。
見出しタグ h1〜h6
見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」みたいなものです。
<h1>～<h6>のhとはheadingの略で、見出しを意味します。
<h1>が最上位の見出し（大見出し）で、数字が大きくなるにつれて下位の見出し（小さい見出し）になります。<h6>が最下位の見出しです。
通常、<h>～</h>の前後に1行分改行されます。
使用例
|
1 2 3 4 5 6 |
<h1>H1 関西のラーメン特集</h1> <h2>H2 大阪のラーメン特集</h2> <h3>H3 梅田のおすすめラーメン特集</h3> <h4>H4 梅田のおすすめラーメン とんこつ特集</h4> <h5>H5 梅田の濃厚とんこつラーメン</h5> <h6>H6 梅田の濃厚とんこつラーメンで一番なラーメン屋</h6> |
ブラウザでの表示例
先ほど作成したsample.htmlにh1タグ、h2タグ,h3タグを使って任意の見出しを作ってみましょう。
パラグラフ(段落)タグ p
パラグラフ(段落)は、pタグを利用します。最初は文章を書くときに囲むタグという認識で良いと思います。
<p>タグはParagraphの略で、<p>～</p>で囲まれた部分がひとつの段落になります。通常、<p>～</p>の前後に1行分改行されます。
使用例
|
1 2 3 4 |
<p> 本日は、htmlのセミナーを実施しています。 最初は難しいですが、慣れてくるとだんだん面白くなってきます。 </p> |
ブラウザでの表示例
先ほど作成したsample.htmlに、pタグを使って任意の文章を作ってみましょう。
改行タグ br
テキスト内・間で改行するためには、brタグを利用します。
<br>とはBreak（改行）の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。
さきほどのpタグの例で、エディタ上は改行していてもブラウザ上では改行されていませんでした。
使用例
|
1 2 3 4 5 |
<p> 本日は、htmlのセミナーを実施しています。 <br> 最初は難しいですが、慣れてくるとだんだん面白くなってきます。 </p> |
ブラウザでの表示例
しかし、囲む必要のないタグについてはbrタグのように開始タグのみのタグもあります。
(<br>〜〜</br>のようにしてはいけません。)
先ほど作成した、sample.htmlに、brタグを使って先ほどのpタグの中に改行をいれてみましょう。
画像タグ imgの基本的な使い方
まずは、画像を表示する際に利用する<img>タグの基本的な使い方を説明していきます。<img>はImageの略です。
imgタグの基本的な書き方は以下のとおりです。
|
1 |
<img src="画像がある場所(相対パスまたは絶対パスで指定)" alt="画像の補足説明となるテキスト。日本語可能"> |
■ブラウザでの表示例
■上記のソースコード
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>IMGタグについて</title> </head> <body> <img src="images/mimizuku.jpg" alt="みみずく"> </body> </html> |
画像ファイルの場所をsrc属性（sourceの略）で指定します。指定できる画像形式は、GIF・JPEG・PNGなどです。上記使用例では、「src="images/home.jpg"」のように画像の場所を指定しています。画像の指定方法は後述で説明します。
altは画像を説明するテキストを入力します。日本語でもOKで、適切に説明文を入力することでGoogleなどの検索エンジンに画像の意味を伝えることができ、SEO対策にもつながります。
画像の場所(src属性)の指定方法
画像を示す場所の指定方法には大きく、「絶対パス方式」と「相対パス方式」の2つがあります。
| 指定方式 | 概要 |
|---|---|
| 絶対パス | 「src="http://xxxxxx/xxx/home.jpg"」のようにURLのような絶対的な基準で位置指定する方法 絶対パスは「〒xxx-xxxx 大阪市北区xxx番地1-1」のような住所特定のイメージ |
| 相対パス | src="images/home.jpg"のようにimgタグを記述しているファイル(HTMLファイル)を基準にして、画像がどこに在るかを相対的に示す記述方法 相対パスは「大阪駅から100m北のところにある建物」のような住所特定のイメージ |
画像の場所を絶対パスで指定する方法
まずは、「画像の場所を絶対パスで指定する方法」から説明していきます。
絶対パスで指定する場合、基本的に「https://xxxxx/xxx/images/xxxx.png」のようにURLで指定します。
■絶対パスの指定例
|
1 |
<img src="https://webst8.com/blog/wp-content/uploads/2020/01/html-img-aicatch.jpg" alt="" /> |
WordPressで投稿・固定ページなどで画像を利用する場合、通常この方式で画像が設定されています。この他にも、CMS(ホームページ作成ソフトウェア)で画像を設定する場合はこの絶対パスの形式が利用されていることが多いです。
場所が決まっていれば、こちらの記述は簡単ですが、画像の格納場所(URL)が予めわかっていないと記述できないというデメリットがあります。
次に紹介する相対パスでは、（HTMLと画像の相対的な位置関係で記述するので)URLがわかっていなくても(格納先のドメインが変更されても)、そのまま画像が表示されます。
画像の場所を相対パスで指定する方法
次に「画像の場所を相対パスで指定する方法」をご紹介していきます。
相対パスは、imgタグを記述しているファイル(ここでは、HTMLファイル)を基準にして、画像が相対的にどこにあるか示す記述方法です。イメージに例えると相対パスは「大阪駅から100m北のところにある建物」といった指定方法になります。
指定方法としては、大きく下記の3パターンを覚えておくと良いでしょう。
- HTMLと画像が同階層にある場合
- 画像がHTMLよりも下の階層にある場合
- 画像がHTMLよりも上の階層にある場合
■htmlと画像ファイルが同階層にある場合
htmlと画像ファイルが同じフォルダ(同階層のフォルダ)にある場合は、下記のようにsrc="画像ファイル名"と記載します。
src="拡張子含めた画像ファイル名"
■記述例
|
1 |
<img src="home.jpg" alt="" /> |
■画像がhtmlより下のフォルダ階層にある場合
HTMLファイルから見て下のフォルダ階層(ここではimagesフォルダとします)にあるhome.jpgを指定する場合は「src=”"images/画像ファイル名"”」と記載します。
src="images/拡張子含めた画像ファイル名"
■記述例
|
1 |
<img src="images/home.jpg" alt="" /> |
■画像がhtmlより上のフォルダ階層にある場合
またHTMLファイルよりも一階層上がったフォルダにある画像を指定する場合、「src=”"../画像ファイル名"”」と記載します。
src="../拡張子含めた画像ファイル名"で指定 (「..」が一階層上がるを意味します。)
■記述例
|
1 |
<img src="../home.jpg" alt="" /> |
先ほど作成したsample.htmlに、imgタグを使って画像を表示させてみましょう。
srcのパスは絶対パス方式「https://webst8.com/blog/wp-content/uploads/2018/04/seminar-aicatch-htmlcss.png」を指定してください。
うまく表示できたら、自分のPCにある画像を相対パスで指定して表示させてみましょう。
リンクタグ a
他のWebサイトやページへのリンクを作成するには、aタグを利用します。<a>タグはアンカー（Anchor）の略です。
■使用例
|
1 |
<a href="https://webst8.com">Web活用スクール</a> |
■ブラウザでの表示例
Web活用スクール
target="_blank"で新規タブで開く
リンク先を新しいタブで開く場合は、aタグの中に、「target="_blank"」と追加します。
■使用例
|
1 |
<a href="https://webst8.com" target="_blank">Web活用スクール(新規タブで開く)</a> |
■ブラウザでの表示例
Web活用スクール(新規タブで開く)
(補足)idを指定してページ内リンクを設定する
また、ページ内のidのついているタグを利用して、href="#id名"のようにすると、ページ内の該当箇所にリンクすることも可能です(ページ内リンク)。
■使用例
|
1 |
<a href="#contents">▲目次に戻る</a> |
■ブラウザでの表示例
▲目次に戻る
先ほど作成したsample.htmlに、aタグを使ってリンクを設定してみましょう。
hrefのパスは「https://webst8.com/」を指定してみましょう。
うまくいったらtarget=”_blank”属性を追加して違いを確認してみましょう。
リストタグ ul,li | ol,li
箇条書きのようにリスト表示する場合は、ul(またはol)タグとliタグを利用します。
順序なしリスト ul li
順序なしリストはulタグとliタグを利用します。
<ul>タグは、Unordered Listの略で、順序のないリストという意味です。
<li>タグは、list itemの略で、ここの項目です。
ulで大きくくくり、中のリストの各項目を<li>タグで記述します。
■使用例
|
1 2 3 4 5 |
<ul> <li>Facebook</li> <li>Instagram</li> <li>Twitter</li> </ul> |
■ブラウザでの表示例
順序ありリスト ol li
順序があるリストを定義したい場合は、ulの代わりに、<ol>タグを利用します。
(※)「ol」は「ordered list」、「ul」は「unordered list」の意味になります。
■使用例
|
1 2 3 4 5 |
<ol> <li>Facebook</li> <li>Instagram</li> <li>Twitter</li> </ol> |
■ブラウザでの表示例
先ほど作成したsample.htmlに、ul,liタグを使ってリストを設定してみましょう。
li要素には自分の好きな文言で構いません(例,りんご、オレンジ、バナナなど)
うまくいったらul要素をol要素に変えてみて違いを確認してみましょう。
テーブルタグ table
表を作成したい場合は、tableタグを利用します。
tableタグでは複数のタグを利用して構成します。よく使うタグは以下の通りです。
| タグ | 意味 |
|---|---|
| table | テーブルを定義 |
| tr | table rowの略。テーブルの行を定義。 |
| th | table headerの略。テーブルの見出し項目を定義。 |
| td | table dataの略。テーブルのデータ項目を定義。 |
■tableタグを使った表作成のイメージ
■使用例
|
1 2 3 4 5 6 7 |
<table> <tr><th>項目</th><th>内容</th></tr> <tr><td>日時</td><td>5月１5日</td></tr> <tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr> <tr><td>費用</td><td>¥10,000</td></tr> <tr><td>持ち物</td><td>ノートPC</td></tr> </table> |
■ブラウザでの表示例
■表示例 属性border="1"を追記して簡易な枠線を表示する
|
1 2 3 4 5 6 7 |
<table border="1"> <tr><th>項目</th><th>内容</th></tr> <tr><td>日時</td><td>5月１5日</td></tr> <tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr> <tr><td>費用</td><td>¥10,000</td></tr> <tr><td>持ち物</td><td>ノートPC</td></tr> </table> |
■表示例
tableタグの書き方
まず<table>～</table>で大きくくくります。
tableタグ内に<tr>～</tr>を記述して、表の横一行を定義します。
trタグのなかで、見出しに該当する項目を、「<th>～<th>」で定義します。
trタグのなかで、データに該当する項目を<td>～<td>で定義します。
■上記の表示例
※thで記述したセル内は一般的なWebブラウザでは太字で表示されます。
tableタグの補足
table関連のタグは他にも独自の属性(border属性、colspan属性、rowspan属性)やtheadタグ、tbodyタグ、tfootタグなどあります（必ず使用しなければならないというわけではありません。）
■例.列を連結する属性「colspan属性」と行を連結する「rowspan属性」
|
1 2 3 4 5 6 7 |
<table border="1"> <tr><th colspan="2">項目と内容</th></tr> <tr><td>日時</td><td>5月１5日</td></tr> <tr><td rowspan="2">場所と費用</td><td>大阪堀江エイトビル10F</td></tr> <tr><td>¥10,000</td></tr> <tr><td>持ち物</td><td>ノートPC</td></tr> </table> |
■表示例
先ほど作成したsample.htmlに、tableタグを使って定義リストを設定してみましょう。
内容は任意で構いません。
うまくいったら、colspan属性やrowspan属性なども試してみましょう。
グルーピングタグ div
タグ自体は特定の意味を持ちませんが、タグどうしをグループ化したりする際にdivタグを利用します。
■使用例
|
1 2 3 4 |
<div style="background:pink;width:400px;text-align:center"> <p>お弁当でも仕切りでグルーピングしています</p> <p><img src="images/lunch-box1.jpg"></p> </div> |
■ブラウザでの表示例
グルーピングタグ span
divタグと同じように、span自身は特に意味を持っていませんが、囲んだ範囲をひとかたまりのグループとするのに、spanタグを利用します。
■使用例
|
1 2 3 4 5 6 |
<p> 明日の天気予報です。 <br>< 明日東京は<span style="color:red;">大雨警報</span>、大阪は<span style="color:yellow;">大雨注意報</span>、 福岡は<span style="background:aqua;">晴天</span>になりそうです。 </p> |
■ブラウザでの表示例
(※)ブロックレベル要素とインライン要素の詳細についてはこちら
その他のHTMLタグについて
ここでは割愛しますが、そのほかのHTMLについては下記に詳しく載せています。またお時間のある時に確認してみて下さい。