HTMLタグで作るマイページ

　この資料は2005年頃に作ったものを書き直したものです。当時は「ローラ・リメイ: HTML入門(プレンティスホール)」でタグの使い方を覚えました。

更新

HTMLタグで作るマイページ

小山智史

1. はじめに
2. ホームページの作成
3. ホームページの公開
4. 画像と音声の加工
付録A. HTML記法と代表的なHTMLタグ

1. はじめに

　ホームページのデザインはHTMLタグを用いて記述されています。HTMLはHyper Text Markup Languageの略で、Webのページ記述言語のことです。

　通常私たちが見ているホームページは、この言語で誰かが書いたもので、その内容はHTMLファイル(例えばindex.html)に入っています。HTMLファイルは通常Webサーバに置かれています(下図)。パソコンのブラウザ画面でリンクの箇所をクリックするなどすると、パソコンからインターネットを経由して、サーバに該当するファイルの内容を送るよう要求信号が送られます(図中(1))。これを受けて、サーバはその内容をパソコンに送ります(図中(2))。パソコンのブラウザは、これを受け取り、タグを解釈し、表示画面を作り出します(図中(3))。

図1 ホームページの仕組み

　通常は、「誰かが作ったページ」を見ているわけですが、自分でホームページを作って公開したい場合は、パソコンでHTMLファイルを作り、どこかのWebサーバに置く(転送する)ことになります。インターネットプロバイダと契約していると、無料でWebサーバが利用できる場合もありますし、最近はレンタルサーバの利用料金も安価になりました。

　ここで示したようなHTMLタグを使ってホームページを作成する機会はあまり無いかもしれませんが、日頃見ているホームページがこのように表わされているということを理解することは、さまざまな場面で役に立つと思います。

　なお、タグの表記法は、ここでは一部簡略化したものを用いており、厳密なものではありません。HTMLの厳密な仕様はW3Cという組織によって決められています。

　入出力や計算を伴うページに興味のある方は、本資料に引き続き「JavaScriptプログラミング」をご覧ください。

2. ホームページの作成

2.1 タイトル

　デスクトップに mypage というフォルダを作成してください。

　Windowsではデフォルトで拡張子が表示されないようになっています。フォルダの、[表示][オプション]の「表示タブ」で詳細設定の中の[登録されている拡張子は表示しない]のチェックをはずしてください。

　次に、mypageフォルダの中に、メモ帳などのテキストエディタで、以下の index.html というファイルを作成してください。

<!DOCTYPE html> <title>私のホームページ</title>

　メモ帳で作成する場合は、[ファイル][名前を付けて保存]操作の後、ファイルの種類を「すべてのファイル」、「文字コード」を「UTF-8」にして保存します。

　テキストエディタ Mery で作成する場合は、[ファイル][名前を付けて保存]操作の後、ファイルの種類を「すべてのファイル」、エンコードを「UTF-8(BOM付き)」にして保存します。他の用途に差し支えなければ、[ツール][オプション]の[基本タブ]で、「既定のエンコード」を「UTF-8(BOM付き)」、「行番号を表示」をチェック、「タブの桁数」を「2」にし、[記号タブ]で、「改行表示」と「全角空白表示」をチェックしておくとよいかもしれません。

　1行目の「<!DOCTYPE ...>」は「この文書はHTML5の書き方で綴られている」という意味で、これから作るホームページはタブレットやスマートホンでもうまく見ることができます。

　index.html のアイコンをダブルクリックすると、ブラウザが起動し、このホームページが表示されます。メモ帳とブラウザのウィンドウの表示位置や大きさを調整して、両方のウィンドウが見やすいように配置してください。

図2 ブラウザの表示画面(タイトル表示)

　ブラウザ画面をよく見ると、タイトルバーに「私のホームページ」と表示されているのがわかります。これが、今のところこのホームページのすべてです。このように、<title>...</title> の部分はタイトルバーに表示されます。

　<title>や</title>はブラウザに指示を与えるための、予め決められた命令語で、これがHTMLタグです。

　ところで、ホームページは更新を繰り返すところに特徴があります。完成することがないといってもいいかもしれません。本資料でも、これからちょっとずつ更新を繰返していきますが、その際、

HTMLファイルを
修正し上書き保存

→

ブラウザで
再読み込み

を繰り返します。ブラウザの再読み込みは F5キーでも行えます。

　さて、上記のタイトル文字ですが、単にタイトルバーの表示に使われるだけではありません。このページを見た人が気に入ってブックマーク(またはお気に入り)に登録する時には、ラベルとして使われます。ですから、実は「私のホームページ」というのは適切な表現ではないのです。

