サーブレット&JSPの基本｜基本タグでWebページを作成

サーブレット&JSPの基本｜基本タグでWebページを作成

基本タグを組み合わせて、見るだけだったWebページを自分の手で作ってみよう。

HTMLの基本文法と文書構造を理解したら、次はいよいよ実際のWebページ作りです。

HTMLには、見出しを作るタグ、文章を段落としてまとめるタグ、別のページへ移動するリンクを作るタグ、情報を表に整理するタグなど、さまざまなタグが用意されています。これらを目的に合わせて組み合わせることで、ブラウザに表示するページを作成できます。

最初から、ショッピングサイトやSNSのような複雑な画面を作る必要はありません。まずは、見出し、段落、リンク、表といった基本的な部品を使い、シンプルなWebページを完成させることが大切です。

ここでは、架空のWeb制作チームを紹介する2つのHTMLファイルを作成します。1つはメンバーの一覧を表示するページ、もう1つは特定のメンバーを詳しく紹介するプロフィールページです。2つのページにはリンクを設定し、クリックによって相互に移動できるようにします。

HTMLファイルを入力して保存する手順や、文字化けを防ぐための文字コードについても確認していきましょう。

Webページ作成で使用する基本的なタグ

HTMLには多くのタグがありますが、最初からすべてを暗記する必要はありません。基本的なWebページを作成するときによく使うタグから、少しずつ覚えていけば大丈夫です。

今回のWebページ作成で使用する主なタグは、次のとおりです。

タグには、記述する場所に決まりがあります。

たとえば、title要素はhead要素の中に記述し、h1要素やp要素はbody要素の中に記述します。表を作る場合は、table要素の中にtr要素を置き、さらにtr要素の中にth要素やtd要素を置きます。

このように、HTMLでは要素同士の親子関係を意識して記述することが大切です。

タグは必要になったものから覚えよう

普段目にするWebページには、今回紹介するもの以外にも、画像、入力フォーム、ナビゲーション、記事、動画などを表す多くのタグが使われています。

ただし、最初からすべてのタグを使おうとすると、どのタグをどこに書くのか分からなくなりやすいものです。

まずは、次のような順番で考えてみるとよいでしょう。

1. HTML文書の基本構造を作る
2. title要素でページタイトルを指定する
3. h1要素でページの見出しを作る
4. p要素で説明文を書く
5. a要素で別のページへのリンクを作る
6. table要素で情報を表に整理する

この流れでページを作れば、基本的なタグがどのように組み合わされるのかを実際に確認できます。

2つのWebページを作ってつなげよう

今回は、架空のWeb制作チームを紹介するページを作成します。

作成するHTMLファイルは、次の2つです。

一覧ページでは、メンバーの名前と担当分野を表形式で表示します。その中にある佐藤遥という名前をクリックすると、プロフィールページへ移動します。

プロフィールページには一覧へ戻るリンクを用意し、クリックするとメンバー一覧へ戻れるようにします。

このように、複数のHTMLファイルをリンクでつなぐことで、小さなWebサイトを作れます。

図1：一覧ページとプロフィールページのつながり

この図から分かること

Webサイトは、1つのHTMLファイルだけで作られているとは限りません。目的ごとに複数のHTMLファイルを用意し、それらをリンクでつなぐことができます。

一覧ページにある名前をクリックすると、詳しいプロフィールページへ移動します。プロフィールページにある一覧へ戻るリンクをクリックすると、一覧ページへ戻ります。

この移動を実現するのがa要素です。a要素のhref属性に移動先のHTMLファイル名を指定することで、ブラウザが指定されたページを読み込みます。

Webページを作成する基本的な手順

HTMLファイルは、基本的に次の手順で作成します。

HTMLをテキストエディタに入力する

最初に、HTMLを入力できるテキストエディタを開きます。

Windowsのメモ帳でも作成できますが、Web開発ではVisual Studio Codeなど、HTMLの入力を支援してくれるエディタも広く使われています。

テキストエディタには、DOCTYPE宣言から始まるHTML文書を入力します。

タグ名や属性名は半角文字で入力します。HTMLとして処理される部分に全角の山かっこや全角の引用符を使うと、ブラウザがタグや属性として認識できません。

