HTML入門

HTMLは Hyper Text Markup Language の略で、ハイパーテキストを記述するためのマークアップ言語です。インターネット上に公開されているWebページのほとんどは、基本的にこのHTMLで作成されています。

WebサイトやWebアプリケーションを作成するためには、HTMLの習得が欠かせません。

HTMLの役割

Webページの「見た目部分」のうち、文書構造 を担当するのがHTMLです。一方、デザイン を担当するのは、CSSという別の言語になります。HTMLは、レイアウトやスタイルではなく、文書の意味づけを行うために使われる言語です。

例えば皆さんが普段、ワープロソフトを使って何かの文書を作成するときのことを考えてみましょう。

文書にはたいてい「見出し」があります。そして、「段落」がつけられた本文があります。「リスト」や「表」、あるいは「図や写真」などが使われる場合もあるかもしれません。

  • 見出し
  • 段落
  • リスト
  • 表
  • 図や写真
  • etc.

これらの「要素」には、それぞれ読み手に伝えたい「意味」があります。それを効果的に伝えるために、ある程度の装飾を行うのではないでしょうか。例えば見出しは文字を大きくしたり、本文は段落ごとにブロックを分けたり、リストにはそれぞれの項目の行頭に「・」や数字をつかうなどして、そこに何が書かれているのかを伝えようとします。

人間の目は、そのような装飾から「文書の意味」を捉えようとします。

一方、Webページというものは、もちろん人間が見るためにあるのですが、もうひとつの側面として「機械が見る」ということを考慮しなければなりません。

今や世界中で、実に膨大な数のWebページが公開されています。その中から、ユーザーが見たいと思うページにたどり着くためには「検索」が不可欠です。

Googleなどが提供している検索の仕組みとは、簡単に言えば「このページにはこんなことが書かれているんだな」ということを記憶しておき、ユーザーが入力した検索ワードに応じて、なるべく最適なWebページを候補として挙げることです。

ここが大事なところです。つまり 検索ロボット と呼ばれるWebページの情報収集プログラムが「こんなことが書かれているんだな」と正しく認識する必要があるのです。もしも文書に「意味づけ」がされていなければ、検索ロボットはそのページを「何について書かれているかよくわからないページ」と認識してしまうかもしれません。そうなると、そのページのURLを知らない限り、いくら検索してもたどり着けないことにもなりかねません。

検索ロボットは文書の「装飾」からは意味を見出せません。そこで何を目印に意味付けをしているかというと、 HTMLタグ と呼ばれるものです。

タグで意味付けをする

文書に意味付けをするには タグ を使います。

<タグ名 属性名="属性値"> 内容 </タグ名>

Webページは全て、このようなタグによって構成されています。これは「ソースコード」を表示することで確認できます。

例えばヤフーのトップページのソースコードを見てみましょう。人間の目には下図のように見えます。

yahoo_page

ブラウザでページを表示させたら、どこか適当なところで右クリックしてみてください。出てきたメニューの中から「ページのソースを表示」（Chromeの場合）を選択すると、以下のような文字が羅列しているページが表示されると思います。

yahoo_source

こんな風に、無数のタグによって意味づけられた文字の集まりが、Webページの正体です。ブラウザはこのようなソースコードを解釈して、人間の目にも見やすくスタイリングしてWebページとして表示してくれるのです。尚、スタイリングは次章で学ぶCSSという言語が主に担当します。

HTMLの基本構造

HTML文書を書くには、少なくとも下記のタグが必須になります。

<!DOCTYPE html>
<html>
  <head>
    <title>このページのタイトル</title>
  </head>
  <body>
    ここにページの内容を書く
  </body>
</html>

<!DOCTYPE html>

１行目には必ず DOCTYPE宣言 というものを記述します。これは、HTMLのバージョンや文書の仕様をブラウザに把握させるためのものです。

なお、この記述は最新のHTML5のDOCTYPE宣言です。
過去のHTMLのバージョンHTML4.01などは形式にも違いがあり、かなり複雑なDOCTYPE宣言でしたが、HTML5はシンプルになりました。

<html>～</html>

DOCTYPE宣言に続いて<html>タグを記述します。また、文書の一番最後には、</html> というスラッシュ / のついた同名のタグを記述して、全体をこのタグで囲みます。

<html> ～ </html> の範囲内の文書が、HTML言語を使って記述されているということを、ブラウザや検索ロボットが把握できるようになります。