(練習) 「私」の部分を自分の名前(またはニックネーム)に変えて、ブラウザの表示を確認しなさい。

(練習) このページをブックマーク(またはお気に入り)に登録し、一覧中のラベルがどうなっているか確認しなさい。また、このように登録しておけば、次回からこのページを簡単に呼び出すことができます。

2.2 見出し

　以下のように見出しを追加してください。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>

　上書き保存し、ブラウザで再読み込みすると、見出し文字の表示を確認できます。

図3 見出しの表示

　このように、<h2>...</h2>の部分は、「見出し」として大きな文字で表示されます。見出し文字の大きさは <h1>...</h1> が最も大きく、 <h6>...</h6> が最も小さくなります。

(練習) 見出し文字の「私」を自分の名前に変えて、ブラウザの表示を確認しなさい。同様に、見出しの大きさを「h1」～「h6」に順次変更し、表示を確認しなさい。

2.3 改行と段落

　以下のように追加してください。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>
<p>ようこそ私のページへ。</p>
<p>ホームページを作っています。
思ったよりも簡単です。</p>

　上書き保存し、ブラウザで再読み込みすると、以下のようになります。

私のホームページ

ようこそ私のページへ。

ホームページを作っています。思ったよりも簡単です。

図4 段落

　<p>...</p> は段落(パラグラフ)を表します。途中で改行しても、ブラウザ画面では改行されていないのがわかります。

　段落区切り以外の場面で改行させたいことがありますが、その時は <br> を使います。以下のように、<br> を挿入して確認してください。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>
<p>ようこそ<br>私のページへ。</p>
<p>ホームページを作っています。
思ったよりも簡単です。</p>

　以下のようになります。

私のホームページ

ようこそ
私のページへ。

ホームページを作っています。思ったよりも簡単です。

図5 改行

2.4 箇条書き

　次のように箇条書きを作ってみましょう。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>
<p>ようこそ私のページへ</p>
<ul>
  <li>ももたろう
  <li>弘前さくらまつり
</ul>

　表示は以下のようになります。

私のホームページ

ようこそ私のページへ。

ももたろう
弘前さくらまつり

図6 箇条書き

　このように<ul>...</ul>の部分は「番号無しの箇条書き」となり、各項目は<li>で記述します。

　<ul>...</ul>の代わりに<ol>...</ol>とすると「番号付きの箇条書き」となります。

私のホームページ

ようこそ私のページへ。

ももたろう
弘前さくらまつり

図7 番号付き箇条書き

　各項目の中を更に箇条書きにすることもできます。

2.5 ページのリンク

　ホームページの最大の特徴は、ページとページのリンクにあります。互いにリンクされたテキストはハイパーテキストと呼ばれます(HTMLのHT)。

　まず、「ももたろう」のページにリンクを作ってみます。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>
<p>ようこそ私のページへ</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li>弘前さくらまつり
</ul>

　以下のように「ももたろう」の箇所にリンクが作られます。 <a href=ファイル名> ... </a>の箇所は「...」をクリックするとファイル名のリンク先が表示されます。

私のホームページ

ようこそ私のページへ。

ももたろう
弘前さくらまつり

図8 別ファイルへのリンク

　早速クリックしてみましょう。でもまだ momo.html はないので、画面には「ファイルがありません」というようなメッセージが表示されます。

　それでは「ももたろう」のページ momo.html を index.html と同じフォルダ内に作りましょう。中身はとりあえずタイトルと見出しだけです。

<!DOCTYPE html> <title>ももたろう</title> <h2>ももたろう</h2>

　これで、先ほどのページで「ももたろう」をクリックすると「ももたろう」のページが表示されます。このように、「自分で用意したもうひとつのページ」へのリンクを作ることができます。

　今度は、外部のサイトである「弘前さくらまつり」のページにリンクしてみましょう。まずは、ホームページを検索し、該当するページを表示します。そして、ブラウザ画面の上部に表示されているアドレス(URL)をコピーします。そして、以下のようにそのアドレスを貼りつけます。

<!DOCTYPE html>
<title>私のホームページ</title>
<h2>私のホームページ</h2>
<p>ようこそ私のページへ</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　以下のようになります。

私のホームページ

ようこそ私のページへ。

図9 別サイトへのリンク

　この例(.../sakura/)のように、アドレスの末尾が「/」で終了する場合は「index.html」や「index.htm」というファイル名が仮定されます。

(練習) 箇条書きの項目を増やし、友達のページや、興味を持った国内および海外のページにリンクを作りなさい。

2.6 レイアウト

　これまでは、見出しも文章も左寄せで表示されていました。