たとえば、次の文字は半角で入力する必要があります。

• タグを囲む < と >
• 終了タグで使用する /
• 属性値を囲む "
• タグ名や属性名
• ファイル名や拡張子

タグ名はHTMLでは大文字と小文字を区別せずに処理されますが、現在は小文字で記述する方法が一般的です。

同じファイルの中で大文字と小文字を混在させるよりも、すべて小文字に統一したほうが読みやすくなります。

ファイル名を付けて保存する

HTMLを入力したら、ファイル名を付けて保存します。

HTMLを記述したファイルはHTMLファイルと呼ばれ、通常は拡張子を.htmlにします。.htmも使用できますが、特別な理由がなければ.htmlを使うとよいでしょう。

ファイル名には、次のような文字を使用するのが基本です。

• 半角英字
• 半角数字
• ハイフン
• アンダースコア

たとえば、次のようなファイル名を付けられます。

ファイル名には日本語や空白を使うこともできますが、サーバ上で扱う際に問題が発生する可能性があります。学習段階から半角英数字を中心とした名前を付ける習慣を身に付けておくと安心です。

大文字と小文字を正確に合わせる

Windows上では、ファイル名の大文字と小文字が違っていても、同じファイルとして扱われることがあります。

一方、Webサーバでよく使われる環境では、大文字と小文字が区別されることがあります。

たとえば、次の2つは別のファイル名として扱われる可能性があります。

• staff-list.html
• Staff-List.html

a要素のhref属性に記述するファイル名は、実際に保存したファイル名と完全に一致させましょう。

拡張子が.txtになっていないか確認する

メモ帳などで保存した場合、ファイル名の末尾に.txtが自動的に追加されることがあります。

staff-list.htmlと入力したつもりでも、実際にはstaff-list.html.txtとして保存されていると、HTMLファイルとして正しく扱われません。

保存後は、ファイル名の拡張子が.htmlになっていることを確認しましょう。

Windowsで拡張子が表示されていない場合は、エクスプローラーの表示設定でファイル名拡張子を表示すると確認しやすくなります。

文字コードはUTF-8で保存する

HTMLファイルを保存するときは、文字コードも指定します。

文字コードとは、コンピュータが文字をデータとして保存したり読み込んだりするための規則です。

人間には同じ「あ」という文字に見えていても、コンピュータでは文字コードに従った数値の組み合わせとして保存されています。そのため、保存するときに使った文字コードと、読み込むときに使う文字コードが一致している必要があります。

Webページでは、UTF-8が広く使用されています。今回作成するHTMLファイルもUTF-8で保存します。

保存時と読み込み時の指定をそろえる

HTMLファイルでは、head要素内のmeta要素を使って、ブラウザに文字コードを伝えます。

meta要素でUTF-8を指定していても、ファイル自体が別の文字コードで保存されていると、日本語が正しく表示されないことがあります。

反対に、ファイルをUTF-8で保存していても、ブラウザが別の文字コードとして読み込むと文字化けする可能性があります。

次の2つをそろえることが大切です。

HTML内の指定と、実際に保存するときの設定を一致させることで、文字化けを防ぎやすくなります。

文字化けとは

文字化けとは、本来表示されるはずの文字が、意味の分からない記号や別の文字として表示される現象です。

たとえば、日本語の文章を保存した文字コードと異なる文字コードで読み込むと、文章が次のような状態になることがあります。

• 日本語が記号のように表示される
• 一部の文字だけが別の文字になる
• 四角形や疑問符として表示される
• 文章全体が読めなくなる

文字化けが発生した場合は、HTMLの内容だけでなく、ファイルを保存したときの文字コードも確認しましょう。

図2：HTMLファイルをUTF-8で保存する流れ

この図から分かること

HTMLファイルを作成するときは、HTMLを入力するだけでなく、保存時の設定も重要です。

ファイル名には.htmlという拡張子を付け、文字コードにはUTF-8を選択します。保存後は、ブラウザでファイルを開き、日本語やレイアウトが正しく表示されているか確認します。

正しいHTMLを書いていても、拡張子や文字コードの指定が誤っていると、HTMLファイルとして開けなかったり、日本語が文字化けしたりします。