なお、一部を除き原則として同名の <開始タグ> 〜 </終了タグ> で、ひとつのまとまりを形成します。また、この中にさらにタグを書いて「入れ子」にすることもできます。入れ子になった場合は、インデント で字下げをするのが一般的です。

<head>～</head>

次に <head>～</head> を記述します。この中には ヘッダー情報 などを書きます。例えば文字コードや、読み込んでいる外部ファイルの情報などです。

基本的には <title> タグ以外の情報はブラウザ上には表示されません。

<title>～</title>

<head>～</head> の中に記述してタイトルをつけます。ここで付けたタイトルは、ブラウザのタイトルバーやタブに表示されます。他にも履歴に残ったり、お気に入りのタイトルなどとしても使われます。

また、検索ロボットが「このページにはこんなことが書かれているんだな」と判断する有力な情報として使われるなど、SEO（Search Engine Organization : 検索エンジン対策）の観点からも、titleタグはとても重要です。

<body>～</body>

ここからが 本文 で、このタグの中身がブラウザ（画面上に）に表示されます。この中にいろいろなタグを使いながら本文を記入していきます。

プレビューしてみよう

この他に、文字化けを防ぐためのmeta要素を追加したものが、最小構成のHTML文書と言ってよいでしょう。

試しに次のファイルを作成して、ブラウザでプレビューしてみましょう。

まず最初に本章の学習用途に「html-basic」という名前でフォルダを作成し、そのフォルダの中に「minimum.html」という名前でファイルを作成してください。

フォルダの場所はお任せします。アクセスしやすいように、Windowsならマイドキュメント、Macならユーザーフォルダが良いでしょうか。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
  </head>
  <body>
    本文です。
  </body>
</html>

「タイトル」と「本文です。」と書いてあるところ以外は、全て半角記号や半角アルファベットで記述しています。引用符などの記号が全角になっていたり、タグの閉じ忘れがあると、構文エラーとなって正しく表示できません。

また、インデントも大切です。エラーにはなりませんが、コードの可読性を維持するためにも、入れ子になった要素はインデントで字下げするようにしましょう。

コードを眺めるだけでは技術の習得はできませんので、ぜひご自身の環境で実際にファイルを作成し、コードを手打ちで入力してください。書き終わったら、忘れずにファイルを「保存」するようにしましょう。

作成したファイルをダブルクリックすると、既定のブラウザが開いてこのファイルがWebページとして表示されると思います。

minimum_html

よく使われるタグ

それでは次に、本文を書いていくことにしましょう。ここでは、使用頻度の高いタグに絞ってご紹介するとともに、各タグの使いどころや特徴などを解説していきます。

まずはhtml-basicフォルダの中に、新しくファイルを作成しましょう。名前は「basic.html」としてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>HTMLの学習</h1>
    <p>ニューモンズでHTMLの学習中です。</p>
    <h2>内容</h2>
    <ul>
      <li>HTMLの役割</li>
      <li>タグで意味付けをする</li>
      <li>HTMLの基本構造</li>
      <li>よく使われるタグ</li>
      <li>要素と属性</li>
      <li>ページを装飾するには</li>
      <li>動的なWebページ</li>
    </ul>

    <h2>必須のタグ</h2>

    <table border="1">
      <thead>
        <tr>
          <th>タグ</th><th>意味</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>html</td><td>HTML文書を表す</td>
        </tr>
        <tr>
          <td>head</td><td>ヘッダー情報を書く</td>
        </tr>
        <tr>
          <td>title</td><td>このページのタイトル</td>
        </tr>
        <tr>
          <td>body</td><td>本文</td>
        </tr>
      </tbody>
    </table>

    <h2>感想</h2>
    <p>難しいけど、楽しい！</p>

    <h2>デザインはどうする？</h2>
    <p>この次の<a href="https://newmonz.jp/lesson/commoon/chapter-2">CSS入門</a>で学ぶ予定！</p>
  </body>
</html>

ファイルが作成できたら、保存してプレビューしてみましょう。

尚本書では、ソースコードとページ表示の確認に CodePen というサービスも併用していきます。CodePenはHTMLやCSS、Javascriptのコードを書きながら、実際の表示を確認できるWebサービスです。

リンクをクリックして、ソースコードとプレビュー画面を確認してみてください。
https://codepen.io/heartone/pen/pozMLKJ

