網上葉の書き方


その拾壹  繪の表示


東川吉嗣


  ここでは、網上葉に繪を表現するしかたについて述べる。
繪の表示
  網上葉では、畫像ファイルを單獨で呼び出して閲覧することが出來るが、それ以上に効果的な使ひ方として、一つの繪をテキストの一文字と同じ扱ひで使ふことが出來る。その場合、文字に替へて使ふ畫像は、「<img src="○○">」と表示する。「○○」には、網際通信上での目的畫像ファイルを、その在処である地番を添えて記す。現在作りつつある網上葉のファイルと同じ、ディレクトリー、フォルダーにある場合は單に、その畫像のファイル名を記すのみでよいし、相對指定で示せるところにあるファイルならば、相對指定出來る。
  畫像ファイルは文字ばかりのファイルに比べて、データ量が大きくなりがちなので、出來るだけデータ量を小さくするやうに心がける必要がある。畫像データを加工した後の保存形式は、多くの閲覧ソフトが對應してゐて、データ量も小さくなる「gif」や「jpg」形式が望ましい。
  いま、「pirate.jpg、hikari.jpg、kohuku.jpg」といふ、三枚の絵をそれぞれ「jpg」形式で保存した畫像ファイルが、あり、それを、現在作業中のファイルがあるディレクトリーに、「jpg」といふ名のディレクトリーを作り、その中へ保存してある。この畫像を、次の文章の中の「☆」印のところへ入れて、表現したいとする。

ここに三枚のタバコの箱の繪がある。一つは「パイレート☆」、一つは「光☆」、そして、もう一つは「幸福☆」といふ名のタバコの箱である。☆は、歐米の會社の製品。☆は、專賣局の製品。☆は、支那事變下での日軍管理工場の製品である。

  この「パイレート☆」の「☆」に替へて、特定の繪「pirate.jpg」を入れるには、「☆」のところへ「<img src="jpg/pirate.jpg">」とする。同樣に、「光☆」は「光<img src="jpg/hikari.jpg">」と、また「幸福☆」は「幸福<img src="jpg/kohuku.jpg">」とする。同樣に、以下の「☆」も書き變へて、次のやうにした。

ここに三枚のタバコの箱の繪がある。一つは「パイレート<img src="jpg/pirate.jpg">」、一つは「光<img src="jpg/hikari.jpg">」、そして、もう一つは「幸福<img src="jpg/kohuku.jpg">」といふ名のタバコの箱である。<img src="jpg/pirate.jpg">は、歐米の會社の製品。<img src="jpg/hikari.jpg">は、專賣局の製品。<img src="jpg/kohuku.jpg">は、支那事變下での日軍管理工場の製品である。

その結果は、次のやうに表現される。

ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。は、歐米の會社の製品。は、專賣局の製品。は、支那事變下での日軍管理工場の製品である。

  御覧のやうに、それぞれの「☆」のあつた位置に、指定した繪が表現されてゐる。
  繪が大きい場合や、その繪のデータ量が大きい場合、網上葉を表示するのに時間が掛かるし、地の文字と、そこに入れた繪の大きさが不釣り合ひの場合、文章中では縮小した繪を見て貰ひ、別途、原畫を見て貰ふことが出來る。まづ、例に挙げた三枚の繪を、畫像處理ソフト、例へば「ペイントショップ」などで加工して、小さい繪を作り、それぞれ「pirates.jpg、hikaris.jpg、kohukus.jpg」と名付けて、同じ「jpg」といふ名のディレクトリーへ保存した。そして、前の指定の「pirate.jpg、hikari.jpg、kohuku.jpg」の代りに、「pirates.jpg、hikaris.jpg、kohukus.jpg」をいれた。その結果は、つぎのやうに表現される。

ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。は、歐米の會社の製品。は、專賣局の製品。は、支那事變下での日軍管理工場の製品である。

  いま、それぞれの縮小した繪を手掛かりにして、それぞれの原畫に引き紐を着ければ、この文章を讀む人の必要に應じて、原畫を參照してもらふことができる。この場合、文字群に引き紐を着けるのと同じやり方でよい。例へば、「パイレート」といふ塊を手掛かりに設定して、「jpg/pirate.jpg」を引き出して貰ふには、「その參  引き紐の付け方」で説明したやうに、

<a href="網際通信上の目的のページや目的の箇所の番地。もしくは目的のファイルの在処とファイル名”>引き紐の目印とする文字群</a>

を適用して、「<a href="jpg/pirate.jpg”>「パイレート<img src="jpg/pirates.jpg">」</a>とする。同樣にその他の部分にも引き紐を着けると次のやうになる。

ここに三枚のタバコの箱の繪がある。一つは<a href="jpg/pirate.jpg">「パイレート<img src="jpg/pirates.jpg">」</a>、一つは<a href="jpg/hikari.jpg">「光<img src="jpg/hikaris.jpg">」</a>、そして、もう一つは<a href="jpg/kohuku.jpg">「幸福<img src="jpg/kohukus.jpg">」</a>といふ名のタバコの箱である。<a href="jpg/pirate.jpg"><img src="jpg/pirates.jpg"></a>は、歐米の會社の製品。<a href="jpg/hikari.jpg"><img src="jpg/hikaris.jpg"></a>は、專賣局の製品。<a href="jpg/kohuku.jpg"><img src="jpg/kohukus.jpg"></a>は、支那事變下での日軍管理工場の製品である。

  この結果はつぎのやうに表現される。