プロフィールページを作成しよう

最初に、佐藤遥さんのプロフィールを表示するページを作成します。

このページでは、次のタグを使用します。

• meta
• title
• h1
• p
• br
• a

佐藤遥さんのプロフィールページの例

ファイル名： haruka-profile.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web制作チームの紹介</title>
</head>
<body>
  <h1>佐藤 遥のプロフィール</h1>

  <p>
    入社3年目のWebエンジニアです。<br>
    主にHTMLやCSSを使った画面制作を担当しています。<br>
    最近はJavaとJSPを使ったWebアプリケーション開発にも取り組んでいます。
  </p>

  <a href="staff-list.html">一覧へ戻る</a>
</body>
</html>

ブラウザの表示例

このHTMLを入力したら、UTF-8を指定し、haruka-profile.htmlという名前で保存します。

保存するフォルダは、後で作成するstaff-list.htmlと同じ場所にしてください。

meta要素で文字コードを指定する

meta要素は、Webページに関するさまざまな情報を指定するために使用します。

今回のHTMLでは、charset属性を使って文字コードをUTF-8に指定しています。これにより、ブラウザはHTMLファイルをUTF-8として読み込みます。

meta要素は内容を持たない空要素なので、終了タグは記述しません。

文字コードを示すmeta要素は、head要素内のできるだけ前のほうに記述するのが一般的です。

title要素でページタイトルを指定する

title要素は、Webページのタイトルを指定します。

title要素に記述した文字は、主にブラウザのタブに表示されます。body要素内に表示する見出しとは役割が異なります。

また、ページをブックマークしたときの名前や、検索結果に表示されるページ名の候補として利用されることもあります。

分かりやすいページタイトルを付けることは、利用者にページの内容を伝えるうえで大切です。

h1要素で最上位の見出しを作る

h1要素は、ページの中心となる見出しを作ります。

HTMLにはh1からh6までの見出し要素があります。数字が小さいほど上位の見出しを表します。

h1は単に文字を大きくするためのタグではありません。そのページが何について書かれているのかを表す、重要な見出しです。

プロフィールページでは、佐藤 遥のプロフィールをh1要素として記述しています。

p要素で文章を段落としてまとめる

p要素は、文章の段落を表します。

プロフィールの説明や記事の本文など、ひとまとまりの文章を記述するときに使用します。

文章が長くなる場合は、すべてを1つのp要素に入れるのではなく、内容のまとまりごとに複数のp要素へ分けると読みやすくなります。

テキストエディタ上で文章を改行しても、ブラウザ上では通常、1つの空白として処理されます。ソースコード上の改行が、そのまま画面上の改行になるわけではありません。

br要素で文章の途中を改行する

br要素は、文章の途中で改行したいときに使用します。

今回のプロフィールページでは、経歴や担当内容を1行ずつ表示するためにbr要素を使用しています。

br要素は内容を持たない空要素なので、終了タグを必要としません。

ただし、文章のまとまりを分けたい場合は、br要素を何度も並べるのではなく、p要素を分ける方法が適しています。

br要素は住所、詩、短いプロフィールなど、1つの段落の中で意味のある改行を入れたい場合に使うとよいでしょう。

a要素で一覧ページへのリンクを作る

a要素は、別のページへ移動するリンクを作ります。

リンク先はhref属性に指定します。

プロフィールページでは、href属性にstaff-list.htmlを指定しています。そのため、一覧へ戻るという文字をクリックすると、同じフォルダに保存されたstaff-list.htmlが開きます。

リンクが正しく動作するためには、次の条件を満たす必要があります。

• staff-list.htmlが実際に存在する
• 2つのHTMLファイルが同じフォルダにある
• href属性に書いたファイル名が正しい
• 大文字と小文字が実際のファイル名と一致している
• 拡張子まで正確に記述されている

リンクをクリックしてページが見つからない場合は、最初にファイル名と保存場所を確認しましょう。

メンバー一覧ページを作成しよう

続いて、Web制作チームのメンバーを一覧表示するページを作成します。

このページでは、名前と担当分野をtable要素で表にします。佐藤遥という名前にはリンクを設定し、先ほど作成したプロフィールページへ移動できるようにします。