見出し h1 〜 h6

サンプルコードでは h1 と h2 しか登場しませんでしたが、見出し を表すタグは全部で 6 個あります。こちらもCodePenを使って確認してみましょう。

https://codepen.io/heartone/pen/gOYVeEE

数字が小さい順に重要度が高く、これらのタグによってHTML文書のアウトラインが形成されます。特に h1 は最上位の大見出しとしてSEO対策の上で重要なタグとなります。

CSSなどで装飾を施していない場合、ブラウザではデフォルトで h1 から順にフォントが大きく、また、太字で表現されることが多いです。

※ブラウザによって異なります。これは以降の説明でも同じです。

見出しタグを使うときの注意点

  • h1はページ内に１つまで
  • 順番を飛ばさないように（h1の次にh3など）
  • フォントサイズの調整のためだけに見出しタグを使わない（CSSを使う）

段落 p

p は段落（Paragraph）を意味するタグです。長い文章はいくつかのまとまりにわけて、それぞれ p タグで囲うようにしましょう。

尚ブラウザのデフォルトスタイルでは、段落の終わりに約１文字分の高さのマージン（余白）が入ることが多いです。

リスト ul li

ul（unorderd list）は「ここからここまではリスト」であることを表すタグです。そして li（list item）はリストの項目になります。

デフォルトスタイルでは li の行頭に「・」が付きます。

https://codepen.io/heartone/pen/ExYqEWg

また、似たようなタグで ol（ordered list）タグがありますが、こちらは li の行頭に１から順番に番号が付きます。

表 table thead tbody tr th td

ブラウザ上で表を形成するには table タグを使います。ただし、tableタグだけではなく、他にも複数のタグを使って行やセルなどを定義していきます。

タグ 意味 説明
table table 表の開始〜終了を表す
thead table header group ヘッダーセルをグループ化する（省略可）
tbody table body group データセルをグループ化する（省略可）
tr table row 行
th table heading ヘッダーセル
td table data データセル

https://codepen.io/heartone/pen/oNNNxOX

尚、デフォルトでは詰まったスタイリングで見栄えがあまりよくないため、サンプルコードでは border属性をつかって罫線を入れています。ただし、そのようなスタイリングは通常はCSSを使って行います。

リンク a

HTMLの一番の特徴である リンク を作るタグです。a は「アンカー」の略です。 <a> </a>で囲ったテキストはリンクテキストとなって、デフォルトスタイルでは 下線のついた青文字になります。また、カーソルを合わせると色が変化したり、一度訪れたページのリンクテキストは色が濃くなるなどのスタイルが施されている場合が多いです。そのような「状態」によってスタイルを変えることも、CSSで可能です。

ところで、リンク先のページを設定するには次のように href属性 というものを使います。
（属性については次のセクションで詳しく説明します）

<a href="リンク先URL">リンクテキスト</a>

href とは hypertext reference の略です。HTMLの語源にもなっているハイパーテキストは、ここから来ています。ハイパーリンクと呼ばれることもあります。リンクという画期的な機能があったからこそ、インターネットが今日のように発展したと言っても過言ではないでしょう。

汎用ブロックレベル要素 div

サンプルコードには登場しませんでしたが、文脈的に意味を持たない汎用的なタグとして div がよく使われます。

div は Division の略で、分割とか区画を表します。文書に意味付けをすることはなく、レイアウトのための区分けに用いられることが多いです。 ブロックレベル とは、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 一般的なブラウザでは前後に改行が入ります。

これまでに紹介してきた中では、h1〜h6、table、ul、olなどがブロックレベル要素です。

汎用インラインレベル要素 span

div とは逆に インラインレベル要素 として汎用的に用いられるタグに span があります。

インラインレベル要素は主に文章の一部として扱われます。aタグもまたインラインレベル要素です。

https://codepen.io/heartone/pen/QWLeeyj

インライン要素を改行する br

インライン要素は中身のコンテンツが続く限り、ずっと左から右へ描画されていき、右端に到達すると「折返し」をします。

インライン要素を途中で改行させたい場合は <br> タグを使用します。読み方は「ブレーク(break)タグ」です。

あくまでも「改行」の目的で使うようにしてください。 <br> を何度も続けて余白を作ろうとするのは、誤った使い方です。余白はCSSの margin や padding で調整をします。

画像を表示する img