　見出しを中央揃えにするには、次のようにします。

<!DOCTYPE html>
<title>私のホームページ</title>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　<center>...</center> の部分は画面の中央に表示されます。

私のホームページ

ようこそ私のページへ。

図10 中央揃え

　次に、更新日を右寄せで表示してみましょう。

<!DOCTYPE html>
<title>私のホームページ</title>
<div align=right>2022年4月1日 更新</div>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ。</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　<div align=right>...</div> の部分は右寄せで表示されます。

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図11 右揃え

　ワープロでは、スペースを詰めて位置調整をしたり、複雑なレイアウトにすることもありますが、ホームページの場合は、うまくいきません。見る人のブラウザの画面サイズも縦横比もさまざまですから、作ったとおりのレイアウトで見てもらえるわけではないからです。ホームページのレイアウトは、左寄せ、中央揃え、右寄せ程度に留めるのが無難です。

2.7 画像の表示

　ホームページで用いる画像は、JPEGファイル(○○.jpg)やPNGファイル(○○.png)を用意します。4章を参考にしてください。

　ページ中に画像を表示する場合は以下のようにします。ここで使用する画像ファイル momo0.png はこちらにあるので、HTMLファイルと同じ mypageフォルダに入れてください。他の画像ファイルを用いても構いません。

<!DOCTYPE html>
<title>私のホームページ</title>
<div align=right>2022年4月1日 更新</div>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ。</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <center><img src=momo0.png></center>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　以下のように <img src=...> で画像が表示されます。

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図12 画像表示

　画像の表示サイズを調整するには <img src=momo0.png width=120> のようにピクセル数で指定したり(下図)、 <img src=momo0.png width=30%> のようにブラウザの表示幅に対する「%」で指定することもできます。

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図13 画像表示(サイズ指定)

　背景画像を表示するには次のようにします。文字とのコントラストが確保できるように、背景画像(momo0bg.png)を作成しておきます。

<!DOCTYPE html>
<title>私のホームページ</title>
<body background=momo0bg.png>
<div align=right>2022年4月1日 更新</div>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ。</p>
<ul>
  <a href=momo.html>ももたろう</a>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図14 背景画像

(練習) 4章を参考に、ペイント・ドローのソフトで描いたPNG画像ファイルを用意し、ホームページに表示しなさい。画像サイズに注意のこと。

(練習) 4章を参考に、自分で撮影したJPEG画像ファイルを用意し、ホームページに表示しなさい。画像サイズに注意のこと。

2.8 iフレーム

　iフレーム(インラインフレーム)を使うと、ホームページの一角に別のページ(HTMLファイル)を表示したり、紙芝居のように、その内容を差し替えることができます。

　2.5で momo.html を作ったので、「ももたろう」の箇所をクリックすると、ももたろうのページが表示されるはずです。確認してください。まだ、タイトルと見出ししかありませんので、次のように追加してください。

<!DOCTYPE html>
<title>ももたろう</title>
<h2>ももたろう</h2>
<a href=chap1.html target=CONTENT>第1章</a>
<a href=chap2.html target=CONTENT>第2章</a><br>
<iframe name=CONTENT src=chap0.html width=500px height=480px></iframe>

　追加したのは、「第1章」と「第2章」のリンクと「フレーム」です。フレームは、「<iframe name=CONTENT ...>」のように"CONTENT"という名前をつけておきます。また、フレームのサイズは幅500ピクセル、高さ480ピクセルに指定し、そこに初期表示するHTMLファイルとして、 chap0.html を作成してください。

<!DOCTYPE> <h1>はじまりはじまりー</h1> <center><img src=momo0.png></center>

「第1章」と「第2章」のリンクには「target=CONTENT」のように、表示先となるフレームを指定します。

　以下のような表示となります。

2022年4月1日更新

ももたろう

第1章第2章

図15 iフレーム

　フレームの中に表示する chap1.html, chap2.html をそれぞれ以下のように用意し、また中で利用する画像ファイルも用意しておきます。

<!DOCTYPE> <h1>第1章</h1> <center><img src=momo1.png></center> <p>むかしむかしあるところにお爺さんとお婆さんが住んでいました。</p>

<!DOCTYPE> <h1>第2章</h1> <center><img src=momo2.png></center> <p>川からおおきな桃が流れてきました。</p>

「第1章」をクリックするとフレームに第1章(chap1.html)が、「第2章」をクリックするとフレームに第2章(chap1.html)が表示されます。

(練習) 「ももたろう」の第3章,第4章,...を追加しなさい。

2.9 画像と音声

(画像や音声や動画へのリンク)