ここに三枚のタバコの箱の繪がある。一つは「パイレート、一つは「光、そして、もう一つは「幸福といふ名のタバコの箱である。は、歐米の會社の製品。は、專賣局の製品。は、支那事變下での日軍管理工場の製品である。

  この中の小さな繪札を手掛かりに、畫像ファイルが直接、閲覧できる。このやうに、畫像は文字と同じやうに扱ふことができる。
  指定した畫像ファイルが存在しない場合、閲覧ソフトによつて、「表示出來ない」旨が表示される。いま、存在しないファイル「xxx.jpg」を指定してみた。

これは<a href="jpg/xxx.jpg">「存在しない繪<img src="jpg/xxxs.jpg">」</a>、である。

と指定した結果は、次のやうに表現される。

これは「存在しない繪、である。

  指定された繪のファイルが存在しても、閲覧者の設定によつて、「畫像ファイルは見ない」設定にしてあれば、當然のこととして、畫像は表現されない。「畫像は見ないが、おほよそ何の繪か知れればありがたい」といふ欲が働くのは人情である。そこで、繪を見せられない場合は、それに代り、一言を傳へることができる。それには、「<img src="○○">」の中へ半角の空白を置いて、「alt="△△"」を追加する。「△△」に記述した文字群が繪の代りに表示される。上の例で、「jpg/xxxs.jpg」が表現出來ないときは「見せられない繪」といふ文字群を見せるには、「<img src="jpg/xxxs.jpg">」を「<img src="jpg/xxxs.jpg" alt="見せられない繪">」とした。その結果は、次のやうになる。

これは「存在しない繪見せられない繪、である。

畫像の左右位置を指定する
  網上葉の中で、繪を左に、あるいは右に置いて、その脇に文字群を記事として配置するには、繪の位置を左に寄せるには、「<img src="○○">」へ半角の空白を置いて「align="left"」と、繪の位置を右に寄せるには、「<img src="○○">」へ半角の空白を置いて「align="right"」と指定する。例へば、「jpg/kohuku.jpg」の繪を左に寄せて、その餘白に記事を表現するには、

<img src="jpg/kohuku.jpg" align="left"> ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。左に示したのは支那事變下での日軍管理工場の製品である。

と指定すると、その繪の右側が空いてゐる限り、繪の後に連なる文字群は繪の右に這入り込む。閲覧者が畫面の左右幅を變へれば、それにつれて、繪の右へ這入る文字の量が変動する。この文字群の回り込みを中斷するには、「<br clear="all">」で中斷する。この中斷指令を加へたものを次に示す。

<img src="jpg/kohuku.jpg" align="left"> ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。左に示したのは支那事變下での日軍管理工場の製品である。<br clear="all">

  その結果は、次のやうに表現される。

ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。左に示したのは支那事變下での日軍管理工場の製品である。

  繪を右に寄せたのが次の例である。繪の指示は「<img src="jpg/kohuku.jpg" align="right">」である。

ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。右に示したのは專賣局の製品である。

  そして、二つの繪を左右に置いて、その間に記事を入れるには、次の例のやうにする。

<img src="jpg/kohuku.jpg" align="left"><img src="jpg/hikari.jpg" align="right"> ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。左に示したのは支那事變下での日軍管理工場の製品で、右に示したのは專賣局の製品である。

  その結果は次のやうに表現される。

ここに三枚のタバコの箱の繪がある。一つは「パイレート」、一つは「光」、そして、もう一つは「幸福」といふ名のタバコの箱である。左に示したのは支那事變下での日軍管理工場の製品で、右に示したのは專賣局の製品である。


附けたり
○畫像は見ない - 畫像や動画のファイルは、データ量が大きくなりがちなので、閲覧者の機械の仕事量が必要以上に大きくなり、閲覧に時間が掛かつたり、動作が鈍るなどの弊害を伴ふ。そこで、網際通信の利用目的により、閲覧ソフトの設定で、「畫像は見ない」ことが出來る。
○文字列の中での繪の上下位置 - 繪は文字列の中で、底辺を揃へるやうに表現されるが、これを、「繪の天井と前後の文字列の天井を合はせる」には「<img src="○○">」へ半角の空白を置いて「align="top"」と、「繪の中央に文字列を合はせる」には「<img src="○○">」へ半角の空白を置いて「align="middle"」と指定する方法があるが、この指定は、結果が不安定であるので、ここでは述べない。

目次へ  その拾へ  その拾貳
この網上葉の履歴
○平成二十九年四月十六日、電子飛脚の宛先番地の訂正。
○平成二十二年四月二十四日、電子飛脚の宛先番地の訂正。
○平成十五年十一月二十日、掲載開始。

制作者  東川吉嗣  平成十五年、乃至二十九年
CopyRight © 2003 - 2017   Higasikawa Yositugu

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送