Webページに画像を表示させたい場合は img タグを使用します。

<img src="画像ファイルの場所" alt="代替テキスト">

src属性に「画像ファイルの場所」を、alt属性に「代替テキスト」を指定します。imgタグには終了タグが無い点に注意してください。なぜならば、描画されるコンテンツはタグに挟まれた内容ではなく src属性に指定した画像URLになるからです。

それともう１つ重要な点として、以下の理由でalt属性を設定することが必要となります。

  • 何らかの理由で画像が表示できない場合、そこに代替テキストが表示される。
  • テキストブラウザでは、画像ではなく代替テキストが表示される。
  • 音声読み上げブラウザでは、代替テキストを読み上げられる。
  • 検索ロボットは代替テキストの内容から「どのような画像が置かれているか」が判断される。

ユーザービリティやSEO対策のことを考え、alt属性は必ず指定するようにしましょう。

それでは、imgタグの使用例を挙げてみます。

<img src="https://res.cloudinary.com/heart1jp/image/upload/v1570064031/Newmonz/common/kitten.jpg" alt="子猫の写真">

（しばし癒やされてください）

子猫の写真

画像提供：pixabay

ユーザーからの入力情報を受け付ける form

ハイパーリンクと並んで、HTMLの優れた機能である form についても紹介していきます。

例えば「ログインフォーム」を思い浮かべてみましょう。大抵の場合は「ユーザーIDやメールアドレス」と「パスワード」を入力して「ログインボタン」を押すことで、そのサイトにログインができるようになっています。

ログインフォームの簡単なサンプル

<form action="/login" method="post">
  <p><input type="text" name="username" placeholder="ユーザーID"></p>
  <p><input type="password" name="password" placeholder="パスワード"></p>
  <input type="submit" value="ログインする">
</form>

詳しい解説は本章後半で行います。ここでは「よく使われるタグ」としてformタグのことを知っておいてください。

https://codepen.io/heartone/pen/GRKVbXY

ただし、このままでは残念ながら何も起こりません。
フォームに入力された値を受け取って処理をするには、例えばPHPなどのサーバーサイドで動作するプログラミング言語の助けが必要です。HTMLのようなマークアップ言語では、そのような処理をすることができないのです。

コメント

<!-- からはじまり --> までに書かれた内容はコメントとして扱われ、画面に表示されることはありません。主に制作者側のメモ用途などに使われます。

<!-- この部分はコメントです -->

https://codepen.io/heartone/pen/ExxxELV

要素と属性について

これまでに何度か「要素」や「属性」という用語を使ってきました。ここであらためて整理しておきます。

要素

開始タグから終了タグで囲われた内容全体のことを「要素」と言います。また、入れ子になっている場合は、囲っている方を「親要素」といい、反対にその中に入っている方は「子要素」と呼ぶこともあります。

例）head要素とbody要素の親要素はいずれもhtml要素である

<html>
  <head> ... </head>
  <body> ... </body>
</html>

属性

タグの中には 属性名="属性値" の書式で各種情報や設定を記述出来ます。

使用できる属性は、タグ固有のものもあれば、全タグ共通のものもあります。
前者の例では、例えば aタグにはhref属性が必要、imgタグにはsrc属性やalt属性が必要、などです。
後者の例では、class属性やid属性などが全てのタグで使用できます。classとidについては、次のセクションで詳しく説明します。

タグと属性と要素

class属性とid属性

タグにはclass属性とid属性を付けることができます。

<div id="ID名" class="クラス名１ クラス名２ クラス名３">〜</div>

class属性は「分類」のために使用します。class属性値には半角スペースで区切って、複数のクラス名を設定することができます。また、ページ内に同じクラス名を持つ要素が複数あっても構いません。

一方 id属性は要素の「識別」のために使用します。classのように半角スペース区切りで複数の名前をつけることはできません。また、ページ内には同じ名前の id を複数設定することができません。ただし異なる名前であれば、同一ページにid属性がいくつあっても大丈夫です。

<nav id="global-navigation" class="navigation">
  <ul class="menu-list">
    <li id="menu-home" class="menu-item active">ホーム</li>
    <li id="menu-product" class="menu-item">製品紹介</li>
    <li id="menu-about" class="menu-item">会社概要</li>
    <li id="menu-contact" class="menu-item">お問合せ</li>
  </ul>
</nav>