Web制作チーム一覧ページの例

ファイル名： staff-list.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web制作チームの紹介</title>

  <style>
    table {
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #333;
      padding: 8px 16px;
    }
  </style>
</head>
<body>
  <h1>Web制作チーム一覧</h1>

  <table>
    <tr>
      <th>名前</th>
      <th>担当</th>
    </tr>
    <tr>
      <td><a href="haruka-profile.html">佐藤 遥</a></td>
      <td>フロントエンド</td>
    </tr>
    <tr>
      <td>高橋 蓮</td>
      <td>バックエンド</td>
    </tr>
    <tr>
      <td>山本 葵</td>
      <td>デザイン</td>
    </tr>
  </table>
</body>
</html>

ブラウザの表示例

このファイルは、先ほど作成したharuka-profile.htmlと同じフォルダに保存します。

style要素には、表の枠線と余白を表示するためのCSSを記述しています。CSSについては別に学習しますが、ここでは表の範囲をブラウザ上で確認しやすくするために使用しています。

以前のHTMLでは、table要素にborder属性を指定して枠線を表示する書き方も使われていました。現在は、表の見た目をCSSで設定する方法が基本です。

table要素で表全体を作る

table要素は、表全体を表します。

表の中に表示する行やセルは、すべてtable要素の内側に記述します。

table要素だけを記述しても、行やセルは作られません。tr要素、th要素、td要素と組み合わせて使用します。

HTMLの表は、次のような構造になっています。

• table要素が表全体を囲む
• tr要素が横方向の1行を作る
• th要素とtd要素が行の中にセルを作る

tr要素で表の行を作る

tr要素は、表の1行を表します。

今回の表には、見出しの行と3人分のデータ行があるため、合計4つのtr要素があります。

1つ目のtr要素には、名前と担当という見出しが入っています。2つ目以降のtr要素には、それぞれのメンバー情報が入っています。

tr要素は、基本的にtable要素の内側で使用します。

th要素で見出しセルを作る

th要素は、表の見出しとなるセルを作ります。

今回の例では、名前と担当が見出しセルです。ブラウザの標準設定では、th要素の文字が太字や中央揃えで表示されることがあります。

ただし、th要素は文字を太くするためだけのタグではありません。その列や行が何を表しているのかを示す意味があります。

表の内容を正しく伝えるために、見出しとなるセルにはth要素を使用しましょう。

td要素でデータセルを作る

td要素は、通常のデータを入れるセルを作ります。

今回の例では、メンバーの名前や担当分野がtd要素に入っています。

1つのtr要素に含まれるth要素やtd要素の数が、表の列数になります。今回の表は名前と担当の2項目で構成されているため、基本的に各行には2つのセルがあります。

セルの中にリンクを配置できる

HTMLでは、要素の中に別の要素を配置できます。

今回の一覧ページでは、佐藤 遥を表示するtd要素の中にa要素を入れています。そのため、表のセルに表示される名前がリンクになります。

構造を言葉で表すと、次のようになります。

1. table要素の中にtr要素がある
2. tr要素の中にtd要素がある
3. td要素の中にa要素がある
4. a要素の内容として佐藤 遥が表示される

このような要素の入れ子は、HTMLで頻繁に使われます。どの要素がどの要素の内側にあるのかを、インデントで確認すると分かりやすくなります。

インデントを使ってHTMLを読みやすくする

一覧ページでは、table要素の内側に複数のtr要素があり、その中にth要素やtd要素があります。さらに、一部のtd要素にはa要素が入っています。

このように要素の階層が深くなると、すべてを左端から書いた場合、開始タグと終了タグの対応が分かりにくくなります。

そこで、要素の内側に入るたびに、半角スペースで字下げします。この字下げをインデントと呼びます。

インデントには、次のような効果があります。

• 要素の親子関係を確認しやすくなる
• 開始タグと終了タグの対応を見つけやすくなる
• タグの閉じ忘れに気付きやすくなる
• 複数人でHTMLを編集しやすくなる
• 後から修正するときに目的の部分を探しやすくなる