　画像や音声や動画へのリンクは2.5の別ページ(momo.html)へのリンクの時と同様に、リンク先にファイル名を指定するだけです。ただし、画像ファイル momo0.png、音声ファイル hello.mp3、動画ファイル drum.mp4 はそれぞれ同じフォルダに用意されているものとします。

<!DOCTYPE html>
<title>私のホームページ</title>
<div align=right>2022年4月1日 更新</div>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ。</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li><a href=momo0.png>画像</a>
    <center><img src=momo0.png width=120></center>
  <li><a href=hello.mp3>音声</a>
  <li><a href=drum.mp4>動画</a>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　以下のようになります。

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図16 画像や音声へのリンク

(ページ中への表示)

　画像については、2.7でページ中に表示しました。

　音声と動画については、以下のようにするとページ中に操作パネルが現れ、操作により再生することができます。

<!DOCTYPE html>
<title>私のホームページ</title>
<div align=right>2022年4月1日 更新</div>
<center><h2>私のホームページ</h2></center>
<p>ようこそ私のページへ。</p>
<ul>
  <li><a href=momo.html>ももたろう</a>
  <li><a href=momo0.png width=120>画像</a>
    <center><img src=momo0.png width=120></center>
  <li><a href=hello.mp3>音声</a>
    <audio controls src=hello.mp3></audio>
  <li><a href=drum.mp4>動画</a>
    <video controls src=session2d.mp4></video>
  <li><a href=https://www.hirosakipark.jp/sakura/>弘前さくらまつり</a>
</ul>

　以下のようになります。

2022年4月1日更新

私のホームページ

ようこそ私のページへ。

図17 音声の操作パネルや動画の表示

3. ホームページの公開

　作成したホームページを公開するには、ファイルをどこかのWebサーバに置く必要があります。レンタルサーバを利用したり、あるいはインターネットプロバイダと契約していると無料でWebサーバを利用できる場合もあります。

　利用するWebサーバが決まったら、ファイルの転送先とサイトのアドレスを確認します。ファイル転送には、例えばWinSCPなどのファイル転送ソフトを使います。

　Webサーバに置かれたページは不特定の人が閲覧することになります。したがって、

個人情報が不用意に掲載されていないか
著作物の引用に不都合がないか
知らずに誰かを中傷していたりしないか

などに十分な注意が必要です。

　また、記載した情報がどの程度新鮮かを示すために、必ず更新日を掲載するようにします。「学校の運動会のページを見たけど、どうも去年の運動会のようだ」などということは、よくあることです。更新日さえ記載されていれば、見た人が判断できるわけです。

　さて、著作物としてホームページを公開するわけですから、「誰が責任を持って作ったのか」を明示することが重要です。その意味では、作者の名前や連絡先(例えばメールアドレス)を記載することが望ましいのですが、最近はこのような情報も意図せぬ使われ方をされてしまうことがあり、困った問題です。

4. 画像と音声の加工

4.1 画像の加工

　デジタルカメラやスマホで撮影した写真画像をホームページで用いる場合の加工を取り上げます。

　サンプルとして、デジタルカメラで撮影した photo4000.jpg という画像(4000×3000ピクセル)を使います。画像をこのまま使い、「width=120」のように表示サイズを指定する方法では、非常に重いページになってしまいます。

　加工には、XnView および XnViewMP というソフトを使います。PhotoShopやgimpなど他のソフトを使っても同じような加工が行えます。

(トリミング)

　写真は周辺に不要なものが写っていることが多いものです。サンプル画像ではキーボードなどを除いてカップとリンゴだけを切り出します。

　XnViewの場合、[画像][キャンバスリサイズ]で下図の表示が現れるので、ここで、「固定縦横率」をチェックし、「画像位置」を選び(この場合は中央)、「幅」を指定します(この場合は3000)。縦横比(4:3)を維持しながら切り出されます。実際には「画像位置」や「幅」を変えながら何回か試行錯誤を繰り返します。

図18 トリミングの画面

　結果、この例では画像のサイズは3000×2250となりました。

	→
4000×3000		3000×2250
図19 トリミングの前(左)と後(右)

(拡大・縮小)

　上記のトリミングで画像サイズは少し小さくなりましたが、ホームページで利用するにはまだ大きすぎるので、縮小します。

　XnViewの場合、[画像][リサイズ]で下図の表示が現れるので、ここで、「固定縦横率」をチェックし、「幅」を指定します(この場合は320)。縦横比(4:3)を維持しながら縮小されます。より高解像度が必要な場合は、「幅」を640や1024にしてもいいかもしれません。一方、アイコン画像やサムネイル画像などでは24～64程度で良い場合もあります。

図20 リサイズの画面