classとidはいずれも、文書の意味づけを目的としたものではありません。主な用途としては、CSSによる装飾のための「セレクタ」として使ったり、Javascriptで特定の要素を取得・操作するために使用します。

実際の使い方や使い道については、今後CSSやJavascriptを学んでいく過程で身につけていくと良いでしょう。それまでは「そんなものがあるんだな」くらいの認識で大丈夫です。

ページの構造を決める要素

現在のHTMLバージョンは「5」になりますが、HTML5から新たに加わったタグがあります。中でも、ページの構造を決めるのによく使われるタグについて、いくつかご紹介しておきます。

  • header
  • nav
  • main
  • aside
  • footer

ヘッダーを形成する header

ヘッダーとは、ページの上部に位置して主にサイトのロゴや主要なメニュー項目などを配置する領域です。検索バーが置かれることも多いです。ヘッダーには headerタグを使用します。

<header>
  <a href="/">サイト名</a>  
</header>

ナビゲーションを形成する nav

ナビゲーションとは、ページの回遊性を高めるために設置される各種メニューのことです。navタグを使います。

<nav>
  <ul>
    <li><a href="/home.html">ホーム</a></li>
    <li><a href="/product.html">製品紹介</a></li>
    <li><a href="/about.html">会社概要</a></li>
    <li><a href="/contact.html">お問合せ</a></li>
  </ul>
</nav>

メインコンテンツを形成する main

そのページのメインコンテンツとなる領域には mainタグを使います。

<main>
  メインコンテンツ
</main>

補足情報のブロックを形成する aside

メインコンテンツ以外の補足的な内容には asideタグを使用します。いわゆるサイドバーの設置などは aside が適しています。

<aside>
  <div id="sidebar">
    サイドバー
  </div>
</adide>

フッターを形成する footer

フッターはページの最下部に位置し、主にページ情報や著作権などのコンテンツを記載するのに用いられます。ユーザーの離脱を防ぐためにナビゲーションが設置されていることも多いです。footerタグを使用します。

<footer>
  フッター
</footer>

一般的なWebサイトのレイアウト

あくまでも一例ですが、このセクションで紹介したタグは次のようなイメージで使用されます。

Webページレイアウト図

Webページを作ってみよう

基本的なところをひと通り学んだところで、ごくシンプルなWebページを実際に作ってみましょう。

複数のhtmlファイルを作成しますので、それらをまとめるため html-basicフォルダ内に１つフォルダを作成しておきましょう。名前は「company」としてください。

companyフォルダの中に、次の４つのファイルを作成してください。

  • index.html
  • product.html
  • about.html
  • contact.html
html-basic
  └ company
     └ index.html
     └ product.html
     └ about.html
     └ contact.html

これらのファイルを使って、ある会社の紹介サイトを作っていきましょう。トップページのコードを記載しますので、その他のページは練習問題として、ご自身で作成してみてください。

Webサイト仕様

  • 会社名「サンプル株式会社」
  • トップページ（index.html）：トピックが４件あります。
    • 2019.04 海外に進出しました。
    • 2019.03 メディアに掲載されました。
    • 2019.02 新製品を発売開始しました。
    • 2019.01 ホームページを開設しました。
  • 製品紹介ページ（product.html）：製品情報が２件あります。
    • サンプル商品A 500mg
    • サンプル商品B 750mg
  • 会社概要ページ（about.html）：次の情報を表形式で記載します。
    • 会社名｜サンプル株式会社
    • 資本金｜10,000,000円
    • 住所｜〒107-0061 東京都港区北青山２丁目
    • 連絡先｜xxxx-xxx-xxx
    • 事業内容｜健康食品の輸入・販売
  • お問合せページ（contact.html）：問い合わせフォームを設置します。（送信はできません）
    • お名前：テキストフィールド
    • メールアドレス：テキストフィールド
    • 件名：テキストフィールド
    • 本文：テキストエリア
  • ヘッダー：会社名とナビゲーションメニューを設置します。メニュー項目は以下の通りです。
    • ホーム
    • 製品情報
    • 会社概要
    • お問合せ
  • サイドバー：会社名・住所・連絡先を掲載します。
  • フッター：著作権表示

トップページ index.html