ブラウザはインデントの有無に関係なくHTMLを表示しますが、人が読むコードとしては大きな違いがあります。

学習中から、階層に合わせてインデントを入れる習慣を付けましょう。

図3：表の入れ子構造とページ間リンク

この図から分かること

HTMLの表は、table要素だけで作られているわけではありません。

table要素の内側に行を表すtr要素を置き、その中に見出しセルのth要素や、データセルのtd要素を配置します。この親子関係を守ることで、ブラウザは表の構造を正しく理解できます。

また、td要素の中にa要素を配置すると、表のデータをリンクにできます。今回の例では、一覧表の名前をクリックすると、その人物のプロフィールページへ移動します。

2つのHTMLファイルをブラウザで確認する

2つのHTMLファイルを保存できたら、staff-list.htmlをブラウザで開きます。

一覧ページが表示されたら、次の点を確認しましょう。

• ページの見出しが表示されている
• 名前と担当分野が表になっている
• 佐藤 遥がリンクとして表示されている
• 日本語が文字化けしていない
• 表の枠線が表示されている

続いて、佐藤 遥のリンクをクリックします。

プロフィールページへ移動したら、次の点を確認します。

• プロフィールの見出しが表示されている
• 紹介文が指定した位置で改行されている
• 一覧へ戻るというリンクが表示されている

最後に、一覧へ戻るをクリックし、一覧ページへ戻れることを確認します。

リンクが動作しないときの確認事項

リンクをクリックしてもページが表示されない場合は、次の項目を確認します。

今回のように、リンク元とリンク先のHTMLファイルが同じフォルダにある場合は、href属性にファイル名だけを指定できます。

別のフォルダに保存されている場合は、フォルダの位置関係も含めてリンク先を指定する必要があります。

テキストエディタでの改行とbr要素の違い

HTMLを入力するとき、ソースコードを読みやすくするために、テキストエディタ上で改行や空白を入れます。

しかし、HTMLでは、ソースコード上の連続した空白や改行の多くが、ブラウザ上では1つの空白として扱われます。

そのため、テキストエディタで文章を次の行へ移動しただけでは、ブラウザ上で同じ位置に改行が表示されるとは限りません。

画面上で意味のある改行を入れたいときは、br要素を使います。文章を別の段落に分けたいときは、p要素を分けます。

ソースコードを整えるための改行と、ブラウザの画面に表示する改行は、別のものとして考えましょう。

ページタイトルと見出しは役割が異なる

今回作成したHTMLには、title要素とh1要素が登場します。

どちらにもページの内容を表す文字を記述しますが、役割と表示場所が異なります。

title要素に記述した内容は、通常、ページ本文には表示されません。一方、h1要素に記述した内容は、body要素内の見出しとして画面に表示されます。

どちらか一方だけで済ませるのではなく、それぞれの役割に合った内容を指定することが大切です。

基本タグの組み合わせがJSPの画面作成につながる

今回作成したものは、内容があらかじめHTMLファイルに記述されている静的なWebページです。

静的なWebページでは、HTMLファイルを書き換えない限り、基本的に同じ内容が表示されます。

一方、サーブレットとJSPを使うWebアプリケーションでは、利用者や処理結果に応じて表示内容を変えられます。

たとえば、今回のメンバー一覧をJSPで作成した場合、サーブレットから渡されたメンバー情報を使って、表の行を動的に生成できます。メンバーが追加されたときも、HTMLを1行ずつ直接書き換えるのではなく、データに応じて一覧を表示できます。

ただし、動的に作成されるページであっても、ブラウザへ返される結果はHTMLです。

そのため、JSPを学ぶときにも、次の基本タグはそのまま使用します。

• h1要素でページの見出しを作る
• p要素で説明文を表示する
• a要素で別の画面へ移動する
• table要素で一覧を表示する
• tr要素でデータごとの行を作る
• th要素で項目名を表示する
• td要素で処理結果を表示する

まずは固定された内容を持つHTMLファイルを作り、それぞれのタグの役割を理解することが大切です。その知識が、サーブレットから受け取ったデータをJSPで表示する学習へつながっていきます。

記事の構成を維持したまま、次の教材へつながる演習問題や確認問題を追加することも可能です。