Taro-ホームページB5.jtd

Size: px

Start display at page:

Download "Taro-ホームページB5.jtd"

けいしょうえんの
5 years ago
Views:

1 4 タグの基本 (Ⅳ) 画像基本 19 1 <img src=" ファイル名 "> 画像を入れる <img src=" ファイル名 " alt=" 文字列 "> 2 <img src=" ファイル名 " width=" 画像の幅 " height=" 画像の高さ "> 画像の大きさを指定する 3 <img src=" ファイル名 " border=" 枠の幅 "> 画像に枠を付ける 4 <img src=" ファイル名 " align=" 位置 "> 画像に文字列を回り込ませる 回り込みを中断させる 5 <img src=" ファイル名 " hspace=" 数値 " vspace=" 数値 "> 画像の周囲にマージンを設定する作業終了後 [hp19.html] で保存 1 <img src=" ファイル名 "> 画像を表示する <img src=" ファイル名 "> のタグは画像を Web ヘーシに表示します < =" ファイル名 "> は画像のファイル名ですまた <img src=" ファイル名 " alt=" 文字列 "> と alt=" 文字列 " を付け加えますと画像が表示されない場合に alt で指定した文字列が画像に代わって表示されますファイル名の指定はファイルがどこのフォルダに保存されているかによって異なりますファイル名の指定方法には 2 つあり一つは絶対パスと呼ばれる指定方法で今ひとつは相対パスと呼ばれる指定方法です絶対パスによる指定方法とはルートディレクトリから目的のファイルがあるディレクトリまでディレクトリを階層順につなぎ最後にファイル名を指定する方法です例えば最上層にルートディレクトリがあり次の階層に chair というフォルダと rest というフォルダがあり

2 さらに rest のフォルダの中に(rest の次の階層に ) hana2 というフォルダがあってその中に目的の画像ファイル p jpg があるとしますと p jpg の画像ファイルは次のように指定されます /rest/hana2/p jpg 指定のパスを終わりから追っていけば多分理解できるかと思います p jpg は hana2 のフォルダにありますから hana2/p jpg と指定され kana2 は rest のフォルダにありますから上の指定の上につけて rest/hana2/p jpg と指定されさらに最上層はルートディレクトリですから最終の指定は /rest/hana2/p jpg ということになりますルートディレクトリー char rest hana2 p jpg 次に相対パスによる指定方法とは現在のフォルダ ( カレントフォルダ=カレントディレクトリ ) から目的のファイルを指定する方法です上の例でカレントディレクトリが rest だとしますと先ずカレントファイルからのパスと目的ファイルへのパスを両者の共通ディレクトリを頂点として通します rest/abc.html 1 rest/hana/p jpg 2 次に 1パスのディレクトリ数を数え一つなら. 二つなら.. としそれを2パスの共通ディレクトリに代入これがパス指定となります./hana2/p jpg よってカレントディレクトリが hana2 の場合のパス指定は./p jpg となりますまた./ は省略できますのでこの場合には単に p jpg という指定もできます

3 <title> 情報機器の操作 - 画像を表示する </title> <img src="p jpg"> この例は p jpg の画像がカレントディレクトリに保存されているばあいの相対パスによる指定方法です 2 <img src=" ファイル名 " width=" 画像の幅 " height=" 画像の高さ "> 画像の大きさを指定する画像を Web ページに入れる場合画像が大きすぎる場合がありますその場合画像の大きさを調整して Web ページに挿入します <img src="p jpg" width=" 数値 " height=" 数値 "> のタグを使います < width=" 数値 "> は画像の横幅を指定し < height=" 数値 "> は画像の縦幅を指定します < width=" 数値 "> < height=" 数値 "> の数値はピクセル数または % ですピクセル数は画像の大きさを絶対的に指定しますが % はブラウザのウィンド幅に対する比率になりますしたがってピクセル数による大きさの指定で元の画像の縦横比を保持して縮小拡大表示したい場合には元の画像の縦横比にあわせてピクセル数を指定しなければなりません <title> 情報機器の操作 - 画像の大きさを指定する </title> <img src="p jpg" width="100" height="50"> 3 <img src=" ファイル名 " border=" 枠の幅 ">

4 画像に枠をつける画像に枠をつけたいときは <img src="p jpg" border=" 数値 "> のタグを使います < border=" 数値 "> の数値はピクセル数です <title> 情報機器の操作 - 画像に枠をつける </title> <img src="p jpg" border="4"> 画像にリンクを設定した場合画像にリンクを設定しますと画像の枠がリンクの色で表示されますがこの枠が邪魔で消去したい場合にはこの border を 0 で指定しますと画像の枠線を消すことができます 4 <img src=" ファイル名 " align=" 位置 "> 画像に文字列を回り込ませる文字列の Web ページに画像を挿入しますと画像の横に文字列が 1 行のみ表示され 2 行目以降は画像の下に表示されてしまいますそこで画像の横に 2 行目以降も表示したい場合には <img src="p jpg" align=" 位置 "> のタグで文字列の回り込みを指定します < align=" 位置 "> の " 位置 " は left と right が指定できます left は画像を左端に指定しますから文字列は画像の右側に回り込みます right は画像を右端に指定しますから文字列は画像の左側に回り込みます left も right もともに文字列が画像の横で一杯になりますと文字列は画像の下に表示されます align=" 位置 " の " 位置 " に top middle absmiddle bottom を指定画像の横に文字列を回り込ませると

5 文字列の縦位置は画像の下端に揃えられますしかし align=" 位置 " の " 位置 " に top middle absmiddle bottom を指定しますと文字列の縦位置を指定できます top は画像の上端に middle は画像の中央 ( 文字列のベースラインが画像の中央 ) に absmiddle は文字通り画像の中央に bottom は画像の下端に指定されます <title> 情報機器の操作 - 画像に文字列を回り込ませる </title> <img src="p jpg" align="left"> 情報機器の操作 文学部 教育学部 人間文化学部なお文字列の回り込みを文字列の途中で中断させたい場合には中断させたい文字列の位置に を指定しますそうすることによって文字列の回り込みは中断し指定された文字列以降は画像の下に表示されます 5 <img src=" ファイル名 " hspace=" 数値 " vspace=" 数値 "> 画像の周囲にマージンを設定する文字列の Web ページに画像を挿入し文字列の回り込みを指定しますと画像の横に文字列が回り込んで表示されましたが画像と文字列との間にはスペースがありませんそこで画像と文字列の間にスペースが欲しい場合には <img src="p jpg" align="left または right" hspace=" 数値 " vspace=" 数値 "> のタグで画像の周囲にスペースを設定します < hspace=" 数値 "> は画像の左右にスペースを空け

6 < vspace=" 数値 "> は画像の上下にスペースを空けます < hspace=" 数値 "> vspace=" 数値 " の " 数値 " はともにピクセル数での指定です <title> 情報機器の操作 - 画像に文字列を回り込ませる </title> <img src="p jpg" align="left" hspace="30" vspace="10">

7 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>

8 <body background="p 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> 情報機器の操作 文字列画像表を中央にそろえる </center>

Taro-ホームページB5.jtd

Taro-ホームページB5.jtd 4 タグの基本 (Ⅳ) 画像基本 19 1 画像を入れる 2 画像の大きさを指定する 3