さっそくトップページを作っていきましょう。下記に全コードを記載しましたが、練習のためなるべくコピペせずに手打ちで入力してみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプル株式会社</title>
  </head>
  <body>
    <header>
      <span id="company-name">サンプル株式会社</span>
      <nav>
        <ul>
          <li><a href="index.html">ホーム</a></li>
          <li><a href="product.html">製品情報</a></li>
          <li><a href="about.html">会社概要</a></li>
          <li><a href="contact.html">お問合せ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>ホーム</h1>
      <ul>
        <li>2019.04 海外に進出しました。</li>
        <li>2019.03 メディアに掲載されました。</li>
        <li>2019.02 新製品を発売開始しました。</li>
        <li>2019.01 ホームページを開設しました。</li>
      </ul>
    </main>
    <hr>
    <aside>
      <h3>サンプル株式会社</h3>
      <p>〒107-0061<br>東京都港区北青山２丁目</p>
      <p>TEL:xxxx-xxx-xxx</p>
    </aside>
    <hr>
    <footer>
      <div class="copyright">&copy; サンプル株式会社</div>
    </footer>
  </body>
</html>

書き終わったらファイルを保存して、プレビューしてみましょう。index.htmlをダブルクリックするだけです。

body要素の内部のみ抜粋してCodePenにも書いておきましたので、表示具合を見比べてみてください。

https://codepen.io/heartone/pen/dyybgMB

練習問題

残りのページを作成してみましょう。

headerやnav、aside、footerは全ページ共通の内容なので、index.htmlのコピペでOKです。

書き換えるのは main 要素内のみです。次のコードを雛形として使っても構いません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプル株式会社</title>
  </head>
  <body>
    <header>
      <span id="company-name">サンプル株式会社</span>
      <nav>
        <ul>
          <li><a href="index.html">ホーム</a></li>
          <li><a href="product.html">製品情報</a></li>
          <li><a href="about.html">会社概要</a></li>
          <li><a href="contact.html">お問合せ</a></li>
        </ul>
      </nav>
    </header>
    <main>

      （この中を各ページの仕様に合うように書き換えてください）

    </main>
    <hr>
    <aside>
      <h3>サンプル株式会社</h3>
      <p>〒107-0061<br>東京都港区北青山２丁目</p>
      <p>TEL:xxxx-xxx-xxx</p>
    </aside>
    <hr>
    <footer>
      <div class="copyright">&copy; サンプル株式会社</div>
    </footer>
  </body>
</html>

製品情報ページ

  • product.htmlファイルを使用してください。
  • h1要素には「製品情報」と記述してください。
  • h1要素の下に、pタグを使って「取扱中の製品をご紹介します。」と記述してください。
  • pタグの下に、次の２つの製品情報を掲載してください。
    • サンプル商品A 500mg
    • サンプル商品B 750mg
  • 製品情報は次のタグを使ってください
    • 製品名：h2タグ
    • 製品説明文：pタグ（内容は任意です）

仕上がりのイメージ（例）

company-product

会社概要ページ

  • about.htmlファイルを使用してください。
  • h1要素には「会社概要」と記述してください。
  • h1タグの下に、tableタグを使って次の情報を記述してください。
    • 会社名｜サンプル株式会社
    • 資本金｜10,000,000円
    • 住所｜〒107-0061 東京都港区北青山２丁目
    • 連絡先｜xxxx-xxx-xxx
    • 事業内容｜健康食品の輸入・販売
  • 項目名（会社名 など）は thタグを使用してください。
  • 罫線をつけるために、tableタグには border="1" を追加してください。

仕上がりのイメージ（例）

company-about

お問合せページ

  • contact.htmlファイルを使用してください。
  • h1要素には「お問合せ」と記述してください。
  • h1要素の下に、pタグを使って「弊社へのお問合せは下記フォームからご連絡ください。」と記述してください。
  • pタグの下に、次の雛形を使ってお問合せフォームを完成させてください。
<form action="#" method="post">
  <dl>
    <dt>お名前</dt>
    <dd></dd>
    <dt>メールアドレス</dt>
    <dd></dd>
    <dt>件名</dt>
    <dd></dd>
    <dt>本文</dt>
    <dd></dd>
  </dl>
  <p><button type="submit">この内容で送信</button></p>
</form>

雛形の使い方

ddタグの中にテキスト入力欄を形成するタグを記述してください。

１行テキストの場合 

<input type="text" value="">

複数行テキストの場合

<textarea rows="8"></textarea>

定義リスト dl dt dd

