札幌学院大学社会情報学部 ＡＯ入試課題用テキスト
ＨＴＭＬの基礎知識 （２）
１ 画像の表示
ＨＰに画像を表示させてみる。まず『ＨＴＭＬ文書と同じフォルダ内』にＪＰＥＧファイル（拡張子「.jpg」）を１個準備する。（画像の作り方、サイズの調べ方はこのプリントの最後を参照。）
この画像を読みこんで表示するためのタグは以下の通りである。画像ファイル名と、幅(width)と高さ(height)を指定している。（幅と高さを指定しなくても表示は可能である）
<html>
<head>
<title>画像の貼り付け</title>
</head>
<body>
<h3> JPEG画像を貼り付ける </h3>
<p>この画像は科目担当である。</p>
<p> <img src="kao1.jpg"
width="155" height="192"> </p>
</body>
</html>
ここで使われているのは<img>タグで、指定されている内容は次の通りである。
表示結果は以下の通りである。（画像が表示されない場合には、このプリント最後の説明を参照）
|
参考： 画像が表示されない場合に確認すること <img>タグを用いたときに画像が表示されなかった場合、確認すべきことがいくつかある。 ① 画像のファイルがｈｔｍｌ文書と同じフォルダ内にあるかどうか 画像を作っても、その保存場所がｈｔｍｌ文書と異なるフォルダである場合には画像は表示されません。これは「指定された場所に画像が存在しない」ことを意味します。 ② 拡張子が異なる 単純な例は、ｈｔｍｌ文書では拡張子を「.jpg」としているのに、画像ファイルの拡張子が「.bmp」になっている場合です。それ以外では、拡張子の大文字と小文字が区別される場合です。ｈｔｍｌ文書中では「.jpg」となっていて、ファイル自体の拡張子が「.JPG」となっている場合があります。この場合は、ｈｔｍｌ文書の拡張子を大文字に変えてみます。 |
********************************************************************
２ 文書要素の参照
２－１ 項目を選んで説明文を表示する
リストで列挙した項目をクリックすると、その詳細を見ることが出来るようにしてみよう。前回使用したリスト要素と『アンカー要素』を組み合わせて使う。まず、ＨＴＭＬ文書の中で、対になっているタグを確認しておこう。すでに述べたように、タグの対応付けが正しければ、タグを置く位置は任意である。（説明のため、下図では意図的にタグの位置を複数通りに変えている）
<html>
<head>
<title>文書要素を参照する</title>
</head>
<body>
<h3>担当科目一覧</h3>
<ul>
<li>
<a href="#header1">
情報デザイン基礎論（２年次選択）
</a>
</li>
<li>
<a href="#header2">応用コンピュータグラフィックス論（３年次選）</a>
</li>
<li><a href="#header3">専門ゼミナールⅠ・Ⅱ・Ⅲ（３年次必修）</a></li>
<li><a href="#header4">専門ゼミナールⅣ（４年次必修）</a></li>
<li><a href="#header5">卒業論文（４年次選択）</a></li>
</ul>
<h3 id="header1">情報デザイン基礎論内容</h3>
<p>情報の受け手を意識し情報発信を行なうためのWebページの作り方を習得します</p>
<h3 id="header2">応用コンピュータグラフィックス論</h3>
<p>アプリケーションソフトを使った３ＤＣＧ(３次元コンピュータグラフィックス)制作の講義と<br />実習を行ないます。</p>
<h3 id="header3">専門ゼミナールⅠ・Ⅱ・Ⅲ</h3>
<p>ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ<br />制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>
<h3 id="header4">専門ゼミナールⅣ</h3>
<p>３年次の専門ゼミナールで取り組んだ自由課題の自己評価と改善、プレゼンテーション<br />を行ないます。</p>
<h3 id="header5">卒業論文</h3>
<p>学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程<br />を経験します。</p>
</body>
</html>
『header1』、『header2』、『header3』はそれぞれ、「見出しを識別する」ための記号であると考えるとよい。
この記号は『ＩＤ名』と呼ばれる。要素にＩＤ名を付ける場合には、
<要素名 id=”ID名”>テキストまたは要素</要素名>
とする。
どの要素から参照するかを表すために、『アンカー』と呼ばれるタグを使う。アンカーは次のように指定する。
<a href=”参照先のＩＤ名”>テキストまたは要素</a>
上記の例では、アンカーとＩＤ名が下図のように対応付けられている．
ブラウザ表示は以下のようになる。見出しの位置が移動することを確認しやすくするために、ブラウザの画面を小さくしておこう。以下の図では「卒業論文（４年次選択）」の説明がウィンドウの外にあり、表示されていない。
クリックして選択した結果は次のようになる。ウィンドウがスクロールされて、説明が表示されていることがわかる。
****************************************
２－２ ページの最後からページのトップ（見出し）に戻る
考え方は前述の例と同じである。ここでは、「担当科目一覧」という見出し要素の位置までもどることにする。アンカー要素には「TOP」と文字を入れる。
HTML文書は次のようにすればよい。変更部分は下線で示してある。（関連部分のみ表示、それ以外は省略している。）
<html>
<head>
<title>文書要素を参照する</title>
</head>
<body>
<h3
id="header6">担当科目一覧</h3>
<ul>
<li>
<a href="#header1">
情報デザイン基礎論（２年次選択）
</a>
</li>
<li>
<a href="#header2">応用コンピュータグラフィックス論（３年次選択）</a>
</li>
（途中省略）
<h3 id="header5">卒業論文</h3>
<p>学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程<br />を経験します。</p>
<a
href="#header6">TOP</a>
</body>
</html>
****************************************
２－３ ページの最後からページのトップ（画像）に戻る
この場合は参照先を、見出しではなく画像に変更すればよい。
<html>
<head>
<title>文書要素を参照する</title>
</head>
<body>
<p><img
id="header6" src="kao.jpg" width="155"
height="192"> </p>
<h3>担当科目一覧</h3>
<ul>
<li>
<a href="#header1">
情報デザイン基礎論（２年次選択）
</a>
</li>
（ 途中省略 ）
<h3 id="header5">卒業論文</h3>
<p>学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程<br />を経験します。</p>
<a
href="#header6">TOP</a>
</body>
</html>
****************************************
練習問題２： 項目を選んで画像を表示する
リストで列挙した項目をクリックすると、その画像を見ることが出来るようにしてみよう。画像がウィンドウの外にあれば、ウィンドウをスクロールして画像を表示できるようにする。
注）参照方法は前述（２－３）を参考にする。
****************************************
参考１） Windoｗｓアクセサリの「ペイント」を用いて画面コピーを編集する方法
Windowsメニューから「アクセサリ」→「ペイント」を選択する。
PrintScreenキーを押して画面コピーを取る。このキーを押した時点では、画面上の画像の情報がコンピュータ内に記録されるだけなので、画面に変化は現れない。（このキーはキーボード配列の右上にある。機種によってキーの印字が「PrintScreen」、「PrtSc」など異なっているので注意）
ペイントソフトのメニューで「編集」→「貼り付け」を選択する。この結果、下図のように、そのときの画面コピーが貼り付けられる。（このとき、『キャンバスより大きな絵を貼り付けようとしています。キャンバスを大きくしますか』というメッセージが表示されたら『はい』を選択する。）
次に、貼り付けた画像の一部だけを切り取りとり、画像として保存する。ペイントソフトの「選択」メニューを選んで、切り取りたい部分選択する。（選択された部分は点線で表示される。）
「編集」→「切り取り」を選択する。この結果、切り取られた部分が白くなる。
切り取った部分だけを画像として残して保存したいので、不要な部分を削除する。ここで、「編集」→「全て選択」を選択し、削除キー（キーボード右上にある。機種によって印字はDelete、Delなど異なる）キーを押すと、ペイントソフトの画面が真っ白な状態になる。
ここで「編集」→「貼付け」を選択すると、切り取って保存されていたアイコンが貼り付けられて表示される。
ペイントソフトの画面で、「白く表示されている部分も画像の一部」であるので、必要な部分だけを残す。スクロールバーを右下隅に寄せ、角に表示される■をクリック＆ドラッグして画面の内側に移動させる。（クリック＆ドラッグ前に「選択」以外のメニューをクリックしておく。）
白い部分がなくなるまで■を移動させる。これで、画像の不要な部分はなくなった。
次に、「変形」→「キャンバスの色とサイズ」を選択する。ここで、画像の幅と高さを確認することができる。ピクセルとは画面上の画素のことである。
最後にこの画像を保存する。「ファイル」→「名前をつけて保存」を選択する。ファイル名を「アイコン」として保存する。ファイルの種類はビットマップ（拡張子はbmp）とする。
次に同じ画像をJPEG（ジェイペグと読む）で保存してみよう。
それぞれ、異なるアイコンで表示される。
JPEG画像を右クリックし、「プロパティ」を選択すると、次のように表示される。ここで「サイズ」で記された数値がファイルサイズである。この例では１．６６KBである。
同様にして、BMP画像のサイズを調べてみる。この例では、14.6KBである。同じ画像でも、JPEGの方が少ない容量で保存されていることがわかる。（JPEGでは画像が圧縮されている。）
****************************************