　結果、以下のような画像となりました。

図21 リサイズ後の画像(320×240)

　ファイルサイズは、元画像(4000×3000)が 3.13MB、上の画像(320×240)が 13.2KB で、200分の1以下になっていて、これが軽快な画面表示につながります。

(明るさの調整)

　明るさやコントラストの調整は、XnViewMPの場合、[画像][調節][トーンカーブ]で行います。トーンカーブは横軸が加工前の入力レベル、縦軸が加工後の出力レベルで、加工無しの場合はカーブは直線になっていて、カーブの形はマウス操作で決めることができます。

　画像を明るくしたい場合は、下図左のようにします。画像を暗くしたい場合は、下図右のようにします。加工後の画像がプレビュー表示され、確認できます。

(a) 明るく補正	(b) 暗く補正
図22 明るさの調整

(コントラストの調整)

　コントラストを強くしたい場合は、下図左のようにします。コントラストを弱くしたい場合は、下図右のようにします。

(a) コントラスト強	(b) コントラスト弱
図23 コントラストの調整

(背景画像)

　2.7のような背景画像を作りたい場合は、下図左のようにします。これは黒文字の場合で、白文字の場合は下図右のようにします。

(a) 黒文字の場合	(b) 白文字の場合
図24 背景画像

4.2 音声の加工

　ここでは、Audacity というソフトを使います。録音したり、不要部分をカットしたりできます。

　マイクで録音する場合は、「1(モノラル)録音チャンネル」にします。上手に録音するコツは、波形がクリップしない程度になるべく録音レベルを上げることです。

図25 音声の加工

　録音した波形を見ると、ほとんどの場合、録音開始と終了の箇所に、雑音や無音区間が生じます。この不要な部分は、マウスのドラッグ操作で範囲指定し、[編集][切り取り](またはCtrl+X)で削除します。次に、[エフェクト][ノーマライズ]の操作で、適切な音量に調整します。録音レベルが極端に小さい場合は、それを大きくしてもノイズが目立ってしまうので、録音しなおします。

　このまま保存すると「CD並みの品質」となり、ファイルサイズが大きくなってしまうので、画面左下の「プロジェクトのサンプリング周波数(Hz)」の箇所を[16000]程度に変更した後、[ファイル] [書き出し][MP3として書き出し]を選び、保存します。

付録A HTML記法と代表的なHTMLタグ

HTML文書の構造
	このテキストでは、HTMLタグの一部を省略した簡略な書き方を用い、「<title>...</title>」と「HTML文書の本体」のみとしている。
文字サイズと行揃え
	～を見出し文字(大文字)で表示(h1が最大)
	中央揃え
	右揃え
	～を相対的に大きい(小さい)文字サイズで表示
箇条書き
	～～のように箇条書き
	～～のように番号付きの箇条書き
	△△ ～ ○○ ～のように用語説明などに用いる見出し付きの箇条書き
改行や段落など
	改行
	段落
	横線
<xmp> ～ </xmp>	～を改行も含めてそのまま表示(xmpタグでは「<」や「>」などの記号もそのまま表示)
リンク
	～のクリックで○○(url)のページを表示
	～のクリックで同じ場所にあるHTMLファイルを表示
画像や音声のリンクと埋め込み
	～のクリック(リンク)で画像を表示
	～のクリック(リンク)で音声を再生(音楽ファイルも同様)
	～のクリック(リンク)で動画を表示
	画像の埋め込み(視覚障害者は～をスクリーンリーダーで読み上げ)
	音声の埋め込み(操作パネルで再生)
	動画の埋め込み(操作パネルで再生)
文字修飾
	color(色)やsize(文字サイズ1～7)を指定可
	～を太文字で表示
	～を強調表示
	～を斜字体で表示
	～に下線
表組み
	<caption>...</caption>の箇所はキャプション、<th>～</th>の箇所は見出し、<td>～</td>の箇所はセルデータ
iフレーム
	フレームにHTMLファイル1が初期表示される。<a href=HTMLファイル2 target=フレーム名>...</a>のリンクをクリックするとフレームの内容はHTMLファイル2に入れ替わる。
フォーム入力
	1行のTEXT入力欄で、値はidで参照する。
	ボタン名のボタンを表示し、押すとonclickで指定したイベントハンドラを実行
	複数行のTEXT入力欄で、rows(行数)やcols(幅)を指定可。値はidで参照する。
JavaScript
<script> JavaScriptプログラム </script>	HTMLファイルにJavaScriptプログラムを埋めこむ
<script src=～></script>	～の外部ファイル(拡張子はjs)を実行

koyama88@cameo.plala.or.jp