定義リストとは、用語と説明文のセットをリスト化したものです。dlタグ、dtタグ、ddタグを使用します。

dlタグは「ここからここまでが定義リスト」であることを示すタグです。この中で用語を dtタグで、説明文を ddタグで記述していきます。

  • dl (definition list)
  • dt (definition term)
  • dd (definition description)
<dl>
  <dt>用語１</dt>
  <dd>用語１の説明文。</dd>
  <dt>用語２</dt>
  <dd>用語２の説明文。</dd>
</dl>

いずれもブロックレベル要素なので改行されたような見栄えになります。また、一般的にはデフォルトスタイルで dt は太字になり、dd はインデントされたような余白が左側に入ります。

今回のようなフォームにこのタグを使用することは、厳密に言えばふさわしくありません。ですが、このデフォルトスタイルの見た目がちょうど良いので使わせてもらうことにしました。本来であれば、そのような見た目に関することはCSSで調整をします。

仕上がりのイメージ（例）

company-contact

練習問題をプレビューしよう

製品紹介・会社概要・お問合せの各ページのコーディングは完了しましたか？

完成したら、さっそくプレビューしてみましょう。ナビゲーションで各ページへのリンクが貼ってあるので、トップページである index.html をまずプレビューしてみましょう。companyフォルダの中にある index.html ファイルをダブルクリックして、ブラウザに表示させてください。その後、メニューから各ページのリンクをクリックして画面を切り替え、うまく表示できているか確認してみましょう。

ページを装飾するには

これまでにも繰り返し述べてきたように、Webページのデザインに関することはHTMLではなくCSSという別の言語を使うのが一般的です。

それではCSSを使ってページを装飾するには、どのようにすればよいでしょうか。

方法は３通りあります。

  • 目的のタグ内でstyle属性で指定する
  • styleタグを使ってCSSを直接書く
  • 外部CSSファイルを読み込む

詳しいことは次章「CSS入門」で学ぶことになりますので、ここでは簡単な紹介にとどめておきます。

style属性でのスタイリング

ほとんどのタグには style属性 というものが使えます。次のような書式で記述します。

<div style="プロパティ名:値;プロパティ名:値;...">ここはスタイルが適用されたdiv要素</div>

CodePenを使って例を示してみます。

https://codepen.io/heartone/pen/qBBBZeE

styleタグでのスタイリング

style属性は「そのタグの要素にだけ」に適用されるものでした。一方、styleタグ というものを使うと、HTML文書の中にCSS形式のスタイル定義を埋め込むことができます。「どのタグに対して装飾を適用するか」を指定するために セレクタ というものが登場します。セレクタはCSSを理解するのに最も重要な概念です。

<style>
セレクタ１ {
  プロパティ名: 値;
  プロパティ名: 値;
  プロパティ名: 値;  
}
セレクタ２ {
  プロパティ名: 値;
  プロパティ名: 値;
}
</style>

こちらもCodePenを使って確認してみましょう。

https://codepen.io/heartone/pen/abbbNee

外部ファイルでCSSファイルを読み込む

上記のstyleタグ内に記述したような内容を、外部ファイルとして用意しておき、HTML側からそのファイルを読み込む方法です。

headタグ内で linkタグ を用いて記述します。

<link rel="stylesheet" href="CSSファイルの場所">

複数のページに対して同じスタイル定義を適用することができるなどのメリットから、現在ではこの方法が主流となっています。

動的なWebページ

動的なWebページというのは、ユーザーの入力や状態によって画面の表示内容が多様に変化するページのことを言います。たとえば皆さんが普段使っているSNSやブログサービス、ECサイトなどがそうです。今の時代、ほとんどのWebサイトは「動的ページ」で構成されています。

一方、静的なWebページというと、いつ誰が訪れても基本的に同じ内容を表示しているページのことです。インターネットがまだ普及したての頃は、一部を除きほとんどのサイトが静的なページで構成されていました。

動的サイトを制作するには、PHPなどのサーバーサイドで動作するプログラミング言語が必要になります。HTMLはプログラミング言語ではないため、残念ながら動的なページを作成することはできません。

まとめ

HTMLの役割と書き方について、重要な点に絞ってお伝えしてきました。HTMLが 文書の意味づけ を目的としていることが、イメージできたでしょうか。

まだご紹介していないたくさんの タグ が存在しますので、必要に応じてその都度調べながら、新しいタグも使えるようになっていきましょう。