マークアップ言語における背景画像の表現
【課題】 背景画像とメイン画像を重ねて表示させた場合でもその両者を見易く表示させる表現方法を、マークアップ言語の文法の枠内における工夫によって実現する。また、背景画像の任意の位置を半透過させ、画像表現に深みを与える技術を提供する。
【解決手段】 背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上にメイン画像を配置する。この混交画像は、ＨＴＭＬにおけるテーブル又はレイヤーの背景画像として配置する。混交画像のうち不透過色の部分は、背景画像を透過しないので、メイン画像と背景画像とが近い色であっても、メイン画像を明瞭に判別することができる。一方、混交画像のうち透過色の部分は、背景画像を透過するので、メイン画像の間を通して背景画像を見ることができる。
【解決手段】 背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上にメイン画像を配置する。この混交画像は、ＨＴＭＬにおけるテーブル又はレイヤーの背景画像として配置する。混交画像のうち不透過色の部分は、背景画像を透過しないので、メイン画像と背景画像とが近い色であっても、メイン画像を明瞭に判別することができる。一方、混交画像のうち透過色の部分は、背景画像を透過するので、メイン画像の間を通して背景画像を見ることができる。
【発明の詳細な説明】
【０００１】
【発明の属する技術分野】本発明は、マークアップ言語における背景画像の表現方法に関し、特に、ＷＥＢページなどにおいて背景画像上にメイン画像を重ねて配置する場合に、背景画像及びメイン画像の両者を見易くかつ美しく表現するための方法に関する。
【０００２】
【従来の技術】ＨＴＭＬ（Hyper Text Markup Language）に代表されるマークアップ言語は、互換性が高い、ファイルサイズが小さい、テキストの他にイメージデータなどを貼り付けられる、などの優れた利点を有しており、インターネット上に公開されるＷＥＢページなどに広く用いられている。
【０００３】マークアップ言語で記述した文書にイメージデータを貼り付ける場合には、例えば、ＨＴＭＬ文書において、「BODY」の属性として「BACKGROUND="bg.gif"」のように記述し、イメージファイル「bg.gif」を当該ＨＴＭＬ文書と同じフォルダに格納する。このＨＴＭＬ文書をブラウザ（閲覧ソフト）を用いて表示させると、イメージファイル「bg.gif」の内容が背景画像として表示される。
【０００４】
【発明が解決しようとする課題】しかしながら、図１に例示するように、背景画像に重なるメイン画像が同色系の文字である場合、背景画像とメイン画像の区別がつきにくく、特にメイン画像が見づらくなってしまうことが多い。
【０００５】また、図２に例示するように、メイン画像の表示部分の背景色を指定することにより、メイン画像は見易くなる。しかし、背景画像のうち上記背景色を指定した部分が消えてしまい、背景に画像を入れた意味が半減してしまう。
【０００６】マークアップ言語は、記述がシンプルでファイルサイズが小さいという利点を持つ一方で、表現のバリエーションにおける制約が伴わざるを得ず、背景画像を含むページの見易い表現を困難にしていた。
【０００７】本発明は、背景画像とメイン画像を重ねて表示させた場合でもその両者を見易く表示させる表現方法を、マークアップ言語の文法の枠内における工夫によって実現することを目的とする。また、背景画像の任意の位置を半透過させ、画像表現に深みを与える技術を提供することを目的とする。
【０００８】なお、本明細書において「画像」というときは、データの形式（イメージ、テキスト）を問わず、ブラウザ上で視覚的に表示されるものすべて（色、絵、線図、記号、文字など）をいうものとする。
【０００９】
【課題を解決するための手段】上記目的を達成するため、本発明は、背景画像および背景画像上に配置されるメイン画像を含むページを、マークアップ言語を用いて表現する方法であって、前記背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上に前記メイン画像を配置することを特徴とする。
【００１０】上記方法において、前記混交画像における透過色部分と不透過色部分との混交状態は、前記背景画像または前記メイン画像の少なくとも一方における構成模様より細かいことが望ましい。
【００１１】また、上記方法において、前記混交画像を構成する各画素につき、隣接する画素のうち少なくとも１つは異なる色の画素であることが望ましい。
【００１２】また、上記方法において、前記混交画像のファイルサイズは、１ｋＢ以下であることが望ましい。
【００１３】また、上記方法において、前記不透過色のうち少なくとも一色は、前記背景画像の構成色のうち少なくとも一色と色相及び明度の両者が近い色であり、かつ、前記不透過色のうち少なくとも一色は、前記メイン画像の構成色のうち少なくとも一色と色相又は明度の何れかが遠い色であることが望ましい。
【００１４】また、上記方法において、前記混交画像は、ＨＴＭＬにおけるテーブルの背景画像として配置されることとしてもよい。
【００１５】また、上記方法において、前記混交画像は、ＨＴＭＬにおけるレイヤーの背景画像として配置されることとしてもよい。
【００１６】本発明のサーバは、上記の方法を用いて表現されるページをクライアント上のブラウザに提供するものである。
【００１７】
【発明の実施の形態】次に、図面を参照しながら本発明の実施の形態を説明する。
【００１８】（１．第１の実施形態）図５は、本発明の第１の実施形態の方法により背景画像を表示するためのＨＴＭＬによるソースコードを示す図であり、図６はこの実施形態の表示方法の原理を説明する図である。
【００１９】（１−１．原理の概要）図６に示されるように、この実施形態の方法では、背景画像の上に不透過色と透過色とが混交した画像を重ね、更にその上にメイン画像であるテキストの表示を重ねて配置している。不透過色と透過色とが混交した画像のうち不透過色の部分は、背景画像を透過しないので、テキストと背景画像とが近い色であっても、テキストとそれ以外の部分とを明瞭に区別することができ、テキストの判読を容易にする。一方、不透過色と透過色とが混交した画像のうち透過色の部分は、背景画像を透過するので、テキストの間を通して背景画像を見ることができる。
【００２０】（１−２．ソースコードの説明）図５の大枠内に、ソースコードが示されている。「< >」で囲まれた部分は「タグ」と呼ばれ、ブラウザ上ではテキストとして表示されない部分である。便宜的に、図５の大枠の左側に、行番号が示されている。なお、このソースコードは、ブラウザを備えたクライアント端末の記憶装置内に格納されているか、電子的ネットワークを介して接続されたサーバ装置内に格納されており、これをブラウザによって閲覧することにより、所定の画面を表示させることができる。
【００２１】第１〜４行は、「<HEAD>・・・</HEAD>」で囲まれており、文書のヘッダ部分である。第５〜第２１行は「<BODY・・・</BODY>」で囲まれており、本文の部分である。第５行にあるように、この「BODY」には「BACKGROUND="bg.gif"」という属性が指定されている。このことは「bg.gif」というイメージファイルの内容が背景画像となることを意味する。
【００２２】第９〜１９行は「<TABLE・・・</TABLE>」で囲まれており、この範囲はテーブルである。一般にテーブルは、表組みを記述するものである。しかし、ここで用いるテーブルは、行の数（「<TR・・・</TR>」の数）及び列の数（「<TD・・・</TD>」の数）ともに１つである。第９行にあるように、このテーブルには幅（「WIDTH="75%"」：ページ全体の７５％）、高さ（「HEIGHT="80%"」：ページ全体の８０％）などが指定されており、ページ内における表組みの表示位置が指定されている。この例ではページ全体に対する比率で指定しているので、ブラウザのウィンドウサイズを拡大縮小することにより、テーブルの大きさも変化する。
【００２３】この表における唯一の欄である「<TD・・・</TD>」では、第１１行にあるように「BACKGROUND="turquoise.gif"」と指定され、この欄内の背景画像としてイメージファイル「turquoise.gif」の内容が表示される。更に「<TD・・・</TD>」には、ブラウザ上で表示されるテキストが記述されている。このテキストは、表組みの中の上記欄内に記述されるので、テーブルの大きさが変化した場合には、テキストの改行位置も変わる。
【００２４】再度図６を参照して説明すると、背景画像「bg.gif」は、ＨＴＭＬのBODYで背景画像として指定されている。不透過/透過色の混交画像「turquoise.gif」は、テーブルの欄内の背景画像として指定されている。テキストは、この欄内のテキストとして記述されている。
【００２５】（１−３．混交画像）混交画像における不透過色と透過色との混交状態は、背景画像の構成模様より細かいことが好ましい。これにより、混交画像を通して背景画像を見たときに、背景画像がより自然に見える。また、メイン画像の構成模様より細かいことが好ましい。これによりメイン画像をより明瞭に表示することができる。特に、混交画像を構成する各画素は、隣接する画素のうち少なくとも１つは異なる色の画素であることが望ましい。すなわち、上下左右、右上、右下、左上、左下に隣接する画素のすべてが同じ色となるような、大きな色の塊は存在しないことが望ましい。
【００２６】この実施形態の混交画像は、２ピクセル四方を繰返し単位とした、市松模様をなしている。そのため、混交画像のファイルサイズは極めて小さくて済む。本発明における混交画像はこれに限らず、１ピクセル単位の縦又は横のラインを、不透過色と透過色とで交互に配置してもよいし、ランダム又はパターンをディザ表現したものでも良い。
【００２７】混交画像のファイルサイズは１ｋＢ（キロバイト）以下が好ましく、さらには２００バイト以下が好ましい。本実施形態の混交画像は、１００バイト以下である。なお、イメージファイルに格納された画像の大きさが実際の背景の大きさに満たない場合には、当該背景の範囲内でイメージファイルの内容が繰り返し表示されるので、混交画像は繰返し単位またはその倍数に相当する量のデータを備えていれば良い。
【００２８】混交画像における不透過色のうち少なくとも一色は、背景画像の構成色のうち少なくとも一色と、色相及び明度の両者が近い色であることが好ましい。これにより、背景画像に混交画像を自然に溶け込ませ、違和感のない画面を表現することができる。更に、混交画像における不透過色のうち少なくとも一色は、メイン画像の構成色のうち少なくとも一色と、色相又は明度の何れかが遠い色であることが好ましい。これにより、背景画像の如何に関わらずメイン画像が明瞭に表示されるようにすることができる。
【００２９】（１−４．画面表示例）図３は、本発明の第１の実施形態の方法により表示された画像の一例を示す図である。図に示されるように、背景画像の一部とテキストとは、ほぼ同じ色であるが、テキストも明瞭に判読できるし、背景画像も判別できる。更にはページ表現に奥行き感が加わり、優れたデザインを可能にする。図１R>１及び図２と比較すればその違いは歴然である。更に観察すると、背景画像の一部の色が薄くなっていることがわかる。この例では混交画像の不透過色として白を用いたため、背景画像を構成する画素が間引かれたのである。
【００３０】図４は、上記画像においてウィンドウのサイズないし形状を変更した場合の図である。ウィンドウの形状を変えたことにより、テーブルの大きさが変化し、テキストの改行位置が変化したことが分かる。
【００３１】上述の実施例に対し、背景画像（「bg.gif」）に手を加えて背景画像の画素を一部間引くことにより、テーブルを使わなくても図３と同様の画面を表現することは可能である。しかし、その場合は画素を間引いた部分が固定されているので、ウィンドウを拡大縮小しても図４のように変化させることはできない。
【００３２】（２．第２実施形態）図７は、本発明の第２の実施形態の方法により背景画像を表示するための、ＨＴＭＬによるソースコードを示す図であり、図８はこの実施形態の表示方法の原理を説明する図である。
【００３３】（２−１．ソースコードの説明）図７の第１〜１３行は、「<HEAD>・・・</HEAD>」で囲まれており、文書のヘッダ部分である。このヘッダ部分に、「layer1」と「layer2」の属性が定義されている。レイヤーの属性としては、平面的な位置や大きさのほか、「z-index」として上層／下層の関係も定義される。また、レイヤーの背景画像として、混交画像である「blue.gif」や「yellow.gif」が指定されている。
【００３４】第１４〜３２行は「<BODY・・・</BODY>」で囲まれており、本文の部分である。第１４行にあるように、この「BODY」では「bg.gif」というイメージファイルの内容が背景画像に指定されている。
【００３５】第１６〜１９行の「<DIV ID="layer1">・・・</DIV>」で、先の「layer1」が配置される。特にこのlayer1には、第１７〜１８行に示される第１のテキストが含まれている。
【００３６】第２０〜３１行の「<DIV ID="layer2">・・・</DIV>」で、先の「layer2」が配置される。特にこのlayer2内には、更にテーブルが定義され、当該テーブルの欄内の背景画像として、混交画像である「pink.gif」が指定されている（第２４行）。また、第２５〜２８行に、第２のテキストが記述されている。
【００３７】（２−２．表示原理）上述の通り、この画面は、背景画像と、layer1とlayer2とを備えている。背景画像はＨＴＭＬのBODYで定義されている。Layer1では混交画像「blue.gif」が定義されているほか、第１のテキストを有している。Layer2では混交画像「yellow.gif」が定義されているほか、テーブルを備え、そのテーブルに混交画像「pink.gif」と第２のテキストが定義されている。
【００３８】このように、レイヤーを使えば混交画像を複数重ねて配置することができ、ページデザインの自由度が更に向上する。また、上記第１の実施形態と同様に、ブラウザのウィンドウサイズを変更すれば混交画像の大きさも変更される。
【００３９】なお、上記各実施形態の説明において、イメージファイルとして「gif」という拡張子を持つＧＩＦ形式（Graphics Interchange Format）を例にとって説明したが、これに限らず、例えばＰＮＧ形式（Portable Network Graphics Format）であっても良い。
【００４０】
【発明の効果】以上説明したように、本発明によれば、背景画像とメイン画像を重ねて表示させた場合でもその両者を見易く表示させる表現方法を、マークアップ言語の文法の枠内における工夫によって実現することが可能となる。また、背景画像の任意の位置を半透過させ、画像表現に深みを与える技術を提供することができる。
【図面の簡単な説明】
【図１】従来例による背景画像およびメイン画像の表示例を示す図である。
【図２】従来例による背景画像およびメイン画像の表示例を示す図である。
【図３】本発明の第１の実施形態の方法により表示された画像の一例を示す図である。
【図４】上記画像においてウィンドウのサイズないし形状を変更した場合の図である。
【図５】本発明の第１の実施形態の方法により背景画像を表示するためのＨＴＭＬによるソースコードを示す図である。
【図６】第１実施形態の表示方法の原理を説明する図である。
【図７】本発明の第２の実施形態の方法により背景画像を表示するための、ＨＴＭＬによるソースコードを示す図である。
【図８】第２実施形態の表示方法の原理を説明する図である。
【０００１】
【発明の属する技術分野】本発明は、マークアップ言語における背景画像の表現方法に関し、特に、ＷＥＢページなどにおいて背景画像上にメイン画像を重ねて配置する場合に、背景画像及びメイン画像の両者を見易くかつ美しく表現するための方法に関する。
【０００２】
【従来の技術】ＨＴＭＬ（Hyper Text Markup Language）に代表されるマークアップ言語は、互換性が高い、ファイルサイズが小さい、テキストの他にイメージデータなどを貼り付けられる、などの優れた利点を有しており、インターネット上に公開されるＷＥＢページなどに広く用いられている。
【０００３】マークアップ言語で記述した文書にイメージデータを貼り付ける場合には、例えば、ＨＴＭＬ文書において、「BODY」の属性として「BACKGROUND="bg.gif"」のように記述し、イメージファイル「bg.gif」を当該ＨＴＭＬ文書と同じフォルダに格納する。このＨＴＭＬ文書をブラウザ（閲覧ソフト）を用いて表示させると、イメージファイル「bg.gif」の内容が背景画像として表示される。
【０００４】
【発明が解決しようとする課題】しかしながら、図１に例示するように、背景画像に重なるメイン画像が同色系の文字である場合、背景画像とメイン画像の区別がつきにくく、特にメイン画像が見づらくなってしまうことが多い。
【０００５】また、図２に例示するように、メイン画像の表示部分の背景色を指定することにより、メイン画像は見易くなる。しかし、背景画像のうち上記背景色を指定した部分が消えてしまい、背景に画像を入れた意味が半減してしまう。
【０００６】マークアップ言語は、記述がシンプルでファイルサイズが小さいという利点を持つ一方で、表現のバリエーションにおける制約が伴わざるを得ず、背景画像を含むページの見易い表現を困難にしていた。
【０００７】本発明は、背景画像とメイン画像を重ねて表示させた場合でもその両者を見易く表示させる表現方法を、マークアップ言語の文法の枠内における工夫によって実現することを目的とする。また、背景画像の任意の位置を半透過させ、画像表現に深みを与える技術を提供することを目的とする。
【０００８】なお、本明細書において「画像」というときは、データの形式（イメージ、テキスト）を問わず、ブラウザ上で視覚的に表示されるものすべて（色、絵、線図、記号、文字など）をいうものとする。
【０００９】
【課題を解決するための手段】上記目的を達成するため、本発明は、背景画像および背景画像上に配置されるメイン画像を含むページを、マークアップ言語を用いて表現する方法であって、前記背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上に前記メイン画像を配置することを特徴とする。
【００１０】上記方法において、前記混交画像における透過色部分と不透過色部分との混交状態は、前記背景画像または前記メイン画像の少なくとも一方における構成模様より細かいことが望ましい。
【００１１】また、上記方法において、前記混交画像を構成する各画素につき、隣接する画素のうち少なくとも１つは異なる色の画素であることが望ましい。
【００１２】また、上記方法において、前記混交画像のファイルサイズは、１ｋＢ以下であることが望ましい。
【００１３】また、上記方法において、前記不透過色のうち少なくとも一色は、前記背景画像の構成色のうち少なくとも一色と色相及び明度の両者が近い色であり、かつ、前記不透過色のうち少なくとも一色は、前記メイン画像の構成色のうち少なくとも一色と色相又は明度の何れかが遠い色であることが望ましい。
【００１４】また、上記方法において、前記混交画像は、ＨＴＭＬにおけるテーブルの背景画像として配置されることとしてもよい。
【００１５】また、上記方法において、前記混交画像は、ＨＴＭＬにおけるレイヤーの背景画像として配置されることとしてもよい。
【００１６】本発明のサーバは、上記の方法を用いて表現されるページをクライアント上のブラウザに提供するものである。
【００１７】
【発明の実施の形態】次に、図面を参照しながら本発明の実施の形態を説明する。
【００１８】（１．第１の実施形態）図５は、本発明の第１の実施形態の方法により背景画像を表示するためのＨＴＭＬによるソースコードを示す図であり、図６はこの実施形態の表示方法の原理を説明する図である。
【００１９】（１−１．原理の概要）図６に示されるように、この実施形態の方法では、背景画像の上に不透過色と透過色とが混交した画像を重ね、更にその上にメイン画像であるテキストの表示を重ねて配置している。不透過色と透過色とが混交した画像のうち不透過色の部分は、背景画像を透過しないので、テキストと背景画像とが近い色であっても、テキストとそれ以外の部分とを明瞭に区別することができ、テキストの判読を容易にする。一方、不透過色と透過色とが混交した画像のうち透過色の部分は、背景画像を透過するので、テキストの間を通して背景画像を見ることができる。
【００２０】（１−２．ソースコードの説明）図５の大枠内に、ソースコードが示されている。「< >」で囲まれた部分は「タグ」と呼ばれ、ブラウザ上ではテキストとして表示されない部分である。便宜的に、図５の大枠の左側に、行番号が示されている。なお、このソースコードは、ブラウザを備えたクライアント端末の記憶装置内に格納されているか、電子的ネットワークを介して接続されたサーバ装置内に格納されており、これをブラウザによって閲覧することにより、所定の画面を表示させることができる。
【００２１】第１〜４行は、「<HEAD>・・・</HEAD>」で囲まれており、文書のヘッダ部分である。第５〜第２１行は「<BODY・・・</BODY>」で囲まれており、本文の部分である。第５行にあるように、この「BODY」には「BACKGROUND="bg.gif"」という属性が指定されている。このことは「bg.gif」というイメージファイルの内容が背景画像となることを意味する。
【００２２】第９〜１９行は「<TABLE・・・</TABLE>」で囲まれており、この範囲はテーブルである。一般にテーブルは、表組みを記述するものである。しかし、ここで用いるテーブルは、行の数（「<TR・・・</TR>」の数）及び列の数（「<TD・・・</TD>」の数）ともに１つである。第９行にあるように、このテーブルには幅（「WIDTH="75%"」：ページ全体の７５％）、高さ（「HEIGHT="80%"」：ページ全体の８０％）などが指定されており、ページ内における表組みの表示位置が指定されている。この例ではページ全体に対する比率で指定しているので、ブラウザのウィンドウサイズを拡大縮小することにより、テーブルの大きさも変化する。
【００２３】この表における唯一の欄である「<TD・・・</TD>」では、第１１行にあるように「BACKGROUND="turquoise.gif"」と指定され、この欄内の背景画像としてイメージファイル「turquoise.gif」の内容が表示される。更に「<TD・・・</TD>」には、ブラウザ上で表示されるテキストが記述されている。このテキストは、表組みの中の上記欄内に記述されるので、テーブルの大きさが変化した場合には、テキストの改行位置も変わる。
【００２４】再度図６を参照して説明すると、背景画像「bg.gif」は、ＨＴＭＬのBODYで背景画像として指定されている。不透過/透過色の混交画像「turquoise.gif」は、テーブルの欄内の背景画像として指定されている。テキストは、この欄内のテキストとして記述されている。
【００２５】（１−３．混交画像）混交画像における不透過色と透過色との混交状態は、背景画像の構成模様より細かいことが好ましい。これにより、混交画像を通して背景画像を見たときに、背景画像がより自然に見える。また、メイン画像の構成模様より細かいことが好ましい。これによりメイン画像をより明瞭に表示することができる。特に、混交画像を構成する各画素は、隣接する画素のうち少なくとも１つは異なる色の画素であることが望ましい。すなわち、上下左右、右上、右下、左上、左下に隣接する画素のすべてが同じ色となるような、大きな色の塊は存在しないことが望ましい。
【００２６】この実施形態の混交画像は、２ピクセル四方を繰返し単位とした、市松模様をなしている。そのため、混交画像のファイルサイズは極めて小さくて済む。本発明における混交画像はこれに限らず、１ピクセル単位の縦又は横のラインを、不透過色と透過色とで交互に配置してもよいし、ランダム又はパターンをディザ表現したものでも良い。
【００２７】混交画像のファイルサイズは１ｋＢ（キロバイト）以下が好ましく、さらには２００バイト以下が好ましい。本実施形態の混交画像は、１００バイト以下である。なお、イメージファイルに格納された画像の大きさが実際の背景の大きさに満たない場合には、当該背景の範囲内でイメージファイルの内容が繰り返し表示されるので、混交画像は繰返し単位またはその倍数に相当する量のデータを備えていれば良い。
【００２８】混交画像における不透過色のうち少なくとも一色は、背景画像の構成色のうち少なくとも一色と、色相及び明度の両者が近い色であることが好ましい。これにより、背景画像に混交画像を自然に溶け込ませ、違和感のない画面を表現することができる。更に、混交画像における不透過色のうち少なくとも一色は、メイン画像の構成色のうち少なくとも一色と、色相又は明度の何れかが遠い色であることが好ましい。これにより、背景画像の如何に関わらずメイン画像が明瞭に表示されるようにすることができる。
【００２９】（１−４．画面表示例）図３は、本発明の第１の実施形態の方法により表示された画像の一例を示す図である。図に示されるように、背景画像の一部とテキストとは、ほぼ同じ色であるが、テキストも明瞭に判読できるし、背景画像も判別できる。更にはページ表現に奥行き感が加わり、優れたデザインを可能にする。図１R>１及び図２と比較すればその違いは歴然である。更に観察すると、背景画像の一部の色が薄くなっていることがわかる。この例では混交画像の不透過色として白を用いたため、背景画像を構成する画素が間引かれたのである。
【００３０】図４は、上記画像においてウィンドウのサイズないし形状を変更した場合の図である。ウィンドウの形状を変えたことにより、テーブルの大きさが変化し、テキストの改行位置が変化したことが分かる。
【００３１】上述の実施例に対し、背景画像（「bg.gif」）に手を加えて背景画像の画素を一部間引くことにより、テーブルを使わなくても図３と同様の画面を表現することは可能である。しかし、その場合は画素を間引いた部分が固定されているので、ウィンドウを拡大縮小しても図４のように変化させることはできない。
【００３２】（２．第２実施形態）図７は、本発明の第２の実施形態の方法により背景画像を表示するための、ＨＴＭＬによるソースコードを示す図であり、図８はこの実施形態の表示方法の原理を説明する図である。
【００３３】（２−１．ソースコードの説明）図７の第１〜１３行は、「<HEAD>・・・</HEAD>」で囲まれており、文書のヘッダ部分である。このヘッダ部分に、「layer1」と「layer2」の属性が定義されている。レイヤーの属性としては、平面的な位置や大きさのほか、「z-index」として上層／下層の関係も定義される。また、レイヤーの背景画像として、混交画像である「blue.gif」や「yellow.gif」が指定されている。
【００３４】第１４〜３２行は「<BODY・・・</BODY>」で囲まれており、本文の部分である。第１４行にあるように、この「BODY」では「bg.gif」というイメージファイルの内容が背景画像に指定されている。
【００３５】第１６〜１９行の「<DIV ID="layer1">・・・</DIV>」で、先の「layer1」が配置される。特にこのlayer1には、第１７〜１８行に示される第１のテキストが含まれている。
【００３６】第２０〜３１行の「<DIV ID="layer2">・・・</DIV>」で、先の「layer2」が配置される。特にこのlayer2内には、更にテーブルが定義され、当該テーブルの欄内の背景画像として、混交画像である「pink.gif」が指定されている（第２４行）。また、第２５〜２８行に、第２のテキストが記述されている。
【００３７】（２−２．表示原理）上述の通り、この画面は、背景画像と、layer1とlayer2とを備えている。背景画像はＨＴＭＬのBODYで定義されている。Layer1では混交画像「blue.gif」が定義されているほか、第１のテキストを有している。Layer2では混交画像「yellow.gif」が定義されているほか、テーブルを備え、そのテーブルに混交画像「pink.gif」と第２のテキストが定義されている。
【００３８】このように、レイヤーを使えば混交画像を複数重ねて配置することができ、ページデザインの自由度が更に向上する。また、上記第１の実施形態と同様に、ブラウザのウィンドウサイズを変更すれば混交画像の大きさも変更される。
【００３９】なお、上記各実施形態の説明において、イメージファイルとして「gif」という拡張子を持つＧＩＦ形式（Graphics Interchange Format）を例にとって説明したが、これに限らず、例えばＰＮＧ形式（Portable Network Graphics Format）であっても良い。
【００４０】
【発明の効果】以上説明したように、本発明によれば、背景画像とメイン画像を重ねて表示させた場合でもその両者を見易く表示させる表現方法を、マークアップ言語の文法の枠内における工夫によって実現することが可能となる。また、背景画像の任意の位置を半透過させ、画像表現に深みを与える技術を提供することができる。
【図面の簡単な説明】
【図１】従来例による背景画像およびメイン画像の表示例を示す図である。
【図２】従来例による背景画像およびメイン画像の表示例を示す図である。
【図３】本発明の第１の実施形態の方法により表示された画像の一例を示す図である。
【図４】上記画像においてウィンドウのサイズないし形状を変更した場合の図である。
【図５】本発明の第１の実施形態の方法により背景画像を表示するためのＨＴＭＬによるソースコードを示す図である。
【図６】第１実施形態の表示方法の原理を説明する図である。
【図７】本発明の第２の実施形態の方法により背景画像を表示するための、ＨＴＭＬによるソースコードを示す図である。
【図８】第２実施形態の表示方法の原理を説明する図である。
【特許請求の範囲】
【請求項１】 背景画像および背景画像上に配置されるメイン画像を含むページを、マークアップ言語を用いて表現する方法であって、前記背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上に前記メイン画像を配置することを特徴とする方法。
【請求項２】 請求項１において、前記混交画像における透過色部分と不透過色部分との混交状態は、前記背景画像または前記メイン画像の少なくとも一方における構成模様より細かいことを特徴とする方法。
【請求項３】 請求項１又は請求項２において、前記混交画像を構成する各画素につき、隣接する画素のうち少なくとも１つは異なる色の画素であることを特徴とする方法。
【請求項４】 請求項１乃至請求項３の何れか一項において、前記混交画像のファイルサイズは、１ｋＢ以下であることを特徴とする方法。
【請求項５】 請求項１乃至請求項４の何れか一項において、前記不透過色のうち少なくとも一色は、前記背景画像の構成色のうち少なくとも一色と色相及び明度の両者が近い色であり、かつ、前記不透過色のうち少なくとも一色は、前記メイン画像の構成色のうち少なくとも一色と色相又は明度の何れかが遠い色であることを特徴とする方法。
【請求項６】 請求項１乃至請求項５の何れか一項において、前記混交画像は、ＨＴＭＬにおけるテーブルの背景画像として配置されることを特徴とする方法。
【請求項７】 請求項１乃至請求項５の何れか一項において、前記混交画像は、ＨＴＭＬにおけるレイヤーの背景画像として配置されることを特徴とする方法。
【請求項８】 請求項１乃至請求項７の何れか一項に記載の方法を用いて表現されるページをクライアント上のブラウザに提供するサーバ。
【請求項１】 背景画像および背景画像上に配置されるメイン画像を含むページを、マークアップ言語を用いて表現する方法であって、前記背景画像上に、透過色部分と不透過色部分とが混交した混交画像を配置するとともに、当該混交画像上に前記メイン画像を配置することを特徴とする方法。
【請求項２】 請求項１において、前記混交画像における透過色部分と不透過色部分との混交状態は、前記背景画像または前記メイン画像の少なくとも一方における構成模様より細かいことを特徴とする方法。
【請求項３】 請求項１又は請求項２において、前記混交画像を構成する各画素につき、隣接する画素のうち少なくとも１つは異なる色の画素であることを特徴とする方法。
【請求項４】 請求項１乃至請求項３の何れか一項において、前記混交画像のファイルサイズは、１ｋＢ以下であることを特徴とする方法。
【請求項５】 請求項１乃至請求項４の何れか一項において、前記不透過色のうち少なくとも一色は、前記背景画像の構成色のうち少なくとも一色と色相及び明度の両者が近い色であり、かつ、前記不透過色のうち少なくとも一色は、前記メイン画像の構成色のうち少なくとも一色と色相又は明度の何れかが遠い色であることを特徴とする方法。
【請求項６】 請求項１乃至請求項５の何れか一項において、前記混交画像は、ＨＴＭＬにおけるテーブルの背景画像として配置されることを特徴とする方法。
【請求項７】 請求項１乃至請求項５の何れか一項において、前記混交画像は、ＨＴＭＬにおけるレイヤーの背景画像として配置されることを特徴とする方法。
【請求項８】 請求項１乃至請求項７の何れか一項に記載の方法を用いて表現されるページをクライアント上のブラウザに提供するサーバ。
【図１】
【図２】
【図３】
【図４】
【図５】
【図６】
【図７】
【図８】
【図２】
【図３】
【図４】
【図５】
【図６】
【図７】
【図８】
【公開番号】特開２００２−７７５８３（Ｐ２００２−７７５８３Ａ）
【公開日】平成１４年３月１５日（２００２．３．１５）
【国際特許分類】
【出願番号】特願２０００−２６１７８２（Ｐ２０００−２６１７８２）
【出願日】平成１２年８月３０日（２０００．８．３０）
【出願人】（５００４０７８２４）有限会社アーベーセー・ジャポン (1)
【Ｆターム（参考）】
【公開日】平成１４年３月１５日（２００２．３．１５）
【国際特許分類】
【出願日】平成１２年８月３０日（２０００．８．３０）
【出願人】（５００４０７８２４）有限会社アーベーセー・ジャポン (1)
【Ｆターム（参考）】
[ Back to top ]