４ タグの基本(Ⅳ)………画像 基本１９ ① <img src="ﾌｧｲﾙ名"> 画像を入れる <img src="ﾌｧｲﾙ名" alt="文字列"> ② <img src="ﾌｧｲﾙ名" width="画像の幅" height="画像の高さ"> 画像の大きさを指定する ③ <img src="ﾌｧｲﾙ名" border="枠の幅"> 画像に枠を付ける ④ <img src="ﾌｧｲﾙ名" align="位置"> 画像に文字列を回り込ませる <br clear="all"> 回り込みを中断させる ⑤ <img src="ﾌｧｲﾙ名" hspace="数値" vspace="数値"> 画像の周囲にマージンを設定する 作業終了後 ① ［hp19.html]で保存 <img src="ﾌｧｲﾙ名"> ………画像を表示する <img src="ﾌｧｲﾙ名">のタグは、画像を Web ﾍﾟｰｼﾞに表示します。 <……="ﾌｧｲﾙ名">は、画像のファイル名です。 また、 <img src="ﾌｧｲﾙ名" alt="文字列">と、「alt="文字列"」を付け加えますと、画像が表 示されない場合に、alt で指定した文字列が、画像に代わって表示されます。 ﾌｧｲﾙ名の指定は、ファイルがどこのフォルダに保存されているかによって異なり ます。 ファイル名の指定方法には、２つあり、 一つは、絶対パスと呼ばれる指定方法で、 今ひとつは、相対パスと呼ばれる指定方法です。 絶対パスによる指定方法とは、 ルートディレクトリから目的のファイルがあるディレクトリまで、ディレクトリ を階層順につなぎ、最後にファイル名を指定する方法です。 例えば、最上層にルートディレクトリがあり、 次の階層に「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 …① rest/hana/p1010045.jpg …② 次に、①パスのディレクトリ数を数え、一つなら「.」、二つなら「..」とし、 それを②パスの共通ディレクトリに代入。 これがパス指定となります。 ./hana2/p1010045.jpg よって、カレントディレクトリが「hana2」の場合のパス指定は、 ./p1010045.jpg となります。 また、「./」は、省略できますので、この場合には単に p1010045.jpg という指定もできます。 <html> <head> <title>情報機器の操作－画像を表示する</title> </head> <body> <img src="p1010045.jpg"> </body> </html> この例は、「p1010045.jpg」の画像が、カレントディレクトリに保存されているば あいの、相対パスによる指定方法です。 ② <img src="ﾌｧｲﾙ名" width="画像の幅" height="画像の高さ"> ………画像の大きさを指定する 画像を Web ページに入れる場合、画像が大きすぎる場合があります。 その場合、画像の大きさを調整して、Web ページに挿入します。 <img src="p1010045.jpg" width="数値" height="数値"> のタグを使います。 <…… width="数値">は、画像の横幅を指定し、 <…… height="数値">は、画像の縦幅を指定します。 <…… width="数値">、<…… height="数値"> の「数値」は、 「ピクセル数」または「％」です。 ピクセル数は、画像の大きさを絶対的に指定しますが、 ％は、ブラウザのウィンド幅に対する比率になります。 したがって、ピクセル数による大きさの指定で元の画像の縦横比を保持して縮小・ 拡大表示したい場合には、元の画像の縦横比にあわせて、ピクセル数を指定しなけ ればなりません。 <html> <head> <title>情報機器の操作－画像の大きさを指定する</title> </head> <body> <img src="p1010045.jpg" width="100" height="50"> </body> </html> ③ <img src="ﾌｧｲﾙ名" border="枠の幅"> ………画像に枠をつける 画像に枠をつけたいときは、 <img src="p1010045.jpg" border="数値"> のタグを使います。 <…… border="数値">の「数値」は、「ピクセル数」です。 <html> <head> <title>情報機器の操作－画像に枠をつける</title> </head> <body> <img src="p1010045.jpg" border="4"> </body> </html> ☆ ④ 画像にリンクを設定した場合 画像にリンクを設定しますと、画像の枠がリンクの色で表示され ますが、 この枠が邪魔で消去したい場合には、 この「border」を「0」で指定しますと、画像の枠線を消すことが できます。 <img src="ﾌｧｲﾙ名" align="位置"> ………画像に文字列を回り込ませる 文字列の Web ページに画像を挿入しますと、 画像の横に文字列が１行のみ表示され、 ２行目以降は、画像の下に表示されてしまいます。 そこで、画像の横に２行目以降も表示したい場合には、 <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」は、画像の下端に指定されます。 <html> <head> <title>情報機器の操作－画像に文字列を回り込ませる</title> </head> <body> <img src="p1010045.jpg" align="left">情報機器の操作<br> 文学部<br> 教育学部<br> 人間文化学部 </body> </html> ☆ ⑤ なお、文字列の回り込みを文字列の途中で中断させたい場合には、 中断させたい文字列の位置に、<br clear="all">を指定します。 そうすることによって、 文字列の回り込みは中断し、 指定された文字列以降は、画像の下に表示されます。 <img src="ﾌｧｲﾙ名" hspace="数値" vspace="数値"> ………画像の周囲にマージンを設定する 文字列の Web ページに画像を挿入し、文字列の回り込みを指定しますと、 画像の横に文字列が回り込んで表示されましたが、 画像と文字列との間には、スペースがありません。 そこで、 画像と文字列の間にスペースが欲しい場合には、 <img src="p1010045.jpg" align="left または right" hspace="数値" vspace="数値">のタ グで、画像の周囲にスペースを設定します。 <…… hspace="数値">は、画像の左右にスペースを空け、 <…… vspace="数値">は、画像の上下にスペースを空けます。 <…… hspace="数値">、 vspace="数値"の"数値"は、 ともにピクセル数での指定です。 <html> <head> <title>情報機器の操作－画像に文字列を回り込ませる</title> </head> <body> <img src="p1010045.jpg" align="left" hspace="30" vspace="10"> </body> </html> ５ タグの基本(Ⅴ)………ＢＯＤＹ 基本２０ ① <body bgcolor="色">本文</body> body 全体に背景色を指定します ② <body background="ﾌｧｲﾙ名">本文</body> body の背景に画像を入れます ③ <body leftmargin="数値"> body の左にマージンを設定する ④ <center>文字列・画像・表</center> 文字列を中央にそろえる 作業終了後 ① ［hp20.html]で保存 <body bgcolor="色">本文</body> ………ページの背景に色を指定する ページの背景の色を指定するには、 <body bgcolor="色">本文</body>のタグを使用します。 色の指定は、"色の名前" または "カラーコード"によります。 色を指定しない場合は、使用しているブラウザで設定されている色が表示されま す。 <html> <head> <title>情報機器の操作－背景色を指定する</title> </head> <body bgcolor="yellow"> 情報機器の操作 </body> </html> ② <body background="ﾌｧｲﾙ名">本文</body> ………ページの背景に画像を指定する 画像の指定するには、絶対パスによる方法と相対パスによる方法があります。 ともに、基本１９－①を参照してください。 <html> <head> <title>情報機器の操作－背景に画像を設定する</title> </head> <body background="p1010045.jpg"> 情報機器の操作 </body> </html> ③ <body leftmargin="数値"> ………ページの左にマージンを設定する <body leftmargin="数値"> の数値は、「ピクスル数」です。 上余白は、<body topmargin="数値">で指定できます。 下余白は、<body bottommargin="数値">で指定できます。 右余白は、<body rightmargin="数値">で指定できます。 <html> <head> <title>情報機器の操作－マージンを設定する</title> </head> <body leftmargin="30"> 情報機器の操作 </body> </html> ④ <center>文字列・画像・表</center> <center></center>は、文字列や画像や表を Web ページの中央にそろえます。 <html> <head> <title>情報機器の操作－段落を中央にそろえる</title> </head> <body> <center>情報機器の操作<br> 文字列・画像・表を中央にそろえる</center> </body> </html>
© Copyright 2024 Paperzz
