4 タグの基本 (Ⅳ) 画像 基本 19 1 <img src=" ファイル名 "> 画像を入れる <img src=" ファイル名 " alt=" 文字列 "> 2 <img src=" ファイル名 " width=" 画像の幅 " height=" 画像の高さ "> 画像の大きさを指定する 3 <img src=" ファイル名 " border=" 枠の幅 "> 画像に枠を付ける 4 <img src=" ファイル名 " align=" 位置 "> 画像に文字列を回り込ませる <br clear="all"> 回り込みを中断させる 5 <img src=" ファイル名 " hspace=" 数値 " vspace=" 数値 "> 画像の周囲にマージンを設定する 作業終了後 [hp19.html] で保存 1 <img src=" ファイル名 "> 画像を表示する <img src=" ファイル名 "> のタグは 画像を Web ヘ ーシ に表示します < =" ファイル名 "> は 画像のファイル名です また <img src=" ファイル名 " alt=" 文字列 "> と alt=" 文字列 " を付け加えますと 画像が表示されない場合に alt で指定した文字列が 画像に代わって表示されます ファイル名の指定は ファイルがどこのフォルダに保存されているかによって異なります ファイル名の指定方法には 2 つあり 一つは 絶対パスと呼ばれる指定方法で 今ひとつは 相対パスと呼ばれる指定方法です 絶対パスによる指定方法とは ルートディレクトリから目的のファイルがあるディレクトリまで ディレクトリを階層順につなぎ 最後にファイル名を指定する方法です 例えば 最上層にルートディレクトリがあり 次の階層に chair というフォルダと rest というフォルダがあり
さらに rest のフォルダの中に(rest の次の階層に ) hana2 というフォルダがあって その中に目的の画像ファイル p1010045.jpg があるとしますと p1010045.jpg の画像ファイルは 次のように指定されます /rest/hana2/p1010045.jpg 指定のパスを終わりから追っていけば 多分 理解できるかと思います p1010045.jpg は hana2 のフォルダにありますから hana2/p1010045.jpg と指定され kana2 は rest のフォルダにありますから 上の指定の上につけて rest/hana2/p1010045.jpg と指定され さらに 最上層はルートディレクトリですから 最終の指定は /rest/hana2/p1010045.jpg ということになります ルートディレクトリー char rest hana2 p1010045.jpg 次に相対パスによる指定方法とは 現在のフォルダ ( カレントフォルダ=カレントディレクトリ ) から目的のファイルを指定する方法です 上の例でカレントディレクトリが rest だとしますと 先ず カレントファイルからのパスと 目的ファイルへのパスを 両者の共通ディレクトリを頂点として通します rest/abc.html 1 rest/hana/p1010045.jpg 2 次に 1パスのディレクトリ数を数え 一つなら. 二つなら.. とし それを2パスの共通ディレクトリに代入 これがパス指定となります./hana2/p1010045.jpg よって カレントディレクトリが hana2 の場合のパス指定は./p1010045.jpg となります また./ は 省略できますので この場合には単に p1010045.jpg という指定もできます
<title> 情報機器の操作 - 画像を表示する </title> <img src="p1010045.jpg"> この例は p1010045.jpg の画像が カレントディレクトリに保存されているばあいの 相対パスによる指定方法です 2 <img src=" ファイル名 " width=" 画像の幅 " height=" 画像の高さ "> 画像の大きさを指定する 画像を Web ページに入れる場合 画像が大きすぎる場合があります その場合 画像の大きさを調整して Web ページに挿入します <img src="p1010045.jpg" width=" 数値 " height=" 数値 "> のタグを使います < width=" 数値 "> は 画像の横幅を指定し < height=" 数値 "> は 画像の縦幅を指定します < width=" 数値 "> < height=" 数値 "> の 数値 は ピクセル数 または % です ピクセル数は 画像の大きさを絶対的に指定しますが % は ブラウザのウィンド幅に対する比率になります したがって ピクセル数による大きさの指定で元の画像の縦横比を保持して縮小 拡大表示したい場合には 元の画像の縦横比にあわせて ピクセル数を指定しなければなりません <title> 情報機器の操作 - 画像の大きさを指定する </title> <img src="p1010045.jpg" width="100" height="50"> 3 <img src=" ファイル名 " border=" 枠の幅 ">
画像に枠をつける 画像に枠をつけたいときは <img src="p1010045.jpg" border=" 数値 "> のタグを使います < border=" 数値 "> の 数値 は ピクセル数 です <title> 情報機器の操作 - 画像に枠をつける </title> <img src="p1010045.jpg" border="4"> 画像にリンクを設定した場合画像にリンクを設定しますと 画像の枠がリンクの色で表示されますが この枠が邪魔で消去したい場合には この border を 0 で指定しますと 画像の枠線を消すことができます 4 <img src=" ファイル名 " align=" 位置 "> 画像に文字列を回り込ませる 文字列の Web ページに画像を挿入しますと 画像の横に文字列が 1 行のみ表示され 2 行目以降は 画像の下に表示されてしまいます そこで 画像の横に 2 行目以降も表示したい場合には <img src="p1010045.jpg" align=" 位置 "> のタグで 文字列の回り込みを指定します < align=" 位置 "> の " 位置 " は left と right が指定できます left は 画像を左端に指定しますから 文字列は画像の右側に回り込みます right は 画像を右端に指定しますから 文字列は画像の左側に回り込みます left も right もともに 文字列が画像の横で一杯になりますと 文字列は画像の下に表示されます align=" 位置 " の " 位置 " に top middle absmiddle bottom を指定画像の横に文字列を回り込ませると
文字列の縦位置は画像の下端に揃えられます しかし align=" 位置 " の " 位置 " に top middle absmiddle bottom を指定しますと 文字列の縦位置を指定できます top は 画像の上端に middle は 画像の中央 ( 文字列のベースラインが画像の中央 ) に absmiddle は 文字通り画像の中央に bottom は 画像の下端に指定されます <title> 情報機器の操作 - 画像に文字列を回り込ませる </title> <img src="p1010045.jpg" align="left"> 情報機器の操作 <br> 文学部 <br> 教育学部 <br> 人間文化学部 なお 文字列の回り込みを文字列の途中で中断させたい場合には 中断させたい文字列の位置に <br clear="all"> を指定します そうすることによって 文字列の回り込みは中断し 指定された文字列以降は 画像の下に表示されます 5 <img src=" ファイル名 " hspace=" 数値 " vspace=" 数値 "> 画像の周囲にマージンを設定する 文字列の Web ページに画像を挿入し 文字列の回り込みを指定しますと 画像の横に文字列が回り込んで表示されましたが 画像と文字列との間には スペースがありません そこで 画像と文字列の間にスペースが欲しい場合には <img src="p1010045.jpg" align="left または right" hspace=" 数値 " vspace=" 数値 "> のタグで 画像の周囲にスペースを設定します < hspace=" 数値 "> は 画像の左右にスペースを空け
< vspace=" 数値 "> は 画像の上下にスペースを空けます < hspace=" 数値 "> vspace=" 数値 " の " 数値 " は ともにピクセル数での指定です <title> 情報機器の操作 - 画像に文字列を回り込ませる </title> <img src="p1010045.jpg" align="left" hspace="30" vspace="10">
5 タグの基本 (Ⅴ) BODY 基本 20 1 <body bgcolor=" 色 "> 本文 body 全体に背景色を指定します 2 <body background=" ファイル名 "> 本文 body の背景に画像を入れます 3 <body leftmargin=" 数値 "> body の左にマージンを設定する 4 <center> 文字列 画像 表 </center> 文字列を中央にそろえる 作業終了後 [hp20.html] で保存 1 <body bgcolor=" 色 "> 本文 ページの背景に色を指定する ページの背景の色を指定するには <body bgcolor=" 色 "> 本文 のタグを使用します 色の指定は " 色の名前 " または " カラーコード " によります 色を指定しない場合は 使用しているブラウザで設定されている色が表示されます <title> 情報機器の操作 - 背景色を指定する </title> <body bgcolor="yellow"> 情報機器の操作 2 <body background=" ファイル名 "> 本文 ページの背景に画像を指定する 画像の指定するには 絶対パスによる方法と相対パスによる方法があります ともに 基本 19-1 を参照してください <title> 情報機器の操作 - 背景に画像を設定する </title>
<body background="p1010045.jpg"> 情報機器の操作 3 <body leftmargin=" 数値 "> ページの左にマージンを設定する <body leftmargin=" 数値 "> の数値は ピクスル数 です 上余白は <body topmargin=" 数値 "> で指定できます 下余白は <body bottommargin=" 数値 "> で指定できます 右余白は <body rightmargin=" 数値 "> で指定できます <title> 情報機器の操作 - マージンを設定する </title> <body leftmargin="30"> 情報機器の操作 4 <center> 文字列 画像 表 </center> <center></center> は 文字列や画像や表を Web ページの中央にそろえます <title> 情報機器の操作 - 段落を中央にそろえる </title> <center> 情報機器の操作 <br> 文字列 画像 表を中央にそろえる </center>