特開 2017-219954 ホームページの作成を支援する方法、プログラム、記録媒体、および装置

(19)【発行国】日本国特許庁(JP)

(12)【公報種別】公開特許公報(A)

(11)【公開番号】特開2017-219954(P2017-219954A)

(43)【公開日】2017年12月14日

(54)【発明の名称】ホームページの作成を支援する方法、プログラム、記録媒体、および装置

(51)【国際特許分類】

   G06F 13/00 20060101AFI20171117BHJP

   G06F 17/21 20060101ALI20171117BHJP

   G06F 9/44 20060101ALI20171117BHJP

【ＦＩ】

   G06F13/00 560A

   G06F17/21 610

   G06F17/21 620

   G06F9/06 620K

【審査請求】未請求

【請求項の数】16

【出願形態】ＯＬ

【全頁数】67

(21)【出願番号】特願2016-112593(P2016-112593)

(22)【出願日】2016年6月6日

(71)【出願人】

【識別番号】516167624

【氏名又は名称】岡田 泰成

(74)【代理人】

【識別番号】100078282

【弁理士】

【氏名又は名称】山本 秀策

(74)【代理人】

【識別番号】100113413

【弁理士】

【氏名又は名称】森下 夏樹

(74)【代理人】

【識別番号】100181674

【弁理士】

【氏名又は名称】飯田 貴敏

(74)【代理人】

【識別番号】100181641

【弁理士】

【氏名又は名称】石川 大輔

(74)【代理人】

【識別番号】230113332

【弁護士】

【氏名又は名称】山本 健策

(72)【発明者】

【氏名】岡田 泰成

【テーマコード（参考）】

5B084

5B109

5B376

【Ｆターム（参考）】

5B084AA01

5B084AA12

5B084AB04

5B084AB31

5B084AB33

5B084BB01

5B084CA03

5B084CB22

5B084DB02

5B084DC02

5B109NA14

5B109NC01

5B109RB34

5B376BC51

5B376FA13

(57)【要約】      （修正有）

【課題】一般ユーザがホームページの編集画面上で簡単な操作により思い通りのホームページを作成することができるようにホームページの作成を支援する装置を提供する。
【解決手段】ホームページの作成を支援する装置１０が、ユーザ操作に基づいて該ホームページを構成するコンテンツを作成する手段と、新たに作成された新規コンテンツと、既に作成されている既存コンテンツとの位置関係を判定する手段と、該コンテンツの複数のレイアウトルールのうちの該位置関係に適合するレイアウトルールに基づいて該ホームページのソースコードを編集する手段とを備える。
【選択図】図１

【特許請求の範囲】

【請求項1】

ホームページの作成をコンピュータにより支援する方法であって、
該コンピュータが、ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成することと、
該コンピュータが、作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定することと、
該コンピュータが、該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集することと
を含む、方法。

【請求項2】

ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、
該プログラムは、
ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成することと、
作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定することと、
該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集することと
を該コンピュータに実行させるように構成されている、プログラム。

【請求項3】

請求項２に記載のプログラムを記録したコンピュータ読み取り可能な記録媒体。

【請求項4】

ホームページの作成を支援する装置であって、
ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成する手段と、
作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定する手段と、
該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集する手段と
を有する、装置。

【請求項5】

ホームページの作成をコンピュータにより支援する方法であって、
該コンピュータが該ホームページの編集画面を表示することであって、該編集画面はプレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には該１以上のコンテンツの各々に対応する１以上の階層ノードを含む階層構造が表示される、ことと、
該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該コンピュータが、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、
該ソース画面上で該１以上の要素の１つが選択されたとき、該コンピュータが、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、
該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該コンピュータが、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理
のうちの少なくとも１つの表示処理をコンピュータが実行することと
を含む、方法。

【請求項6】

ホームページの作成を支援する処理をコンピュータに行わせるためのプログラムであって、
該ホームページの編集画面を表示することであって、該編集画面は、プレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には、該１以上のコンテンツの各々に対応する１以上の階層ノードを含む階層構造が表示される、ことと、
該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、
該ソース画面上で該１以上の要素の１つが選択されたとき、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、
該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理
のうちの少なくとも１つの表示処理を実行することと
をコンピュータに行わせる、プログラム。

【請求項7】

請求項６に記載のプログラムを記録したコンピュータ読み取り可能な記録媒体。

【請求項8】

ホームページの作成を支援する装置であって、
該ホームページの編集画面を表示する表示手段であって、該編集画面は、プレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には、該１以上のコンテンツの各々に対応する階層ノードを含む階層構造が表示される、表示手段と、
該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該表示手段が、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、
該ソース画面上で該１以上の要素の１つが選択されたとき、該表示手段が、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、
該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該表示手段が、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理
のうちの少なくとも１つの表示処理が行われるように表示手段を制御する制御手段と
を備えた、装置。

【請求項9】

ホームページの作成をコンピュータにより支援する方法であって、該方法は、
該コンピュータが、ユーザの編集操作に基づいて、該ホームページのコンテンツを配置するための複数のブロックを、少なくとも１つのブロックが少なくとも１つの他のブロック内に包含されるように該編集画面上に表示することと、
該コンピュータが、少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザ操作に基づいて、通常編集モードと一括編集モードとの間で切り換えることと、
該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、ユーザの該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対するユーザの編集操作に応じてコンピュータが該親ブロックに含まれるブロックの編集処理を実行することと
を含む、方法。

【請求項10】

ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、
該プログラムは、
該コンピュータが、少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザの編集操作に基づいて一括編集モードと通常編集モードとの間で切り換えることと、
該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対する編集操作に応じてコンピュータが該親ブロックに含まれるブロックの編集処理を実行することと
が行われるように構成されている、プログラム。

【請求項11】

請求項１０に記載のプログラムを記録したコンピュータ読み取り可能な記録媒体。

【請求項12】

ホームページの作成を支援する装置であって、
ユーザの編集操作に基づいて、該ホームページのコンテンツを配置するための複数のブロックを、少なくとも１つのブロックが少なくとも１つの他のブロック内に包含されるように該編集画面上に表示する手段と、
少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザ操作に基づいて、一括編集モードと通常編集モードとの間で切り換える手段と、
該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、ユーザの該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対するユーザの編集操作に応じて該親ブロックに含まれるブロックを編集する手段と
を備えた、装置。

【請求項13】

ホームページの作成をコンピュータにより支援する方法であって、
該コンピュータが、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別することと、
該コンピュータが、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理することと
を含む、方法。

【請求項14】

ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、
該プログラムは、
作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別することと、
判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理することと
を該コンピュータに実行させるように構成されている、プログラム。

【請求項15】

請求項１４に記載のプログラムを記録したコンピュータ読み取り可能な記録媒体。

【請求項16】

ホームページの作成を支援する装置であって、
作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別する手段と、
判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理する手段と
を備えた、装置。

【発明の詳細な説明】

【技術分野】

【0001】

本発明は、ホームページの作成を支援する方法、プログラム、記録媒体、および装置に関し、特に、一般ユーザがホームページの編集画面上で簡単でかつ直感的な操作によりホームページを作成することができるようにホームページの作成を支援する方法、この方法をコンピュータが行うためのプログラム、このプログラムを記録したコンピュータ読取可能な記録媒体、およびこのようなホームページの作成支援を行う装置に関する。

【背景技術】

【0002】

インターネットでは、ウェブサーバが管理する文書（ウェブページ）をユーザ端末のウェブブラウザにより閲覧するためのシステムが構築されており、個人や企業などに関連するウェブページの集まりはウェブサイトと呼ばれ、ユーザ端末からＵＲＬにより特定されるようになっている。ここで、ＵＲＬはユニフォームリソースロケータの略であり、インターネット上の情報（つまり、ウェブサイト）の所在を示す形式的な記号である。

【0003】

なお、ホームページは、本来このようなウェブサイトのトップページを意味していたが、今日では、一般に、ウェブサイトで閲覧できる文書（ウェブページ）がホームページと呼ばれていることから、本願明細書においても、ホームページはウェブページを意味するものとする。

【0004】

ホームページは、ＨＴＭＬ（ハイパーテキスト マークアップ ランゲージ）、ＸＨＴＭＬ（エクステンシブル ハイパーテキスト マークアップ ランゲージ）などの言語で記述されている。

【0005】

例えばＨＴＭＬで記述されたホームページのデータ（ＨＴＭＬファイル）は、ソースコードと呼ばれるテキスト形式のデータであるが、ＨＴＭＬファイルでは、タグと呼ばれる付加情報（ウェブブラウザに対する命令）を使って文字列を整形したり、画像ファイルの格納場所を指示したり、関連ファイルのリンク先を記述したりすることが可能である。

【0006】

しかしながら、一般ユーザがＨＴＭＬで思い通りのホームページを作成するのは困難である。なぜなら、そのようなホームページを作成するには、ユーザはＨＴＭＬ独自の記述ルールを理解して多種多様なタグを使い分けなければならないからである。

【0007】

そこで、従来から、ユーザがパーソナルコンピュータの編集画面上で簡単にホームページを作成できるようにしたアプリケーションソフト（以下、ＨＰ作成支援ソフトという。）が実用化されている。

【0008】

例えば、特許文献１に開示のＨＰ作成支援ソフトは、このＨＰ作成支援ソフトをインストールしたパーソナルコンピュータでは、いくつかのテンプレートがユーザに提示され、テンプレートに対するユーザの入力操作に応じて、ユーザの意図するデザインのホームページのＨＴＭＬファイルが自動的に作成されるよう構成されている。

【0009】

このようなＨＰ作成支援ソフトを用いることにより、専門的な知識を持たないユーザであっても、パーソナルコンピュータの編集画面上での直感的な操作によりホームページを作成することができる。

【0010】

ところが、近年、一般ユーザであっても、より洗練されたホームページを作成することを要望するようになってきていることから、ＨＰ作成支援ソフトには、ユーザの様々な要望に対応できるようにテンプレートが豊富に取り揃えられ、さらにテンプレートにおける個々の要素に対する種々の編集機能が組み込まれるようになってきている。その結果、却って所望の編集機能を実行させるための操作がわかりにくくなっている。さらには、編集の結果、レイアウトが崩れるなど、編集機能の連携も十分ではなかった。

【先行技術文献】

【特許文献】

【0011】

【特許文献1】特開２００３−１４１１０３号公報

【発明の概要】

【発明が解決しようとする課題】

【0012】

上記のように、ホームページの作成は、専門的な知識を持たない一般ユーザには難しく、ＨＰ作成支援ソフトを用いても、一般ユーザが思い通りのホームページを作成するのは簡単ではなかった。

【0013】

この発明は、一般ユーザがホームページの編集画面上で簡単な操作により思い通りのホームページを作成することができるようにホームページの作成を支援する方法、この方法をコンピュータが行うためのプログラム、このプログラムを記録したコンピュータ読取可能な記録媒体、および上記のように一般ユーザによるホームページの作成を支援する装置を得ることを目的とする。

【課題を解決するための手段】

【0014】

本発明に係る方法は、ホームページの作成をコンピュータにより支援する方法であって、該コンピュータが、ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成することと、該コンピュータが、作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定することと、該コンピュータが、該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集することとを含み、そのことにより上記目的が達成される。

【0015】

本発明に係るプログラムは、ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、該プログラムは、ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成することと、作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定することと、該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集することとを該コンピュータに実行させるように構成されており、そのことにより上記目的が達成される。

【0016】

本発明に係る記録媒体は、上述した本発明のプログラムを記録したコンピュータ読み取り可能な記録媒体であり、そのことにより上記目的が達成される。

【0017】

本発明に係る装置は、ホームページの作成を支援する装置であって、ユーザ操作に基づいて、該ホームページのコンテンツを配置するための長方形の枠であるボックスを編集画面上に作成する手段と、作成の対象とした対象ボックスと、該対象ボックスに隣接する既存ボックスとの位置関係を判定する手段と、該ソースコードにおける該対象ボックスおよび該既存ボックスのうちの少なくとも対象ボックスの記述を、該記述が該ボックスの配置を規定する複数のレイアウトルールのうちの、該位置関係に適合するレイアウトルールに応じた記述となるように編集する手段とを有し、そのことにより上記目的が達成される。

【0018】

本発明に係る方法は、ホームページの作成をコンピュータにより支援する方法であって、該コンピュータが該ホームページの編集画面を表示することであって、該編集画面はプレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には該１以上のコンテンツの各々に対応する１以上の階層ノードを含む階層構造が表示される、ことと、該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該コンピュータが、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、該ソース画面上で該１以上の要素の１つが選択されたとき、該コンピュータが、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該コンピュータが、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理のうちの少なくとも１つの表示処理をコンピュータが実行することとを含み、そのことにより上記目的が達成される。

【0019】

本発明に係るプログラムは、ホームページの作成を支援する処理をコンピュータに行わせるためのプログラムであって、該ホームページの編集画面を表示することであって、該編集画面は、プレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には、該１以上のコンテンツの各々に対応する１以上の階層ノードを含む階層構造が表示される、ことと、該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、該ソース画面上で該１以上の要素の１つが選択されたとき、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理のうちの少なくとも１つの表示処理を実行することとをコンピュータに行わせ、そのことにより上記目的が達成される。

【0020】

本発明に係る記録媒体は、上述した本発明のプログラムを記録したコンピュータ読み取り可能な記録媒体であり、そのことにより上記目的が達成される。

【0021】

本発明に係る装置は、ホームページの作成を支援する装置であって、該ホームページの編集画面を表示する表示手段であって、該編集画面は、プレビュー画面とソース画面と階層構造画面とを含み、該プレビュー画面には該ホームページを構成する１以上のコンテンツが表示され、該ソース画面には該ホームページのソースコードを構成する１以上の要素が表示され、該階層構造画面には、該１以上のコンテンツの各々に対応する階層ノードを含む階層構造が表示される、表示手段と、該プレビュー画面上で該１以上のコンテンツの１つが選択されたとき、該表示手段が、該１以上の要素のうちの、選択された該コンテンツに対応する要素を該ソース画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該コンテンツに対応する階層ノードを該階層構造画面上で強調して表示する第１の表示処理、該ソース画面上で該１以上の要素の１つが選択されたとき、該表示手段が、該１以上のコンテンツのうちの、選択された要素に対応するコンテンツを該プレビュー画面上で強調して表示し、かつ、該１以上の階層ノードのうちの、選択された該要素に対応する階層ノードを該階層構造画面上で強調して表示する第２の表示処理、該階層構造画面上で該１以上の階層ノードの１つが選択されたとき、該表示手段が、該１以上のコンテンツのうちの、選択された該階層ノードに対応するコンテンツを該プレビュー画面上で強調して表示し、かつ該１以上の要素のうちの、選択された該階層ノードに対応する要素を該ソース画面上で強調して表示する第３の表示処理のうちの少なくとも１つの表示処理が行われるように表示手段を制御する制御手段とを備え、そのことにより上記目的が達成される。

【0022】

本発明に係る方法は、ホームページの作成をコンピュータにより支援する方法であって、該方法は、該コンピュータが、ユーザの編集操作に基づいて、該ホームページのコンテンツを配置するための複数のブロックを、少なくとも１つのブロックが少なくとも１つの他のブロック内に包含されるように該編集画面上に表示することと、該コンピュータが、少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザ操作に基づいて、通常編集モードと一括編集モードとの間で切り換えることと、該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、ユーザの該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対するユーザの編集操作に応じてコンピュータが該親ブロックに含まれるブロックの編集処理を実行することとを含み、そのことにより上記目的が達成される。

【0023】

本発明に係るプログラムは、ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、該プログラムは、該コンピュータが、少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザの編集操作に基づいて一括編集モードと通常編集モードとの間で切り換えることと、該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対する編集操作に応じてコンピュータが該親ブロックに含まれるブロックの編集処理を実行することとが行われるように構成されており、そのことにより上記目的が達成される。

【0024】

本発明に係る記録媒体は、上述した本発明のプログラムを記録したコンピュータ読み取り可能な記録媒体であり、そのことにより上記目的が達成される。

【0025】

本発明に係る装置は、ホームページの作成を支援する装置であって、ユーザの編集操作に基づいて、該ホームページのコンテンツを配置するための複数のブロックを、少なくとも１つのブロックが少なくとも１つの他のブロック内に包含されるように該編集画面上に表示する手段と、少なくとも１つのブロックを含む親ブロックの編集モードを、ユーザ操作に基づいて、一括編集モードと通常編集モードとの間で切り換える手段と、該親ブロックの編集モードが該一括編集モードであるとき、該親ブロックに含まれるブロックに対する個別の編集操作を禁止し、ユーザの該親ブロックに対する編集操作に応じて、該親ブロックに含まれるブロックを該親ブロックとともに一括して編集し、該親ブロックの編集モードが該通常編集モードであるとき、該親ブロックに含まれるブロックに対するユーザの編集操作に応じて該親ブロックに含まれるブロックを編集する手段とを備え、そのことにより上記目的が達成される。

【0026】

本発明に係る方法は、ホームページの作成をコンピュータにより支援する方法であって、該コンピュータが、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別することと、該コンピュータが、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理することとを含み、そのことにより上記目的が達成される。

【0027】

本発明に係るプログラムは、ホームページの作成を支援する方法をコンピュータにより実行するためのプログラムであって、該プログラムは、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別することと、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理することとを該コンピュータに実行させるように構成されており、そのことにより上記目的が達成される。

【0028】

本発明に係る記録媒体は、上述した本発明のプログラムを記録したコンピュータ読み取り可能な記録媒体であり、そのことにより上記目的が達成される。

【0029】

本発明に係る装置は、ホームページの作成を支援する装置であって、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別する手段と、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理する手段とを備え、そのことにより上記目的が達成される。

【発明の効果】

【0030】

本発明によれば、一般ユーザがホームページの編集画面上で簡単な操作により思い通りのホームページを作成することができるようにホームページの作成を支援する方法、この方法をコンピュータが行うためのプログラム、このプログラムを記録したコンピュータ読取可能な記録媒体、および上記のように一般ユーザによるホームページの作成を支援する装置を実現することができる。

【図面の簡単な説明】

【0031】

【図1】図１は、本発明の実施形態１によるホームページの作成を支援する装置を示す図である。

【図2】図２は、ボックスモデルを説明するための図であり、図２（ａ）は、ＨＴＭＬ要素１の記述の一例を示し、図２（ｂ）は、表示画面上でのＨＴＭＬ要素に対応するデフォルトのボックスＢの配置を示し、図２（ｃ）は、ボックスＢのスタイルを指定する記述Ｄｃを示し、図２（ｄ）は、表示画面上でのスタイルが指定されたボックスＢの配置を示す。

【図3】図３は、ＨＴＭＬ要素にＣＳＳを適用する方法を説明するための図であり、図３（ａ）は、ＨＴＭＬ要素毎にＣＳＳを適用する方法（第１の方法）を示し、図３（ｂ）は、複数のＨＴＭＬ要素に一括してＣＳＳを適用する方法（第２の方法）を示し、図３（ｃ）は、ＣＳＳを適用するＨＴＭＬ要素を指定するための記述を示す。

【図4】図４は、複数のＨＴＭＬ要素に対応する複数のボックスの位置関係を説明するための図であり、図４（ａ）は、複数のＨＴＭＬ要素を含むソースコードを示し、図４（ｂ）は、各ＨＴＭＬ要素の内容がブラウザにより表示された状態を示し、図４（ｃ）は、複数のＨＴＭＬ要素の各々に対応するボックスを示す。

【図5】図５は、スタイルが適用されていないブロックボックスのレイアウトルールを説明するための図であり、図５（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図５（ｂ）は、このホームページの表示状態を示す。

【図6】図６は、第１の方法でスタイルが適用されたブロックボックスの通常レイアウトルールを説明するための図であり、図６（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図６（ｂ）は、このホームページの表示状態を示す。

【図7】図７は、第２の方法でスタイルが適用されたブロックボックスの通常レイアウトルールを説明するための図であり、図７（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図７（ｂ）は、このホームページの表示状態を示す。

【図8】図８は、第１の方法でスタイルが適用されたブロックボックスの通常外レイアウトルールを説明するための図であり、図８（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図８（ｂ）は、このホームページの表示状態を示す。

【図9】図９は、第２の方法でスタイルが適用されたブロックボックスの通常外レイアウトルールを説明するための図であり、図９（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図９（ｂ）は、このホームページの表示状態を示す。

【図10】図１０は、スタイルが適用されていないインラインボックスのレイアウトルールを説明するための図であり、図１０（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図１０（ｂ）は、このホームページの表示状態を示す。

【図11】図１１は、第１の方法でスタイルが適用されたインラインボックスの通常レイアウトルールを説明するための図であり、図１１（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図１１（ｂ）は、このホームページが表示された状態を示す。

【図12】図１２は、第２の方法でスタイルが適用されたインラインボックスの通常レイアウトルールを説明するための図であり、図１２（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図１２（ｂ）は、このホームページが表示された状態を示す。

【図13】図１３は、第１の方法でスタイルが適用されたインラインボックスの通常外レイアウトルールを説明するための図であり、図１３（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図１３（ｂ）は、このホームページが表示された状態を示す。

【図14】図１４は、第２の方法でスタイルが適用されたインラインボックスの通常外レイアウトルールを説明するための図であり、図１４（ａ）は、２つのコンテンツを含むホームページのソースコードを示し、図１４（ｂ）は、このホームページが表示された状態を示す。

【図15】図１５は、ＨＰ作成支援装置１０により提供されるホームページの編集画面を示す図である。

【図16】図１６は、図１５に示す編集画面上でブロックボックスが作成された状態を示す図である。

【図17】図１７は、図１６に示す編集画面上のブロックボックスの横幅が設定された状態を示す図である。

【図18】図１８は、テキスト編集画面ＴＳｅを示す図である。

【図19】図１９は、図１６に示す編集画面上のブロックボックスにコンテンツが入力された状態を示す図である。

【図20】図２０は、図１９に示すブロックボックスの高さ、左側および上側の内側余白、並びに左側および上側の外側余白が設定された状態を示す図である。

【図21】図２１は、図２０に示す編集画面Ｓｅ上で２つ目のブロックボックスが１つ目のブロックボックスの下側に作成された状態を示す図である。

【図22】図２２は、図２１に示す２つ目のブロックボックスにコンテンツが入力された状態を示す図である。

【図23】図２３は、図２１に示す２つ目のブロックボックスを１つ目のブロックボックスの右側に移動させた状態を示す図である。

【図24】図２４は、図２３に示す２つ目のブロックボックスにコンテンツが入力された状態を示す図である。

【図25】図２５は、編集画面上で、幅、高さ、左側および上側の内側余白、並びに左側および上側の外側余白が設定された１つ目のブロックボックスが作成された状態を示す図である。

【図26】図２６は、テキスト編集画面にコンテンツが入力された状態を示す図である。

【図27】図２７は、図２５に示すブロックボックスにコンテンツが入力された状態を示す図である。

【図28】図２８は、図２７に示すブロックボックス内の２つのコンテンツがインラインボックスの通常レイアウトルールに従って配置されている状態を示す図である。

【図29】図２９は、図２７に示すブロックボックス内の２つのコンテンツがインラインボックスの通常外レイアウトルールに従って配置されている状態を示す図である。

【図30】図３０は、ボックスのレイアウトルールに従ってＨＴＭＬ要素を生成する処理をフローチャートで示す図である。

【図31】図３１は、本発明の実施形態２によるＨＰ作成支援装置２０を説明するための図である。

【図32】図３２は、図３１に示すＨＰ作成支援装置２０の表示部１４ａに表示される編集画面Ｓｅ２を示す図である。

【図33】図３３は、図３２に示す編集画面Ｓｅ２内のプレビュー画面Ｒｅｐ、ソース画面Ｒｃｅ、および階層構造画面Ｒｈｄでの表示内容を関連付ける仕組みを説明するための図である。

【図34】図３４は、ソース要素マップＭｓｅを示す図である。

【図35】図３５は、ＤＯＭ要素マップＭｄｅを説明するための図であり、図３５（ａ）は、ソース要素とＤＯＭ要素との対比を示し、図３５（ｂ）はＤＯＭ要素マップＭｄｅの構造を示す。

【図36】図３６は、階層構造情報Ｄｈｓを説明するための図であり、図３６（ａ）は、ソース要素とＤＯＭ要素との対比を示し、図３６（ｂ）は階層構造情報Ｄｈｓを具体的に示す。

【図37】図３７は、ソース画面Ｒｃｅに表示されるソースコードＳｃのテキストエディッタへの入力を概念的に示す図である。

【図38】図３８は、編集画面Ｓｅ２のソース画面ＲｃｅにソースコードＳｃが表示された状態を示す図である。

【図39】図３９は、入力されたソースコードＳｃの分析によりソースコードに含まれる個々のＨＴＭＬ要素が認識された状態を示す図である。

【図40】図４０は、ブラウザによるソースコードの読み込みを概念的に示す図である。

【図41】図４１は、ブラウザによるソースコードＳｃの読み込みにより編集画面Ｓｅ２のプレビュー画面Ｒｅｐにコンテンツが表示された状態を示す図である。

【図42】図４２は、ブラウザによるソースコードの読み込みの際にブラウザ依存の機能により生成されるブラウザ上ＤＯＭ（ＨＴＭＬ要素の階層構造）Ｅｈ１を示す図である。

【図43】図４３は、ソース要素マップＭｓｅのＨＴＭＬ要素とブラウザ上ＤＯＭ（階層構造）のＨＴＭＬ要素との対比により表示用要素ガイドが生成される様子を示す図である。

【図44】図４４は、表示用要素ガイドを説明するための図であり、図４４（ａ）は表示用要素ガイドがプレビュー画面Ｒｅｐのコンテンツに適用される様子を概念的に示し、図４４（ｂ）は、表示用要素ガイドがコンテンツに適用された状態を示し、図４４（ｃ）は、表示用要素ガイドにガイド記号が付与された状態を示している。

【図45】図４５は、ブラウザ上ＤＯＭ（ＨＴＭＬ要素の階層構造）Ｅｈ１がソース要素と整合したＤＯＭ構造（階層構造）Ｅｈに変換される様子を示す図である。

【図46】図４６は、ＤＯＭ構造の階層ノードに対するシンボルの割り当て、およびシンボルに対するガイド記号の割り当てを概念的に示す図である。

【図47】図４７は、ＤＯＭ構造の階層ノードに割り当てられたシンボルが階層構造画面Ｒｈｄに反映される様子を概念的に示す図である。

【図48】図４８は、ソース画面ＲｃｅのあるＨＴＭＬ要素がクリックされた場合にプレビュー画面Ｒｅｐの対応するコンテンツおよび階層構造画面Ｒｈｄの対応する階層ノードがハイライトされる様子を示す図である。

【図49】図４９は、プレビュー画面Ｒｅｐのあるコンテンツがクリックされた場合に、ソース画面Ｒｃｅの対応するＨＴＭＬ要素および階層構造画面Ｒｈｄの対応する階層ノードがハイライトされる様子を示す図である。

【図50】図５０は、階層構造画面Ｒｈｄのあるシンボルがクリックされた場合に、ソース画面Ｒｃｅの対応するＨＴＭＬ要素およびプレビュー画面Ｒｅｐの対応するコンテンツがハイライトされる様子を示す図である。

【図51】図５１は、本発明の実施形態３によるＨＰ作成支援装置３０を説明するための図である。

【図52】図５２は、図５１に示すＨＰ作成支援装置３０の表示部１４ａに表示される編集画面Ｓｅを示す図である。

【図53】図５３は、図５２に示す編集画面Ｓｅのプレビュー画面Ｒｅｐのみを拡大して示す図である。

【図54】図５４は、図５１に示すＨＰ作成支援装置３０の動作を説明するための図であり、個別編集モードのブロックに含まれるブロック（子ブロック）をコピーした状態を示す。

【図55】図５５は、図５１に示すＨＰ作成支援装置３０の動作を説明するための図であり、ブロックを含むブロック（親ブロック）の編集モードを個別編集モードから一括編集モードに切り替えたときのプレビュー画面での表示の変化を示す。

【図56】図５６は、図５１に示すＨＰ作成支援装置３０の動作を説明するための図であり、一括編集モードの親ブロックをコピーした状態を示す。

【図57】図５７は、図５１に示すＨＰ作成支援装置３０の動作を説明するための図であり、一括編集モードの親ブロックをコピーした後に元の親ブロックの編集モードを個別編集モードに戻したときのプレビュー画面での表示の変化を示す。

【図58】図５８は、図５１に示すＨＰ作成支援装置３０の動作を説明するための図であり、コンピュータが編集対象のブロックの編集モードに従ってユーザの編集操作に応じた処理を実行する処理をフローチャートで示す図である。

【図59】図５９は、本発明の実施形態４によるＨＰ作成支援装置４０を説明するための図である。

【図60】図６０は、この実施形態４のＨＰ作成支援装置４０の表示部１４ａに表示される編集画面Ｓｅを示す図である。

【図61】図６１は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、スタイル設定処理Ｓ４００〜Ｓ４０７でコンテンツに種々のスタイルを設定したときのソースコードの変化を示す。

【図62】図６２は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、スタイル設定処理Ｓ４０８〜Ｓ４１０でコンテンツに種々のスタイルを設定したときのソースコードの変化を示す。

【図63】図６３は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、図６３（ａ）は、コンテンツのソースコードを整理するための１サイクル目の分析を示し、図６３（ｂ）は、ソースコードの１サイクル目の整理結果を示す。

【図64】図６４は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、図６４（ａ）はコンテンツのソースコードを整理するための２サイクル目の分析を示し、図６４（ｂ）は、ソースコードの２サイクル目の整理結果を示す。

【図65】図６５は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、図６５（ａ）はコンテンツのソースコードを整理するための３サイクル目の分析を示し、図６５（ｂ）は、ソースコードの３サイクル目の整理結果を示す。

【図66】図６６は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、図６６（ａ）はコンテンツのソースコードを整理するための４サイクル目の分析を示し、図６６（ｂ）は、ソースコードの４サイクル目の整理結果を示す。

【発明を実施するための形態】

【0032】

本願は、一般ユーザがホームページの編集画面上で簡単でかつ直感的な操作によりホームページを作成することができるようにホームページの作成を支援する４つの発明を含んでいる。

【0033】

第１の発明は、ホームページの編集画面上でホームページがデザインされたとき、そのデザインのホームページをブラウザで表示するためのソースコードを生成する方法である。

【0034】

第２の発明は、ホームページの編集画面として、ホームページを構成するコンテンツを表示するためのプレビュー画面と、ホームページのソースコードを表示するためのソース画面と、コンテンツの階層構造を表示する階層構造画面とを表示し、ホームページのコンテンツとソース画面の要素と階層構造のノードとをこれらの相互の対応関係が認識されるように関連付けるものである。

【0035】

第３の発明は、ホームページの編集画面上でコンテンツを配置するための複数のブロックが、少なくとも１つのブロックが他のブロック内に含まれるように配置されたとき、ブロックに対する編集操作を、他のブロックに含まれる個々のブロック単位での操作とするか、他のブロック単位での操作とするかを切り替えるようにしたものである。

【0036】

第４の発明は、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別し、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理するものである。

【0037】

以下、本発明の実施形態について説明する。

【0038】

上述した第１〜第４の発明と以下の実施形態（図面）との対応関係は以下のとおりである。

【0039】

第１の発明：実施形態１（図１〜３０）
第２の発明：実施形態２（図３１〜図５０）
第３の発明：実施形態３（図５１〜図５８）
第４の発明：実施形態４（図５９〜図６６）
（実施形態１）
本発明の実施形態１は、ホームページの作成をコンピュータにより支援する方法であり、ホームページの編集画面上でデザインされたホームページのコンテンツを、ボックスモデルのレイアウトルールに従ってソースコードに変換するものであるが、ホームページ作成の支援に用いる装置の概要を説明した後、本題のホームページのコンテンツをソースコードに変換する方法を具体的に説明する前に、前提となるボックスモデルの考え方、ボックスのスタイルを規定するのに用いられる代表的なスタイルシートであるＣＳＳ、ボックスモデルのレイアウトルールを説明する。

【0040】

その後、本題のホームページの作成方法、およびコンピュータによるホームページの作成支援処理を説明する。

【0041】

この実施形態の説明の流れを以下の実施形態１の目次で示す。

【0042】

〔実施形態１の目次〕
（１）ボックスモデル〔図２〕
（１−１）要素
（１−２）ボックス
（２）ＣＳＳの適用方法〔図３〜図４〕
（２−１）第１の方法
（２−２）第２の方法
（３）ボックスのレイアウトルール〔図５〜図１４〕
（３−１）ブロックボックスのレイアウトルール〔図５〜図９〕
（３−２）インラインボックスのレイアウトルール〔図１０〜図１４〕
（４）ホームページの作成方法
（４−１）編集画面の説明〔図１５〕
（４−２）ブロック要素のソースコードの作成〔図１６〜図２４〕
（４−３）インライン要素のソースコードの作成〔図２５〜図２９〕
（５）ホームページの作成処理（図３０）
以下、詳細に実施形態１を説明する。

【0043】

図１は、本発明の実施形態１によるホームページの作成を支援する装置（以下、ＨＰ作成支援装置ともいう。）１０を示す。

【0044】

この実施形態１のＨＰ作成支援装置１０は、情報の処理を行うコンピュータ１０ａと、ユーザの操作によりコンピュータ１０ａに操作情報Ｓを入力するための入力操作部１３ａと、コンピュータ１０ａからの表示データＤに基づいて画像を表示する表示部１４ａとを有する。

【0045】

コンピュータ１０ａは、プロセッサ１１と、メモリ１２と、入力インターフェース１３と、出力インターフェース１４と、入出力インターフェース１５と、ネットワーク制御部１６とを含む。プロセッサ１１とメモリ１２と入力インターフェース１３と出力インターフェース１４と入出力インターフェース１５とネットワーク制御部１６とは、データバス１７を介して相互に接続されている。入力操作部１３ａは、キーボード、マウス、タッチパネルなどの入力デバイスを含み、これらの入力デバイスは入力インターフェース１３に接続されている。出力インターフェース１４には、表示部１４ａとしての液晶ディスプレイなどの表示装置が接続されている。入出力インターフェース１５には外部記憶装置１５ａなどが接続されている。ネットワーク制御部１６にはインターネットなどのネットワークＮが接続されている。なお、入力インターフェース１３には、スキャナなども入力デバイスとして接続され得る。また、出力インターフェース１４にはプリンタなどが接続され得る。

【0046】

ここで、メモリ１２には、プロセッサ１１に入力操作部１３ａからの操作信号Ｓに基づいてホームページの作成の支援を行わせるプログラムが格納されており、プロセッサ１１は、メモリ１２に格納されているプログラムにより操作信号Ｓに基づいてホームページの作成を支援する処理を実行する。また、メモリ１２には、プロセッサ１１をテキストエディッタとして機能させたり、ブラウザとして機能させたりするための一般的なオペレーションシステムが格納されていることは言うまでもない。

【0047】

ホームページの作成を支援する処理は、ホームページを編集するための編集画面Ｓｅを表示部１４ａに表示する処理と、ユーザ操作による操作信号Ｓに基づいてホームページを構成する１以上のコンテンツの入力、描画、あるいは貼り付けを行う処理と、編集画面Ｓｅ上でのコンテンツの作成状況に合わせてソースコードをボックスモデルに従って生成する処理とを含む。

【0048】

従って、ユーザがＨＰ作成支援装置１０を用いてホームページを作成する場合、ユーザは、ホームページのソースコードを編集する必要はなく、ユーザは、ＨＰ作成支援装置１０の編集画面Ｓｅの所望の領域でテキストを入力したり、画像の描画や貼付けを行ったりするだけで、イメージ通りのデザインのホームページを直感的に作成することができる。

【0049】

以下、上記目次に従って具体的な説明を行う。

【0050】

（１）ボックスモデル
まず、ボックスモデルについて説明する。

【0051】

ボックスモデルは、ホームページのソースコードを構成する１以上の要素の各々に長方形の枠（以下、ボックスという。）が設定されており、要素の内容（つまりホームページを構成するコンテンツとして表示される部分）は、ボックスの内部に配置されているという考え方である。従って、ボックスモデルを用いてホームページを作成する場合、ボックスのレイアウトルールやボックスの属性値（ボックスの高さや幅、隣接するボックスとの間隔など）により要素の内容（コンテンツ）の位置決めが可能である。

【0052】

ここで、要素にはブロック要素とインライン要素とがある。ブロック要素は、ホームページのコンテンツを定義する要素であり、インライン要素は、ホームページのコンテンツに所定の役割を与える要素である。ブロック要素が生成するボックスがブロックボックスであり、ブロックボックスは、ブロック要素の内容全体を含む長方形の枠である。インライン要素が生成するボックスがインラインボックスであり、インラインボックスは、インライン要素の内容全体を含む高さが１行分の帯状の枠である。

【0053】

図２は、ボックスモデルを説明するための図であり、図２（ａ）は、ＨＴＭＬ要素１の記述の一例を示し、図２（ｂ）は、表示画面上でのＨＴＭＬ要素に対応するデフォルトのボックスＢの配置を示し、図２（ｃ）は、ボックスＢのスタイルを指定する記述Ｄｃを示し、図２（ｄ）は、表示画面上でのスタイルが指定されたボックスＢの配置を示す。

【0054】

（１−１）要素
ソースコードは、ＨＴＭＬ（ハイパーテキスト マークアップ ランゲージ）やＸＨＴＭＬ（エクステンシブル ハイパーテキスト マークアップ ランゲージ）などのマークアップ言語で記述されている。なお、マークアップ言語は、コンピュータ言語の一種で、文章の構造（段落など）や見栄え（フォントサイズなど）に関する指定を文章とともにテキストファイルに記述するための言語である。

【0055】

例えば、ＨＴＭＬで記述されたソースコード（ＨＴＭＬソース）に含まれる個々の要素（ＨＴＭＬ要素）は、表示すべき内容を開始タグと終了タグとで挟み込んで得られる記述である。例えば、図２（ａ）に示すｐ要素１は、表示すべき内容「テキスト」２を開始タグ「＜ｐ＞」３と終了タグ「＜／ｐ＞」４とで挟み込んで得られた記述Ｄｈからなる。

【0056】

なお、この明細書では、ＨＴＭＬ要素という表現は、ＨＴＭＬで記述されたすべての要素を包括的に示すもの、ｈｔｍｌ要素という表現は、内容をｈｔｍｌタグである「＜ｈｔｍｌ＞」および「＜／ｈｔｍｌ＞」で挟み込んで得られる記述（ソースコード）を示すものとして使い分けるものとする。

【0057】

（１−２）ボックス
図２（ａ）に示すｐ要素１の記述「＜ｐ＞テキスト＜／ｐ＞」Ｄｈをブラウザで読み込むと、図２（ｂ）に示すように、ｐ要素１の内容「テキスト」２が表示される。ｐ要素１に対しては、図２（ｂ）に示すようにブラウザの表示画面（以下、単に表示画面ともいう。）Ｓｄ上に長方形の枠（ボックス）Ｂが設定されているが、図２（ａ）に示すｐ要素１の記述Ｄｈでは、ボックスＢの幅や高さが設定されていないので、ボックスＢは表示画面Ｓｄの横幅一杯に広がっており、ボックスＢの高さはブラウザでのデフォルト値となっている。また、図２（ａ）に示すｐ要素１の記述Ｄｈでは、ボックスＢの境界の幅や色が設定されていないため、ｐ要素１の記述Ｄｈをブラウザで読み込んでも、図２（ｂ）に示すように、表示画面Ｓｄにはｐ要素１の内容「テキスト」２のみしか表れず、ｐ要素１に対応するボックスＢは存在しないように見える。なお、図２（ｂ）では、説明の都合上、実際には見えないｐ要素１に対応するボックスＢを二点鎖線で示している。

【0058】

このようなｐ要素１に対応するボックスＢ（図２（ｂ））の幅および高さ、さらにボックスの外縁に対する内容（コンテンツ）の位置などのボックスの属性を規定することにより、配置すべき位置を示す情報を持たないコンテンツをボックスのレイアウトルールに従って配置することができる。

【0059】

なお、ＨＴＭＬ要素のボックスの属性の設定には、タグを用いることができ、さらにＨＴＭＬ要素に対するスタイルを規定するスタイルシートを用いることもできる。スタイルシートは、ＨＴＭＬとは別の言語であり、スタイルシートを用いることでＨＴＭＬ要素のスタイルを効率よく規定することができる。代表的なスタイルシートとしては、ＣＳＳ（カスケードスタイルシート）が挙げられる。さらに、スタイルシートは、２以上のボックスの位置関係（レイアウト）を指定することも可能である。また、隣接するボックスの位置関係（レイアウト）は、スタイルシートに代えて特定のタグ（例えば、ｂｒタグ「＜ｂｒ／＞」）により指定することもできる。

【0060】

例えば、図２（ｃ）に示す属性情報Ｄｃは、ｐ要素１に対応するボックスＢのスタイル（属性）を規定する情報である。この属性情報ＤｃによりボックスＢのスタイルを規定すると、ボックスＢには、図２（ｄ）に示すように、ｐ要素１の内容「テキスト」２が表示される部分（内容領域）Ｒｃと、内容領域Ｒｃの周囲に位置するボックスの境界Ｒｂと、内容領域Ｒｃとボックスの境界Ｒｂとの間の余白（パディング領域）Ｒｐと、ボックスの境界Ｒｂと他のボックスの境界との間の余白（マージン領域）Ｒｍとが規定される。

【0061】

具体的には、ボックスＢの内容領域Ｒｃの横幅Ｗおよび高さＨは、属性情報Ｄｃの横幅プロパティ「ｗｉｄｔｈ：５０ｐｘ」および高さプロパティ「ｈｅｉｇｈｔ：２０ｐｘ」で指定される。ボックスＢのパディング領域Ｒｐの幅Ｄｐは、属性情報Ｄｃのパディングプロパティ「ｐａｄｄｉｎｇ：２０ｐｘ」で指定され、ボックスＢのマージン領域Ｒｍの幅Ｄｍは、属性情報Ｄｃのマージンプロパティ「ｍａｒｇｉｎ：２０」で指定される。

【0062】

（２）ＣＳＳの適用方法
次に、ＣＳＳをＨＴＭＬ要素に適用する方法を具体的に説明する。

【0063】

ＣＳＳをＨＴＭＬ要素に適用する方法は２つあり、以下、それぞれの方法を、図２（ａ）に示すｐ要素１を例に挙げて簡単に説明する。

【0064】

図３は、ＨＴＭＬ要素にＣＳＳを適用する方法を説明するための図であり、図３（ａ）は、ＨＴＭＬ要素毎にＣＳＳを適用する方法（第１の方法）を示し、図３（ｂ）は、複数のＨＴＭＬ要素に一括してＣＳＳを適用する方法（第２の方法）を示し、図３（ｃ）は、ＣＳＳを適用するＨＴＭＬ要素を指定するための記述を示す。

【0065】

（２−１）第１の方法
例えば、図３（ａ）に示すように、ソースコードのｈｅａｄ要素Ｈ０の中で宣言要素（＜ＭＥＴＡ ｈｔｔｐ−ｅｑｕｉｖ＝“Ｃｏｎｔｅｎｔ−Ｓｔｙｌｅ−Ｔｙｐｅ” ｃｏｎｔｅｎｔ＝“ｔｅｘｔ／ｃｓｓ”＞）Ｄ０によりＣＳＳをスタイルシートとして宣言し、ｂｏｄｙ要素Ｂ０の中で、図２（ａ）に示すｐ要素１の開始タグ３にｓｔｙｌｅ属性３１を付加し、ｓｔｙｌｅ属性３１の属性値として属性情報Ｄｃを設定することで、ｐ要素１にＣＳＳが適用される。

【0066】

（２−２）第２の方法
この方法は、図３（ｂ）に示すように、ソースコードのｈｅａｄ要素Ｈａの中で宣言要素（＜ｓｔｙｌｅ ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞）ＤｅによりＣＳＳをスタイルシートとして宣言し、ｂｏｄｙ要素Ｂａの中でＣＳＳを適用するという方法である。ただし、ｂｏｄｙ要素Ｂａの中でＣＳＳを適用するには、ｂｏｄｙ要素Ｂａの中のどのＨＴＭＬ要素のどの属性をどのような状態にするかを指定する必要があり、そのために、スタイルを設定するための記述Ｅｓが用いられる。スタイルを設定するための記述Ｅｓは、図３（ｃ）に示すように、セレクタＤｓ、プロパティＤｃｐ、値Ｄｃｖを含む。プロパティＤｃｐおよび値Ｄｃｖにより、図３（ｂ）に示すように、ＨＴＭＬ要素にＣＳＳを適用するための属性情報Ｄｃ（図２（ｃ）参照）が作成される。ここで、セレクタＤｓはスタイルを設定する対象となる要素を示し、プロパティＤｃｐは設定の対象となる属性を示し、値Ｄｃｖは属性をどのような状態に設定するかを示す値である。従って、第２の方法では、ｂｏｄｙ要素Ｂａの中でスタイルを設定する必要はない。このため、多くの要素を含むｂｏｄｙ要素内での記述を分かりやすくできる。

【0067】

なお、このようなボックスは、すべてのＨＴＭＬ要素に対して存在するので、以下、１つのホームページのソースコードに複数のＨＴＭＬ要素が含まれている場合に各ＨＴＭＬ要素に設定されるボックスの位置関係を簡単に説明する。

【0068】

図４は、ホームページのソースコードに含まれる複数の要素が形成する複数のボックスの位置関係を説明するための図である。

【0069】

図４（ａ）に示すソースコードＳ１には、ＨＴＭＬ要素として、ｂｏｄｙ要素Ｅ１、ｄｉｖ要素Ｅ２、ｐ要素Ｅ３、ｕ要素Ｅ４が含まれている。このソースコードＳ１をブラウザで読み込んだ場合、表示画面Ｓｄには、図４（ｂ）に示すように、内容（１）Ｃ１、内容（２）Ｃ２、内容（３）Ｃ３、内容（４）Ｃ４が表示される。このとき、図４（ｃ）に示すように、各ＨＴＭＬ要素、つまり、ｂｏｄｙ要素Ｅ１、ｄｉｖ要素Ｅ２、ｐ要素Ｅ３、ｕ要素Ｅ４のそれぞれに対して、ボックスＢ１、Ｂ２、Ｂ３、Ｂ４が確保されている。ここで、ｂｏｄｙ要素Ｅ１、ｄｉｖ要素Ｅ２、ｐ要素Ｅ３はブロック要素であり、ｕ要素Ｅ４はインライン要素である。

【0070】

このようなＨＴＭＬ要素が生成するボックスは、配置されるべき位置を示す情報を持たないが、これらのボックスは、ＨＴＭＬ要素へのボックスのレイアウトに関する情報（ＣＳＳなどのスタイルシートやｂｒタグなどの特定のタグによる情報）の適用に応じて通常レイアウトルールあるいは通常外レイアウトルールに従って表示画面Ｓｄ上で位置決めされる。
（３）ボックスのレイアウトルール
次に、ボックスのレイアウトルールを具体的に説明する。

【0071】

（３−１）ブロックボックスのレイアウトルール
図５は、ブロック要素に対してＣＳＳが適用されていない場合のブロックボックスのレイアウトルール（通常レイアウトルール）を説明するための図である。

【0072】

図５（ａ）に示すソースコードＳｃａは、タイトル要素「サンプルａ」を含むｈｅａｄ要素Ｈｄａと、これに続くｂｏｄｙ要素Ｂｄａとを含む。ｂｏｄｙ要素Ｂｄａ内には、ブロック要素である２つのｐ要素Ｅｍ１ａおよびＥｍ２ａが続けて記述されている。ｐ要素Ｅｍ１ａの内容（コンテンツ）Ｃ１ａは、「この段落の横幅は、１６０ｐｘで、高さは、８０ｐｘです。」であり、ｐ要素Ｅｍ２ａの内容（コンテンツ）Ｃ２ａは、「この段落の横幅は、１００ｐｘで、高さは、１００ｐｘです。」である。

【0073】

これらのブロック要素Ｅｍ１ａ、Ｅｍ２ａにＣＳＳが適用されていない場合、ブロック要素Ｅｍ１ａ、Ｅｍ２ａに対応する２つのブロックボックスＢｘ１ａ、Ｂｘ２ａは、図５（ｂ）に示すように、ブロックボックスの通常レイアウトルールに従って配置される。具体的には、ブロック要素Ｅｍ２ａに対応するブロックボックスＢｘ２ａは、ブラウザの表示画面Ｈｐａ上で、ブロック要素Ｅｍ２ａの前に記述されたブロック要素Ｅｍ１ａに対応するブロックボックスＢｘ１ａの下側に配置される。ただし、この場合、ブロックボックスＢｘ１ａおよびＢｘ２ａは表示されず、表示画面Ｈｐａには、ブロックボックスＢｘ１ａおよびＢｘ２ａ内に位置するコンテンツＣ１ａおよびＣ２ａのみが上下に並んで表示される。

【0074】

図６は、第１の方法でブロック要素に対してＣＳＳが適用されている場合のブロックボックスの通常レイアウトルールを説明するための図である。

【0075】

図６（ａ）に示すソースコードＳｃｂ１は、タイトル要素「サンプルｂ１」を含むｈｅａｄ要素Ｈｄｂ１に続くｂｏｄｙ要素Ｂｄｂ１に含まれる２つのブロック要素（ｐ要素）Ｅｍ１ｂおよびＥｍ２ｂに対して、第１の方法（図３（ａ）参照）でＣＳＳが適用されている点で図５（ａ）に示すソースコードＳｃａとは実質的に異なる。

【0076】

従って、ブロック要素Ｅｍ１ｂ、Ｅｍ２ｂに対応するブロックボックスＢｘ１ｂ、Ｂｘ２ｂでは、図６（ｂ）に示すように、適用されたＣＳＳに従って、横幅、高さ、パディング領域の幅、マージン領域の幅が設定されている。

【0077】

ただし、これらのブロック要素Ｅｍ１ｂ、Ｅｍ２ｂに対しては、対応するブロックボックスＢｘ１ｂ、Ｂｘ２ｂのレイアウトはＣＳＳにより指示されていないので、後続のブロック要素Ｅｍ２ｂに対応するブロックボックスＢｘ２ｂは、通常レイアウトルールに従って先に記述されているブロック要素Ｅｍ１ｂに対応するブロックボックスＢｘ１ｂの下側に配置される。この場合、表示画面Ｈｐｂには、コンテンツＣ１ｂ、Ｃ２ｂが対応するブロックボックスＢｘ１ｂ、Ｂｘ２ｂ内に収まるように上下に並んで表示される。ただし、ブロックボックスＢｘ１ｂ、Ｂｘ２ｂは表示されない。

【0078】

なお、図７は、第２の方法でブロック要素に対してＣＳＳを適用した場合のブロックボックスの通常レイアウトルールを示している。図７（ａ）に示すソースコードＳｃｂ２は、第２の方法でＣＳＳを適用した点以外は図６（ａ）に示すソースコードＳｃｂ１と同一である。具体的には、ソースコードＳｃｂ２では、ｈｅａｄ要素Ｈｄｂ２の中で、宣言要素（＜ｓｔｙｌｅ ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞）ＤｅによりＣＳＳを宣言し、ｔｅｓｔ１属性Ｄｓ１ｂ、ｔｅｓｔ２属性Ｄｓ２ｂで、適用したいスタイルを宣言し、宣言したスタイルを各ブロック要素Ｅｎ１ｂ、Ｅｎ２ｂのｃｌａｓｓ属性により指定することで、ｂｏｄｙ要素Ｂｄｂ２の中でＣＳＳを適用している。なお、このソースコードＳｃｂ２に基づく表示（図７（ｂ））は、ソースコードＳｃｂ１に基づく表示（図６（ｂ））と同一である。

【0079】

図８は、第１の方法でブロック要素に対してＣＳＳが適用されている場合のブロックボックスの通常外レイアウトルールを説明するための図である。

【0080】

図８（ａ）に示すソースコードＳｃｃ１では、タイトル要素「サンプルｃ１」を含むｈｅａｄ要素Ｈｄｃ１に続くｂｏｄｙ要素Ｂｄｃ１に含まれる２つのブロック要素（ｐ要素）Ｅｍ１ｃおよびＥｍ２ｃには、ブロックボックスのレイアウトも指定されている点で、図６（ａ）に示すソースコードＳｃｂ１と異なる。

【0081】

具体的には、ｐ要素Ｅｍ１ｃ、Ｅｍ２ｃでは、ｐ要素Ｅｍ１ｃ、Ｅｍ２ｃが生成するブロックボックスＢｘ１ｃ、Ｂｘ２ｃの横幅、高さ、パディングおよびマージンの指定に加えて、ｐ要素Ｅｍ２ｃに対応するブロックボックスＢｘ２ｃを、ｐ要素Ｅｍ２ｃの前に記述されたｐ要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの右側に配置することがレイアウト情報「ｆｌｏａｔ：ｌｅｆｔ」により指定されている。

【0082】

このソースコードＳｃｃ１によれば、後のブロック要素Ｅｍ２ｃに対応するブロックボックスＢｘ２ｃは、図８（ｂ）に示すように、ＣＳＳが規定するブロックボックスの１つの通常外レイアウトルールに従って、表示画面Ｈｐｃで前のブロック要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの右側に左上方向に詰めて配置される。この場合、表示画面Ｈｐｃには、コンテンツＣ１ｃ、Ｃ２ｃが、対応するブロックボックスＢｘ１ｃ、Ｂｘ２ｃ内に収まるように左右に並んで表示される。ただし、ブロックボックスＢｘ１ｃ、Ｂｘ２ｃは表示されない。

【0083】

ただし、この通常外レイアウトルールによれば、表示画面上に、前のブロック要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの右側に後のブロック要素Ｅｍ２ｃに対応するブロックボックスＢｘ２ｃ全体を配置するスペースがない場合は、後のブロック要素Ｅｍ２ｂに対応するブロックボックスＢｘ２ｃは、前のブロック要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの下側に配置される。

【0084】

なお、通常外レイアウトルールは、後のブロック要素Ｅｍ２ｃに対応するブロックボックスＢｘ２ｃを、前のブロック要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの右側に配置するものに限定されず、通常外レイアウトルールは、例えば、後のブロック要素Ｅｍ２ｃに対応するブロックボックスＢｘ２ｃを、前のブロック要素Ｅｍ１ｃに対応するブロックボックスＢｘ１ｃの左側あるいは上側に配置するものでもよい。その場合は、レイアウト情報「ｆｌｏａｔ：ｒｉｇｈｔ」などのブロックボックスのレイアウトを指定する情報が用いられ得る。

【0085】

また、図９は、第２の方法でブロック要素に対してＣＳＳを適用した場合のブロックボックスの通常外レイアウトルールを示している。図９（ａ）に示すソースコードＳｃｃ２は、第２の方法でＣＳＳを適用した点以外は図８（ａ）に示すソースコードＳｃｃ１と同一である。具体的には、ソースコードＳｃｃ２では、ｈｅａｄ要素Ｈｄｃ２の中で、宣言要素（＜ｓｔｙｌｅ ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞）ＤｅによりＣＳＳを宣言し、ｔｅｓｔ１属性Ｄｓ１ｃ、ｔｅｓｔ２属性Ｄｓ２ｃでブロックボックスのレイアウトを含むスタイルを宣言し、各ブロック要素Ｅｎ１ｃ、Ｅｎ２ｃのｃｌａｓｓ属性で、宣言したスタイルを指定することにより、ｂｏｄｙ要素Ｂｄｃ２の中でＣＳＳを適用している。なお、このソースコードＳｃｃ２に基づく表示（図９（ｂ））は、ソースコードＳｃｃ１に基づく表示（図８（ｂ））と同一である。

【0086】

（３−２）インラインボックスのレイアウトルール
図１０は、インライン要素に対してＣＳＳが適用されていない場合のインラインボックスのレイアウトルール（通常レイアウトルール）を説明するための図である。

【0087】

インラインボックスの通常レイアウトルールによれば、ＨＴＭＬにより記述された文書において記述順に並ぶ複数のインライン要素に対応する複数のインラインボックスは、基本的に、後のインライン要素に対応する後のインラインボックスが先のインライン要素に対応する先のインラインボックスの右側に行を変えずに続けて配置される。ただし、表示画面Ｈｐｄ上に、先のインラインボックスの右側に後のインラインボックスの全体を配置するスペースがない場合は、先のインラインボックスの右側には、後のインラインボックスの先頭部分のみが配置され、後のインラインボックスの残りの部分は、行を変えて先のインラインボックスの下側に配置される。

【0088】

例えば、図１０（ａ）に示すソースコードＳｃｄは、タイトル要素「サンプルｄ」を含むｈｅａｄ要素Ｈｄｄと、これに続くｂｏｄｙ要素Ｂｄｄとを含む。ｂｏｄｙ要素Ｂｄｄ内には、２つのインライン要素Ｅｍ１ｄ、Ｅｍ２ｄが含まれている。これらのインライン要素にＣＳＳが適用されていない場合、表示画面Ｈｐｄ上には、図１０（ｂ）に示すように、２つのインライン要素Ｅｍ１ｄ、Ｅｍ２ｄのコンテンツＣ１ｄ、Ｃ２ｄは、通常レイアウトルールに従って表示画面Ｈｐｄ上に左上端から、文章を横書きするときの経路に沿って並ぶように表示される。ここで、インライン要素Ｅｍ１ｄの内容（コンテンツ）Ｃ１ｄは、「このボックスは、ｕインラインボックスです。（下線付き）」であり、インライン要素Ｅｍ２ｄの内容（コンテンツ）Ｃ２ｄは、「このボックスは、ｂインラインボックスです。（太字表示）」である。

【0089】

図１１は、第１の方法でインライン要素に対してＣＳＳが適用されている場合のインラインボックスの通常レイアウトルールを説明するための図である。

【0090】

図１１（ａ）に示すソースコードＳｃｅ１は、タイトル要素「サンプルｅ１」を含むｈｅａｄ要素Ｈｄｅ１に続くｂｏｄｙ要素Ｂｄｅ１に含まれる各要素Ｅｍ１ｅ、Ｅｍ２ｅに対して第１の方法（図３（ａ）参照）でＣＳＳが適用されている点で、図１０（ａ）に示すソースコードＳｃｄとは実質的に異なる。

【0091】

従って、インライン要素Ｅｍ１ｅ、Ｅｍ２ｅに対応するインラインボックスＢｘ１ｅ、Ｂｘ２ｅでは、図１１（ｂ）に示すように、適用されたＣＳＳに従って、行の間隔、パディング、マージンが設定されている。

【0092】

ただし、これらのインライン要素Ｅｍ１ｅ、Ｅｍ２ｅに対しては、対応するインラインボックスのレイアウトはＣＳＳにより指示されていないので、各インライン要素Ｅｍ１ｅ、Ｅｍ２ｅに対応するインラインボックスＢｘ１ｅ、Ｂｘ２ｅは、図１１（ｂ）に示すように、インラインボックスの通常レイアウトルールに従って、ＣＳＳを設定していない場合と同様に、後のインライン要素Ｅｍ２ｅに対応するインラインボックスＢｘ２ｅが文章の横書きの経路に沿って先のインライン要素Ｅｍ１ｅに対応するインラインボックスＢｘ１ｅの右側に配置される。ただし、インラインボックスＢｘ１ｅの右側にインラインボックスＢｘ２ｅの全体を配置するスペースがないときは、インラインボックスＢｘ２ｅの表示画面Ｈｐｅからはみ出す部分が次の行に配置される。この場合も、表示画面Ｈｐｅには、インラインボックスＢｘ１ｅ、Ｂｘ２ｅは表示されず、コンテンツＣ１ｅ、Ｃ２ｅが、対応するインラインボックスＢｘ１ｅ、Ｂｘ２ｅ内に収まるように文章の横書きの経路に沿って表示される。

【0093】

なお、図１２は、第２の方法でインライン要素に対してＣＳＳを適用した場合のインラインボックスの通常レイアウトルールを示している。図１２（ａ）に示すソースコードＳｃｅ２は、第２の方法でＣＳＳを適用した点以外は図１１（ａ）に示すソースコードＳｃｅ１と同一である。具体的には、ソースコードＳｃｅ２では、ｈｅａｄ要素Ｈｄｅ２の中で、宣言要素（＜ｓｔｙｌｅ ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞）ＤｅによりＣＳＳを宣言し、ｔｅｓｔ属性Ｄｓｅで、適用したいスタイルを宣言し、インライン要素Ｅｎ１ｅ、Ｅｎ２ｅのｃｌａｓｓ属性で、宣言したスタイル属性を指定することにより、ｂｏｄｙ要素Ｂｄｅ２の中でＣＳＳを適用している。なお、このソースコードＳｃｅ２に基づいた表示（図１２（ｂ））は、ソースコードＳｃｅ１に基づいた表示（図１１（ｂ））と同一である。

【0094】

図１３は、第１の方法でインライン要素に対してＣＳＳが適用され、レイアウトの指定にｂｒタグが用いられている場合のインラインボックスの通常外レイアウトルールを説明するための図である。

【0095】

図１３（ａ）に示すソースコードＳｃｆ１は、タイトル要素「サンプルｆ１」を含むｈｅａｄ要素Ｈｄｆ１に続くｂｏｄｙ要素Ｂｄｆ１に含まれる２つのインライン要素Ｅｍ１ｆ、Ｅｍ２ｆに加えて、これらのインライン要素Ｅｍ１ｆ、Ｅｍ２ｆの間に、インラインボックスのレイアウトを指定するように配置されたｂｒタグ「＜ｂｒ／＞」Ｅｍ１２を含む点で、図１１（ａ）に示すソースコードＳｃｅ１と基本的に異なる。具体的には、図１３（ｂ）に示すように、先に記述されたインライン要素Ｅｍ１ｆに対応する先のインラインボックスＢｘ１ｆの右側に、後続のインライン要素Ｅｍ２ｆに対する後のインラインボックスＢｘ２ｆの全体を配置するスペースがない場合は、先のインラインボックスＢｘ１ｄの下側に後のインラインボックスＢｘ２ｆが配置される。

【0096】

この場合も、表示画面Ｈｐｆには、コンテンツＣ１ｆ、Ｃ２ｆが、対応するインラインボックスＢｘ１ｆ、Ｂｘ２ｆ内に収まるように表示され、インラインボックスＢｘ１ｆ、Ｂｘ２ｆは表示されない。

【0097】

なお、図１４は、第２の方法でインライン要素に対してＣＳＳを適用し、さらにレイアウトの指定にｂｒタグを用いた場合のインラインボックスの通常外レイアウトルールを示している。図１４（ａ）に示すソースコードＳｃｆ２は、第２の方法でＣＳＳを適用した点以外は図１３（ａ）に示すソースコードＳｃｆ１と同一である。具体的には、ソースコードＳｃｆ２では、ｈｅａｄ要素Ｈｄｆ２の中で、宣言要素（＜ｓｔｙｌｅ ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”＞）ＤｅによりＣＳＳを宣言し、ｔｅｓｔ属性Ｄｓｆで、インラインボックスのレイアウトではないスタイルを宣言し、各要素Ｅｎ１ｆ、Ｅｎ２ｆのｃｌａｓｓ属性で、宣言したスタイルを指定することにより、ｂｏｄｙ要素Ｂｄｆ２の中でＣＳＳを適用している。さらにインラインボックスＢｘ１ｆ、Ｂｘ２ｆのレイアウトが、２つのインライン要素Ｅｎ１ｆ、Ｅｎ２ｆの間に位置するｂｒタグ「＜ｂｒ／＞」Ｅｎ１２により規定されている。

【0098】

なお、このソースコードＳｃｆ２に基づいた表示（図１４（ｂ））は、ソースコードＳｃｅ１に基づいた表示（図１３（ｂ））と同一である。

【0099】

また、インラインボックスの通常外レイアウトルールは、上記のように、既存のインラインボックスの下側に新たなインラインボックスを配置するルールに限定されず、特定のタグにより、場合によってはＣＳＳにより自由に設定することができる。例えば、既存のインラインボックスの上側などに新たなインラインボックスを配置してもよい。

【0100】

（４）ホームページの作成方法
次に、ユーザが図１に示すＨＰ作成支援装置１０を用いてホームページを作成する方法を説明する。

【0101】

上述したようにソースコードのすべてのＨＴＭＬ要素が表示画面上で所定のレイアウトルールに従ってボックスを生成し、ＨＴＭＬ要素の内容がボックス内に表示されることから、このＨＰ作成支援装置１０は、ユーザ操作に基づいて、編集画面Ｓｅ上でコンテンツを表示するための領域をボックスとして設定し、このボックス内に作成されたコンテンツに対応するＨＴＭＬ要素の記述をレイアウトルールに従って生成するように構成されている。

【0102】

（４−１）編集画面の説明
図１５は、ＨＰ作成支援装置１０により提供されるホームページの編集画面を示す図である。

【0103】

編集画面Ｓｅは、ホームページのコンテンツを作成するための操作画面Ｒｅｏと、作成されたコンテンツを表示するためのプレビュー画面Ｒｅｐと、ホームページの編集に用いる素材を選択するための素材選択画面Ｒｅｓと、ソースコードを編集するためのソース画面Ｒｃｅとを含んでいる。

【0104】

操作画面Ｒｅｏには、複数の操作ボタンＢｕ１〜Ｂｕ６と、数値を入力するための複数の値入力領域Ｖ１〜Ｖ２、Ｐ１〜Ｐ４、Ｍ１〜Ｍ４とが配置されている。

【0105】

操作ボタンＢｕ１は、新規ブロックボックスを作成するための作成ボタン、操作ボタンＢｕ２は、作成されたブロックボックス内にコンテンツとしてのテキストを入力するための編集ボタン、操作ボタンＢｕ３は、選択したボックスを複写するためのコピーボタン、操作ボタンＢｕ４は、選択したボックスを削除するための削除ボタン、操作ボタンＢｕ５は、ボックス内に含まれる複数のボックスの各々に対する個別の操作を禁止するためのロックボタン、操作ボタンＢｕ６は、ボックスの輪郭（パディング領域の外縁）を表す線（外線）の表示と非表示とを切り替えるための切替ボタンである。なお、操作ボタンＢｕ５の機能については、実施形態３で、コンテンツを配置するための領域（実施形態３ではブロックという。）に対する操作を一括操作と個別操作とで切り換える発明として詳しく説明する。

【0106】

値入力領域Ｖ１は、ボックスの幅（内容領域の幅にその左右の内側余白の大きさ、つまりその左右のパディング領域の幅を加えた値）を示す数値を入力するための領域、値入力領域Ｖ２は、ボックスの高さ（内容領域の高さにその上下の内側余白の大きさ、つまりその上下のパディング領域の幅を加えた値）を示す数値を入力するための領域である。値入力領域Ｐ１〜Ｐ４はボックスの内側余白（パディング領域の幅）を設定する数値を入力するための領域であり、値入力領域Ｐ１、Ｐ１、Ｐ３、Ｐ４に入力された数値により、ボックスの左側、上側、右側、下側の内側余白が設定される。値入力領域Ｍ１〜Ｍ４は、ボックスの外側余白（マージン領域の幅）を設定する数値を入力するための領域であり、値入力領域Ｍ１、Ｍ２、Ｍ３、Ｍ４に入力された数値により、ボックスの左側、上側、右側、下側の外側余白が設定される。

【0107】

プレビュー画面Ｒｅｐには、作成されたコンテンツおよびコンテンツに対して設定されているボックスが表示される。ただし、ボックスは操作ボタンＢｕ６の操作により表示したり非表示としたりすることができる。

【0108】

素材選択画面Ｒｅｓには、例えば複数の素材Ｃｅ１〜Ｃｅ４が表示されており、これらの素材には、予めこのＨＰ作成支援装置１０で作成されたもの、あるいはインターネット上のサイトからダウンロードしたもの、あるいは記録メディアから複写したものなどが含まれ得る。これらの素材は、編集画面Ｓｅ上でコンテンツとして用いられるものであり、それぞれの素材毎に、素材をホームページのコンテンツとして表示画面上で表示するためのソースコードがメモリ１２に格納されている。なお、素材は図１５などに示すものに限定されず、ホームページのコンテンツとして利用できるものであればどのようなものでもよい。

【0109】

ソース画面Ｒｃｅには、編集画面Ｓｅ上でのコンテンツの作成段階に応じたソースコードが表示される。コンテンツの作成前の初期状態では、ソース画面Ｒｃｅには、ＣＳＳの適用の宣言（略記）を含むｈｅａｄ要素Ｓｒｈ０と、空のｂｏｄｙ要素Ｓｒｂ０とを含むソースコードＳｒ０が表示されている。

【0110】

なお、図１５を用いて説明した編集画面Ｓｅは、編集画面の一例であり、操作ボタンＢｕ１〜Ｂｕ６の配列、さらにプレビュー画面Ｒｅｐ、ソース画面Ｒｃｅ、素材選択画面Ｒｅｓの配置や形状は図１５に示したものに限定されない。プレビュー画面Ｒｅｐとソース画面Ｒｃｅとは上下に並べて配置するのではなく、左右に配置してもよく、素材選択画面Ｒｅｓはなくてもよい。操作ボタンが配置された操作領域Ｒｅｏも必ずしも決められた位置に配置する必要はなく、マウスの右クリックなどの操作により編集画面Ｓｅ上の任意の位置に現れるようにしてもよい。

【0111】

（４−２）ブロック要素のソースコードの作成
まず、ユーザが図６（ｂ）（あるいは図７（ｂ））に示すように、上下に配置された２つのコンテンツＣ１ｂ、Ｃ２ｂを含むホームページを作成する場合を説明する。

【0112】

ユーザは、ＨＰ作成支援装置１０の編集画面Ｓｅを開き、作成ボタンＢｕ１を操作する。この作成ボタンＢｕ１の操作により、図１６に示すように、編集画面Ｓｅのプレビュー画面Ｒｅｐには、このプレビュー画面Ｒｅｐの幅いっぱいに広がった新規ブロックボックスＢｒ１ａが作成され、ソース画面Ｒｃｅには、新規ブロックボックスＢｒ１ａの作成が反映されたソースコードＳｒ１ａが生成される。

【0113】

このソースコードＳｒ１ａのｂｏｄｙ要素には、新規ブロックボックスＢｒ１ａに対応する記述が、ｄｉｖ要素「＜ｄｉｖ＞＜／ｄｉｖ＞」Ｅｒ１ａとして形成される。なお、ブロックボックスに対応する記述は、意味（スタイル）を持たないｄｉｖ要素に限定されず、ｐ要素など意味を持つ他のブロック要素でもよいが、このＨＰ作成支援装置１０では、ブロック要素に対してｃｌａｓｓ属性で後からＣＳＳなどのスタイルシートを用いて意味を持たせるときの自由度が制限されないように、新たに作成するブロック要素には基本的に意味を持たないｄｉｖ要素を用いるようにしている。

【0114】

この状態で、編集画面Ｓｅの値入力領域Ｖ１に数値「１６０」を入力すると、ブロックボックスＢｒ１ａの幅が設定される。これにより、図１７に示すように、プレビュー画面Ｒｅｐに表示されているブロックボックスＢｒ１ａ（図１６参照）はその横幅が設定されたブロックボックスＢｒ１ｂに変化する。また、ソース画面Ｒｃｅでは、ソースコードＳｒ１ａのｄｉｖ要素Ｅｒ１ａの編集により、ｄｉｖ要素「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１６０”＞＜／ｄｉｖ＞」Ｅｒ１ｂを含むソースコードＳｒ１ｂが作成される。

【0115】

次に、ユーザがテキストを入力する対象として、作成した新規ブロックボックスＢｒ１ａをプレビュー画面Ｒｅｐ上でのクリック操作により選択し、編集ボタンＢｕ２を操作すると、図１８に示すように、テキスト編集画面ＴＳｅが表示され、テキスト情報の入力が可能となる。

【0116】

テキスト編集画面ＴＳｅには、テキスト入力領域Ｄｔｘと、操作ボタンＢｕ２１〜Ｂｕ２４を含むボタン配置領域Ｒｂｕとが含まれている。なお、操作ボタンＢｕ２１は、テキストの選択部分に下線を付すためのボタン、操作ボタンＢｕ２２は、テキストの選択部分を斜体にするためのボタン、操作ボタンＢｕ２３は、テキストの選択部分を太字にするためのボタン、操作ボタンＢｕ２４は入力したテキストデータをブロックボックスＢｒ１ｂに表示されるようにするための保存ボタンである。ただし、操作ボタンはこれらに限定されず、テキストの色や背景色を設定するためのボタン、テキストに他のスタイルを設定するためのボタンなどが設けられていてもよい。

【0117】

ユーザがテキスト入力領域Ｄｔｘに、例えばコンテンツとして「この段落の横幅は、１６０ｐｘで、高さは、８０ｐｘです。」と入力し、保存ボタンＢｕ２４を操作すると、図１９に示すように、プレビュー画面Ｒｅｐに表示された新規ブロックボックスＢｒ１ｂ（図１７参照）が、コンテンツ「この段落の横幅は、１６０ｐｘで、高さは、８０ｐｘです。」Ｃｒ１を含むブロックボックスＢｒ１ｃに変更され、ソース画面ＲｃｅではソースコードＳｒ１ｂがソースコードＳｒ１ｃに変更される。ソースコードＳｒ１ｃでは、ソースコードＳｒ１ｂのｂｏｄｙ要素内のｄｉｖ要素「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１６０”＞＜／ｄｉｖ＞」Ｅｒ１ｂが、ｄｉｖ要素「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１６０”＞この段落の横幅は、１６０ｐｘで、高さは、８０ｐｘです。＜／ｄｉｖ＞」Ｅｒ１ｃに変化している。

【0118】

なお、ブロックボックスの横幅あるいは高さの一方のみを指定した状態では、ブロックボックスへのテキストの入力によりテキストの占有領域がブロックボックス内に収まらなくなると、ブロックボックスは、横幅あるいは高さのうちのそのサイズが指定されていない方向に沿ってテキストの入力に伴って拡張する。

【0119】

さらに、編集画面Ｓｅの値入力領域Ｖ２、Ｐ１、Ｐ２、Ｍ１、Ｍ２にそれぞれ数値「８０」、「１０」、「１０」、「１０」、「１０」を入力すると、ブロックボックスＢｒ１ｃの高さ、左側の内側余白、上側の内側余白、左側の外側余白、上側の外側余白が設定される。これにより、図２０に示すように、プレビュー画面Ｒｅｐでは、横幅のみが設定された新規ブロックボックスＢｒ１ｃ（図１９参照）が、横幅、高さ、左側および上側の内側余白、左側および上側の外側余白が設定された新規ブロックボックスＢｒ１ｄに変化し、ソース画面ＲｃｅではソースコードＳｒ１ｃがソースコードＳｒ１ｄに変更される。ソースコードＳｒ１ｄでは、ｄｉｖ要素Ｅｒ１ｄの記述は、「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１５０ ｈ７０ ｐｔ０１０ ｐｌ０１０ ｍｔ０１０ ｍｌ０１０”＞この段落の横幅は、１６０ｐｘで、高さは、８０ｐｘです。＜／ｄｉｖ＞」に変化しており、編集画面Ｓｅでの数値の入力が反映されている。

【0120】

その後、例えば、２つ目のコンテンツを作成するために、操作ボタンＢｕ１を押すと、１つ目のブロックボックスＢｒ１ｄの下側に図１６に示すように新規ブロックボックスが配置され、この新規ブロックボックスに対して横幅「１００」、高さ「１００」、左側の外側余白「１０」、上側の外側余白「１０」を設定すると、図２１に示すように、新規ブロックボックスが横幅「１００」、高さ「１００」、左側の外側余白「１０」、上側の外側余白「１０」が設定されたブロックボックスＢｒ２ａとなる。このとき、新規ブロックボックスの生成に応じて、ソース画面Ｒｃｅでは、ソースコードＳｒ１ｄ（図２０参照）がソースコードＳｒ１ｅに変更される。この場合の既存のブロックボックスＢｒ１ｄに対する新規ブロックボックスＢｒ２ａの配置は、図６および図７で説明したように通常レイアウトルールに従った配置であるので、ソースコードＳｒ１ｅでは、ブロックボックスＢｒ２ａに対応する要素として、ブロックボックスのレイアウトを指定する情報を含まないｄｉｖ要素Ｅｒ２ａが生成される。ｄｉｖ要素Ｅｒ２ａの記述は、「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１００ ｈ１００ ｍｔ０１０ ｍｌ１０”＞＜／ｄｉｖ＞」である。

【0121】

その後は、新たに作成したブロックボックスＢｒ２ａ内にテキストの入力を行い、さらに左側の内側余白「１０」、上側の内側余白「１０」を設定すると、図２２に示すように、プレビュー画面Ｒｅｐでは、コンテンツＣｒ１およびＣｒ２が上下に配置されたホームページが作成され、ソース画面Ｒｃｅでは、ｄｉｖ要素Ｅｒ２ａがｄｉｖ要素Ｅｒ２ｂに変更されることにより、ソースコードＳｒ１ｅ（図２１参照）がソースコードＳｒ１ｆに変更される。ここで、ｄｉｖ要素Ｅｒ２ｂの記述は、「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ９０ ｈ９０ ｐｔ０１０ ｐｌ０１０ ｍｔ０１０ ｍｌ０１０”＞この段落の横幅は、１００ｐｘで、高さは、１００ｐｘです。＜／ｄｉｖ＞」である。

【0122】

一方、ユーザが図８（ｂ）（あるいは図９（ｂ））に示すように、左右に配置された２つのコンテンツＣ１ｃ、Ｃ２ｃを含むホームページを作成する場合は、図２１に示すように既存のブロックボックスＢｒ１ｄの下側に新規ブロックボックスＢｒ２ａを作成した後、図２３に示すように、この新規ブロックボックスＢｒ２ａを既存のブロックボックスＢｒ１ｄの右側にマウスのドラッグ操作などにより移動させると、ソース画面ＲｃｅではソースコードＳｒ１ｅがソースコードＳｒ１ｇに変更される。なお、移動後の新規ブロックボックスＢｒ２ａは、説明の都合上、ブロックボックスＢｒ２ｃとする。

【0123】

この場合、既存のブロックボックスＢｒ１ｄに対する移動後の新規ブロックボックスＢｒ２ｃの配置は、通常外レイアウトルールの１つに従った配置であるので、ソースコードＳｒ１ｇでは、ブロックボックスＢｒ２ｃに対応する要素として、ブロックボックスのレイアウトを指定する情報「ｆ１」を含むｄｉｖ要素Ｅｒ２ｃが生成される。ｄｉｖ要素Ｅｒ２ｃの記述は、「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ１００ ｈ１００ ｍｔ０１０ ｍｌ１０ ｆ１”＞＜／ｄｉｖ＞」である。

【0124】

また、既存のブロックボックスＢｒ１ｄに対応するｄｉｖ要素Ｅｒ１ｄも、ｄｉｖ要素Ｅｒ１ｄの記述にブロックボックスのレイアウトを指定する情報「ｆ１」を付加した記述のｄｉｖ要素Ｅｒ１ｅに書き換えられる。さらに、ｄｉｖ要素Ｅｒ２ｃに続くＨＴＭＬ要素として、ブロックボックスが強制的に横並びに配置される情報「ｆ１」による効果を阻止するためのｄｉｖ要素Ｅｒ２１が生成される。ｄｉｖ要素Ｅｒ２１の記述は「＜ｄｉｖ ｃｌａｓｓ＝“ｒ３”＞＜ｄｉｖ＞」である。

【0125】

その後は、新たに作成したブロックボックスＢｒ２ｃにテキストの入力を行い、左側の内側余白「１０」、上側の内側余白「１０」を設定することにより、図２４に示すように、コンテンツＣｒ１およびＣｒ２が左右に配置されたホームページが作成され、同時にソースコードＳｒ１ｇがソースコードＳｒ１ｈに変化する。具体的には、ｄｉｖ要素Ｅｒ２ｃは、ｄｉｖ要素Ｅｒ２ｄ「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ９０ ｈ９０ ｐｔ０１０ ｐｌ１０ ｍｔ０１０ ｍｌ１０ ｆ１”＞この段落の横幅は、１００ｐｘで、高さは、１００ｐｘです。＜／ｄｉｖ＞」に変化する。

【0126】

なお、ブロックボックスＢｒ１ｄおよびＢｒ２ｃ内へのテキストの入力などのブロックボックスに対する編集は、これらのブロックボックスを作成した後は随時行うことができ、ブロックボックスの領域をクリックしてテキストの入力対象とするブロックボックスを選択し、その後編集ボタンＢｕ２を押すことによりテキスト編集画面ＴＳｅが表示され、選択したブロックボックスへのテキストの入力が可能となる。

【0127】

さらに、上記コンテンツの作成の説明では、ブロックボックスの中に他のブロックボックスが配置されている場合は示していないが、１つのブロックボックス内に少なくとも１つの他のブロックボックスが含まれる場合でも、それぞれのブロックボックスに対するテキストの入力などの編集操作は、上述したようにブロックボックスに他のブロックボックスが含まれていない場合と同様に行われる。ここで、ブロックボックスの中にブロックボックスを配置する方法は、例えば、ブロックボックスをクリックなどにより選択した状態で、作成ボタンＢｕ１を押すことによりブロックボックス内にブロックボックスが配置される。既存のブロックボックスを選択せずに作成ボタンＢｕ１を押した場合は、新たなブロックボックスは既存のブロックボックスの下側に配置される。

【0128】

また、ブロックボックスに他のブロックボックスが含まれる階層的なブロックボックスの配置は、ブロックボックスに他のブロックボックスが含まれ、さらに他のブロックボックスにその他のブロックボックスが含まれるといった複数階層の配置となっていてもよい。

【0129】

（４−３）インライン要素のソースコードの作成
例えば、ユーザが図１１（ｂ）（あるいは図１２（ｂ））に示すように、２つのコンテンツＣ１ｅ、Ｃ２ｅを含むホームページを作成する場合、ユーザは作成ボタンＢｕ１を操作する。この作成ボタンＢｕ１の操作により、図１６に示すように、編集画面Ｓｅには新規ブロックボックスＢｒ１ａが作成され、編集画面Ｓｅのプレビュー画面Ｒｅｐには、作成された新規ブロックボックスＢｒ１ａが表示される。また、ソース画面Ｒｃｅでは、ソースコードＳｒ１ａのｂｏｄｙ要素内に、新規ブロックボックスＢｒ１ａに対応するｄｉｖ要素「＜ｄｉｖ＞＜／ｄｉｖ＞」Ｅｒ１ａが付加される。

【0130】

この状態で、例えば、編集画面Ｓｅの値入力領域Ｖ１、Ｖ２、Ｐ１、Ｐ２、Ｍ１、Ｍ２に数値「５３０」、「８０」、「１０」、「１０」、「１０」、「１０」を入力すると、ブロックボックスＢｒ１ａの幅、高さ、左側の内側余白、上側の内側余白、左側の外側余白、上側の外側余白が設定される。これにより、図２５に示すように、プレビュー画面Ｒｅｐには、幅、高さ、左側の内側余白、上側の内側余白、左側の外側余白、上側の外側余白が設定された新規ブロックボックスＢｒ３が表示される。ソース画面Ｒｃｅに表示されたソースコードＳｒ３には、ｄｉｖ要素「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ５２０ ｈ７０ ｐｔ０１０ ｐｌ０１０ ｍｔ０１０ ｍｌ０１０”＞＜／ｄｉｖ＞」Ｅｒ３が生成される。なお、上述したように、装置の仕様上、ソースコードに示されるブロックボックスの幅、高さは、編集画面Ｓｅの値入力領域Ｖ１、Ｖ２に示される幅、高さから、設定された左右、上下の内部余白の値を差し引いた値となっている。

【0131】

次に、ユーザがテキストを入力する対象として、作成した新規ブロックボックスＢｒ３をプレビュー画面Ｒｅｐ上でのクリック操作により選択し、編集ボタンＢｕ２を操作すると、テキスト編集画面ＴＳｅが表示され、テキスト情報の入力が可能となる。

【0132】

図２６に示すように、テキスト編集画面ＴＳｅのテキスト入力領域Ｄｔｘに、例えばコンテンツ「このボックスは、ｕインラインボックスです。このボックスは、ｂインラインボックスです。」を入力すると、プレビュー画面ＲｅｐのブロックボックスＢｒ３内には、図２７に示すように、１つのコンテンツ「このボックスは、ｕインラインボックスです。このボックスは、ｂインラインボックスです。」Ｃｒ３が生成される。コンテンツＣｒ３が生成されたとき、編集画面Ｓｅのソース画面Ｒｃｅに表示されたソースコードＳｒ３０には、ｄｉｖ要素「＜ｄｉｖ ｃｌａｓｓ ＝ “ｗ５２０ ｈ７０ ｐｔ０１０ ｐｌ０１０ ｍｔ０１０ ｍｌ０１０”＞このボックスは、ｕインラインボックスです。このボックスは、ｂインラインボックスです。＜／ｄｉｖ＞」Ｅｒ３０が含まれている。

【0133】

さらにそのコンテンツの前半の記述「このボックスは、ｕインラインボックスです。」に操作ボタンＢｕ２１により下線を付し、その後半の記述「このボックスは、ｂインラインボックスです。」を操作ボタンＢｕ２３により太字にして保存ボタンＢｕ２４を操作すると、図２８に示すように、プレビュー画面Ｒｅｐに表示された新規ブロックボックスＢｒ３の内部に、２つのコンテンツＣｒ３ａおよびＣｒ３ｂを含むコンテンツＣｒ３１が表示される。このようにブロックボックスＢｒ３内に表示されるブロック要素のコンテンツＣｒ３のスタイル（下線付き文字や太字文字など）を設定することにより、スタイルを規定するタグに対応してインラインボックスが生成される。

【0134】

この場合は、２つのコンテンツＣｒ３ａ、Ｃｒ３ｂはインライン要素の内容であり、これらのコンテンツは、対応するインラインボックスＢｒ３ａ、Ｂｒ３ｂ内に表示される。

【0135】

これらのインラインボックスＢｒ３ａ、Ｂｒ３ｂの配置は、後続のインライン要素に対応するインラインボックスが、先のインライン要素に対応するインラインボックスと同じ行に、このインラインボックスの右側に続けて配置された通常レイアウトルールに一致した配置である。従って、ソースコードＳｒ３１では、これらのインライン要素Ｅｒ３ａ、Ｅｒ３ｂの記述は、図２８に示すように、これらのインラインボックスＢｒ３ａ、Ｂｒ３ｂの位置関係を示す情報を含まない記述となっている。なお、インライン要素Ｅｒ３ａにおけるｓｐａｎ要素のｃｌａｓｓ属性の属性値“ｅ１”は、ＣＳＳによりアンダーラインを指定する属性値であり、インライン要素Ｅｒ３ｂにおけるｓｐａｎ要素のｃｌａｓｓ属性の属性値“ｔｗ１”は、ＣＳＳにより太字を指定する属性値である。

【0136】

一方、図２８に示すように２つのコンテンツＣｒ３ａ、Ｃｒ３ｂが横書きの経路に沿って並んでいる状態で、後のコンテンツＣｒ３ｂをマウスのドラッグ操作により、図２９に示すように、２つのコンテンツＣｒ３ａ、Ｃｒ３ｂが上下に並ぶように移動させた場合は、これらのコンテンツはインラインボックスの通常外レイアウトルールの１つに従うこととなる。この場合、図２９に示すように、プレビュー画面Ｒｅｐに表示された新規ブロックボックスＢｒ３の内部に、上下に配置された２つのコンテンツＣｒ３ａおよびＣｒ３ｂを含むコンテンツＣｒ３２が表示される。ソースコードＳｒ３２では、これらのインライン要素Ｅｒ３ｃ、Ｅｒ３ｄの記述は、これらのインラインボックスＢｒ３ａ、Ｂｒ３ｂの位置関係を示す情報を含むこととなる。具体的には、インライン要素として、ｓｐａｎ要素Ｅｒ３ｃ、Ｅｒ３ｄがインラインボックスＢｒ３ｃ、Ｂｒ３ｄのレイアウトを指定する情報（ｂｒタグ「＜ｂｒ ／＞」）Ｅｒｃｄを挟むようにこれらのｓｐａｎ要素Ｅｒ３ｃ、Ｅｒ３ｄが生成される。なお、インライン要素Ｅｒ３ｃにおけるｓｐａｎ要素のｃｌａｓｓ属性の属性値“ｅ１”は、ＣＳＳによりアンダーラインを指定する属性値であり、インライン要素Ｅｒ３ｄにおけるｓｐａｎ要素のｃｌａｓｓ属性の属性値“ｔｗ１”は、ＣＳＳにより太字を指定する属性値である。

【0137】

なお、インラインボックスＢｒ３ａおよびＢｒ３ｂ内へのテキストの入力などの編集も、ブロックボックスの場合と同様にこれらのインラインボックスが作成された後は随時行うことができる。

【0138】

次に、ＨＰ作成支援装置１０のコンピュータ１０ａで、編集画面Ｓｅでのコンテンツの位置関係に基づいてコンテンツに対応するＨＴＭＬ要素の記述を生成する処理を説明する。

【0139】

なお、図１５〜図２９に示すソースコードは、このＨＰ作成支援装置１０に特有のソースコードであり、このＨＰ作成支援装置１０でホームページのソースコードが完成した後、特有のソースコードは、図５〜図１４で説明した一般的なソースコードに自動的に変換される。

【0140】

具体的には、図２２に示すホームページのソースコードＳｒ１ｆは、図６（ａ）あるいは図７（ａ）に示すソースコードＳｃｂ１あるいはＳｃｂ２に変換される。図２４に示すホームページのソースコードＳｒ１ｈは、図８（ａ）あるいは図９（ａ）に示すソースコードＳｃｃ１あるいはＳｃｃ２に変換される。

【0141】

図２８に示すホームページのソースコードＳｒ３１は、図１１（ａ）あるいは図１２（ａ）に示すソースコードＳｃｅ１あるいはＳｃｅ２に変換される。図２９に示すホームページのソースコードＳｒ３２は、図１３（ａ）あるいは図１４（ａ）に示すソースコードＳｃｆ１あるいはＳｃｆ２に変換される。

【0142】

なお、上述したホームページの作成方法では、ユーザがプレビュー画面Ｒｅｐ上でコンテンツの作成や移動などによりホームページをデザインするだけで、ＨＰ作成支援装置１０が、ユーザがデザインしたホームページのソースコードを生成する場合について説明したが、ユーザがホームページのソースコードを直接編集してもよいことは言うまでもない。

【0143】

（５）ホームページの作成処理
図３０は、ボックスのレイアウトルールに従ってＨＴＭＬ要素を生成する処理をフローチャートで示す図である。

【0144】

まず、ユーザがＨＰ作成支援装置１０の入力操作部１３ａを操作すると、入力操作部１３ａから操作信号Ｓが入力インターフェース１３を介してプロセッサ１１に入力される。プロセッサ１１は、操作信号Ｓに応じた演算処理を行う。例えば、プロセッサ１１は、出力インターフェース１４を介して表示部１４ａに表示データＤを出力することによりホームページの編集画面Ｓｅなどの表示画面を表示したり、ネットワーク制御部１６を動作させてインターネットなどのネットワークＮを介してデータ通信を行ったり、入出力インターフェース１５を介して外部記憶装置１５ａとメモリ１２との間でのデータのアクセスを行うことにより外部記憶装置１５ａに対するデータの読み出しや書込みを行ったりする。

【0145】

このＨＰ作成支援装置１０では、ユーザが表示部１４ａに表示された編集画面Ｓｅ上でホームページを構成する１以上のコンテンツを作成すると、作成されたコンテンツが自動的にホームページのソースコードに変換されることにより、ホームページ作成支援が行われる。

【0146】

具体的に説明する。

【0147】

プロセッサ１１は、ユーザによる入力操作部１３ａの操作に基づいて表示部１４ａにホームページの編集画面Ｓｅを表示する処理を実行し、以下のステップＳ１０〜１８の処理を開始する。

【0148】

プロセッサ１１は、編集画面Ｓｅ上で新たなボックス（新規ボックス）が作成されたか否かの判定を行い（ステップＳ１０）、新規ボックスの作成が行われていない場合は、この判定処理を繰り返す。一方、新規ボックスの作成が行われた場合は、新規ボックスがブロックボックスであるかインラインボックスであるかを判定する（ステップＳ１１）。

【0149】

例えば、図２１に示すように、既存ブロックボックスＢｒ１ｄに加えて新規ボックスを生成する処理では、ブロックボックスが形成され、図２８に示すように、ブロックボックスＢｒ３内のコンテンツＣｒ３の前半部分に下線を引き、後半部分を太字にする処理では、ブロックボックスＢｒ３内に２つのインラインボックスＢｒ３ａ、Ｂｒ３ｂが形成される。

【0150】

このように新たに形成されたボックスがブロックボックスであるかインラインボックスであるかの判定は、作成された要素がブロック要素であるかインライン要素であるかによって行われる。

【0151】

新規ボックスがブロックボックスである場合は、プロセッサ１１は、新規ボックスがブロックボックスの通常レイアウトルールに従っているか否かを判定する（ステップＳ１２）。図２１に示すように、既存ブロックボックスＢｒ１ｄに対する新規ボックスＢｒ２ａの配置がブロックボックスの通常レイアウトルールに従っている場合は、プロセッサ１１は、新規ボックスがブロックボックスの通常レイアウトルールで配置されるよう記述されたソースコードＳｒ１ｅを生成する（ステップＳ１４）。

【0152】

一方、図２３に示すように、新規ボックスＢｒ２ｃの配置がブロックボックスの通常レイアウトルールに従っていない場合は、プロセッサ１１は、新規ボックスＢｒ２ｃが複数の通常外レイアウトルールのうちのこの場合の位置関係に適合するルールで配置されるよう記述されたソースコード（例えばソースコードＳｒ１ｇ）を生成する（ステップＳ１５）。

【0153】

その後、プロセッサ１１は、ユーザ操作により編集画面Ｓｅを閉じるなどの終了操作が行われたか否かを判定し（ステップＳ１８）、終了操作が行われている場合はプロセッサ１１は編集処理を終了し、終了操作が行われていない場合は、プロセッサ１１の処理はステップＳ１０の処理に戻る。

【0154】

また、ステップＳ１１で新規ボックスがインラインボックスであると判定された場合は、プロセッサ１１は、新規ボックスがインラインボックスの通常レイアウトルールに従っているか否かを判定する（ステップＳ１３）。図２８に示すように、インラインボックスＢｒ３ａに対する新規インラインボックスＢｒ３ｂの配置がインラインボックスの通常レイアウトルールに従っている場合は、プロセッサ１１は、新規インラインボックスがインラインボックスの通常レイアウトルールで配置されるよう記述されたソースコード（例えばソースコードＳｒ３１）を生成する（ステップＳ１６）。

【0155】

一方、図２９に示すように、インラインボックスＢｒ３ａに対する新規インラインボックスＢｒ３ｂの位置関係がインラインボックスの通常レイアウトルールに従っていない場合は、新規インラインボックスＢｒ３ｂが複数の通常外レイアウトルールのうちのこの場合の位置関係に適合するルールで配置されるよう記述されたソースコードを生成する（ステップＳ１７）。

【0156】

その後、ユーザ操作により編集画面Ｓｅを閉じるなどの終了操作が行われたか否かが判定され（ステップＳ１８）、終了操作が行われている場合は編集処理を終了し、終了操作が行われていない場合は、プロセッサ１１の処理はステップＳ１０の処理に戻る。

【0157】

このように本実施形態１のＨＰ作成支援装置１０では、プロセッサ１１が、ユーザ操作に基づいて、ホームページのコンテンツを配置するためのボックスを編集画面上に作成し、作成の対象とした対象ボックスと、対象ボックスに隣接する既存ボックスとの位置関係を判定し、ソースコードにおける対象ボックスおよび既存ボックスのうちの少なくとも対象ボックスの記述を、この記述がボックスの配置を規定する複数のレイアウトルールのうちの、上記の位置関係に適合するレイアウトルールに応じた記述となるように編集するので、ユーザは、コンテンツを配置するためのボックスの相対的な位置関係を規定するだけで、編集画面上で配置されるべき位置を示す情報を持たない複数のコンテンツを所望の位置に配置したホームページのソースコードを作成することができる。その結果、一般ユーザがコンピュータの編集画面上で簡単な操作により思い通りのホームページを作成することができる。

【0158】

なお、上記実施形態１では、作成の対象とした対象ボックスと、対象ボックスに隣接する既存ボックスとの位置関係が、これらのボックスの通常レイアウトルールに従っていないとき、ソースコードにおける対象ボックスおよび既存ボックスの両方の記述を、記述がボックスの配置を規定する複数のレイアウトルールのうちの、上記位置関係に適合するレイアウトルールに応じた記述となるように編集する場合について説明したが、対象ボックスと既存ボックスとの位置関係が通常レイアウトルールに従っていないとき、ソースコードにおける対象ボックスの記述のみを上記位置関係に適合するレイアウトルールに応じた記述となるように編集してもよい。

【0159】

また、上記実施形態１では、ホームページの作成の支援を行わせるプログラムが、ユーザ側の端末に格納されている場合について説明したが、このようなプログラムは、インターネット上のサーバに格納されていてもよく、ユーザ側の端末がサーバに対して操作信号を送信することにより、サーバでホームページが作成されるとともに、ユーザによるホームページの作成の支援が行われてもよい。

【0160】

特に、実施形態１で説明したホームページ作成処理は、実施形態１のようにユーザ側の端末に搭載されているプログラムで動作するスタンドアロンアプリケーションではなく、ユーザ側の端末のブラウザ上で動作するプログラミング言語によるプログラムとウェブサーバに搭載されているプログラムとの協調により動作するウェブアプリケーションにより実行されてもよい。

【0161】

具体的には、ユーザ側の端末のウェブブラウザ（ブラウザ）がホームページ作成支援サイト（ウェブサーバ）にアクセスし、ブラウザ上で動作するプログラムと、サーバ側のホームページ作成支援処理を行うためのプログラムとの協調によって、ブラウザ上にホームページ作成支援処理をウェブアプリケーションにより実行可能な環境を構築する。

【0162】

この場合、ホームページ作成支援処理により完成されたホームページのソースコードはサーバ側に格納されても、サーバ側からユーザ側の端末に提供されてもよい。

【0163】

（実施形態２）
図３１は、本発明の実施形態２によるＨＰ作成支援装置を説明するための図である。

【0164】

この実施形態２のＨＰ作成支援装置２０は、実施形態１のＨＰ作成支援装置１０と同様に、情報の処理を行うコンピュータ２０ａと、入力操作部１３ａと、表示部１４ａとを有する。コンピュータ２０ａは、実施形態１のコンピュータ１０ａのメモリ１２に代わるメモリ２２を備えており、メモリ２２には、ホームページの作成を支援する処理として実施形態１のＨＰ作成支援装置１０のものとは異なる処理をプロセッサ１１に実行させるためのプログラムが格納されている。

【0165】

なお、実施形態２のＨＰ作成支援装置２０では、コンピュータ２０ａのメモリ２２以外の構成は、実施形態１のＨＰ作成支援装置１０と同一である。

【0166】

以下、実施形態２のＨＰ作成支援装置２０により行われる、ホームページの作成を支援する処理（以下、ＨＰ作成支援処理）を具体的に説明する。

【0167】

図３２は、この実施形態２のＨＰ作成支援装置２０の表示部１４ａに表示される編集画面Ｓｅ２を示す図である。図３２中、図１５と同じ符号が付されたものは、実施形態１の編集画面Ｓｅにおけるものと同一のものである。

【0168】

この実施形態２のＨＰ作成支援装置２０により行われるＨＰ作成支援処理は、ホームページを編集するための編集画面Ｓｅ２を表示部１４ａに表示する処理と、ユーザ操作による操作信号Ｓに基づいてホームページを構成する１以上のコンテンツの作成（入力、描画、あるいは貼り付けなど）を行う処理と、コンテンツの作成状況を、プレビュー画面Ｒｅｐ、ソース画面Ｒｃｅ、階層構造画面Ｒｈｄで同時に表示する処理とを含む。これらの処理は、プロセッサ１１がメモリ２２に格納されたプログラムを実行することにより行われる。また、メモリ２２には、プロセッサ１１をテキストエディッタとして機能させたり、ブラウザとして機能させたりするための一般的なオペレーションシステムが格納されていることは言うまでもない。また、このメモリ２２には、実施形態１のＨＰ作成支援装置１０と同様にホームページの作成を支援する処理を行うためのプログラムがさらに格納されていてもよく、この場合は、プレビュー画面Ｒｅｐでコンテンツの編集が可能となり、プレビュー画面Ｒｅｐで編集した１以上のコンテンツに対応するソースコードがソース画面Ｒｃｅに表示され、プレビュー画面Ｒｅｐで編集した１以上のコンテンツの階層構造が階層構造画面Ｒｈｄに表示されることとなる。ただし、説明を簡単にするため、この実施形態２のＨＰ作成支援装置２０は実施形態１のＨＰ作成支援装置１０のＨＰ作成支援処理を行う機能は有していないものとする。

【0169】

ここで、ソース画面Ｒｃｅには、テキストエディッタに入力されたソースコードＳｃに含まれるＨＴＭＬ要素が表示され、プレビュー画面Ｒｅｐには、ソースコードＳｃに含まれる１以上の要素の内容（コンテンツ）が表示され、階層構造画面Ｒｈｄには、１以上のコンテンツの階層構造Ｅｈが表示される。

【0170】

例えば、このＨＰ作成支援装置２０の編集画面Ｓｅ２上でソースコードの入力により１０個のコンテンツＣｎ１〜Ｃｎ１０が作成されたとき、ソース画面Ｒｃｅには、コンテンツＣｎ１〜Ｃｎ１０を規定するＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０を含むソースコードＳｃが表示される。プレビュー画面Ｒｅｐには、図３２に示すように、ソースコードＳｃのｂｏｄｙ部分に含まれるＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０の内容（コンテンツ）Ｃｎ１〜Ｃｎ１０が表示される。階層構造画面Ｒｈｄには、ソースコードＳｃのｂｏｄｙ部分に含まれるＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０の階層構造Ｅｈが、階層ノードを示すシンボルＳｂ１〜Ｓｂ１０により表示される。

【0171】

さらに、実施形態２のＨＰ作成支援装置２０では、ソース画面Ｒｃｅに表示されたソースコードＳｃに含まれるＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０と、プレビュー画面Ｒｅｐに表示されたコンテンツＣｎ１〜Ｃｎ１０と、階層構造画面Ｒｈｄに表示された階層ノードを示すシンボルＳｂ１〜Ｓｂ１０とは、対応するもの同士相互に関連付けられる。

【0172】

従って、ユーザがプレビュー画面Ｒｅｐ上で任意のコンテンツをクリックしたり、ソース画面Ｒｃｅ上で任意のＨＴＭＬ要素をクリックしたり、あるいは階層構造画面Ｒｈｄ上で任意のシンボルをクリックしたりすると、クリックを行った画面以外の画面で、クリックしたコンテンツ、ＨＴＭＬ要素、あるいはシンボルに対応する部分がハイライトされる。

【0173】

一般的なホームページは非常に多くのＨＴＭＬ要素を含んでいるが、このような関連付けにより、ユーザがソース画面Ｒｃｅで編集しているＨＴＭＬ要素が、ホームページ上でどのような位置にあるか、あるいは階層構造上のどの階層に属しているかなどを一目で把握することができる。

【0174】

なお、コンピュータ１０からの表示データＤを表示する表示部１４ａの画面上に表示されているコンテンツの位置をプロセッサ１１が画面の基準位置に基づいて特定したり、画面上でマウスなどのポインティングデバイスにより指定した位置をプロセッサが画面の基準位置に基づいて認識したりする技術は汎用的なものであり、具体的な説明は省略する。

【0175】

以下、ソース画面Ｒｃｅに表示されたＨＴＭＬ要素、プレビュー画面Ｒｅｐに表示されたコンテンツ、階層構造画面Ｒｈｄに表示されたシンボルを関連付ける仕組みを具体的に説明する。

【0176】

図３３から図３６は、この仕組みを説明するための図である。

【0177】

これらの画面間での関連付けには、ソース要素マップＭｓｅと、ＤＯＭ要素マップＭｄｅと、階層構造情報Ｄｈｓとが用いられ、これらのマップはメモリ２２に格納されている。

【0178】

図３４に示すソース要素マップＭｓｅは、少なくとも、テキストエディッタに入力されたソースコードＳｃに基づいて作成されており、ソースコードＳｃに含まれる１以上のＨＴＭＬ要素（ソース要素）を示すソース要素情報ＥＬｓと、ソース画面Ｒｃｅ上での各ソース要素の位置を示す位置情報Ｅｐｓとを含む。このようなソース要素マップＭｓｅは、ソースコードがテキストエディッタに入力されることにより、ソース要素情報ＥＬｓ、ソース要素の位置情報Ｅｐｓ、およびタグ種情報Ｅｔａが編集中の最新のソースコードに対応するように更新される。ここで、テキストエディッタによるソースコードの読み込みは一定周期で行われてもよいし、編集中のソースコードが変化したときに行われてもよい。

【0179】

図３５（ｂ）に示すＤＯＭ要素マップＭｄｅは、ソース要素マップＭｓｅとブラウザ上ＤＯＭとに基づいて作成されている。なお、ブラウザ上ＤＯＭは、ブラウザがソースコードの読み込みにより生成したＨＴＭＬ要素の階層構造Ｅｈ１である。

【0180】

ＤＯＭ要素マップＭｄｅは、ブラウザがソースコードを読み込むことにより生成される１以上のＨＴＭＬ要素（ＤＯＭ要素）を示す情報（ＤＯＭ要素情報）ＥＬｄと、ＤＯＭ要素毎に作成された表示用要素ガイドＥｇと、表示用要素ガイドＥｇ毎に付与されたガイド記号Ｇとを含み、ＤＯＭ要素Ｈｍ０〜Ｈｍ１０と表示用要素ガイドＥｇ１〜Ｅｇ１０とガイド記号〔Ｇ１〕〜〔Ｇ１０〕とが対応付けられている。

【0181】

ここで、ＤＯＭ要素情報ＥＬｄは、ブラウザがソースコードＳｃを読み込んだときに認識したＨＴＭＬ要素Ｈｍ１〜Ｈｍ１０と、ブラウザ依存の機能により生成されるＨＴＭＬ要素Ｈｍ０とを示す。表示用要素ガイドＥｇは、ブラウザがプレビュー画面Ｒｅｐにコンテンツを表示するときにコンテンツ毎に設定する長方形の枠であり、表示用要素ガイドＥｇは、例えば、長方形の枠の左上隅、右下隅の位置を示す位置情報を有する。ガイド記号Ｇは、表示用要素ガイドＥｇの識別子となっている。

【0182】

このようなＤＯＭ要素マップＭｄｅは、ソースコードがブラウザに読み込まれることにより、ＤＯＭ要素情報ＥＬｄ、表示用要素ガイドＥｇ、およびガイド記号Ｇが編集中の最新のソースコードに対応するように更新される。ここで、ブラウザによるソースコードの読み込みは一定周期で行われてもよいし、編集中のソースコードが変化したときに行われてもよい。

【0183】

階層構造情報Ｄｈｓは、ソースコードＳｃのｂｏｄｙ部分でのＨＴＭＬ要素の階層構造Ｅｈを各階層ノードに対応するシンボルで示すものであり、ブラウザがソースコードの読み込みにより生成したＨＴＭＬ要素の階層構造（ブラウザ上ＤＯＭ）Ｅｈ１を、ＤＯＭ要素とソース要素との対比に基づいて修正したものである。階層構造情報Ｄｈｓでは、階層構造Ｅｈの階層ノードＮｄを表すシンボルＳｂに、表示用要素ガイドＥｇに付与されたガイド記号Ｇが対応付けられている。このような階層構造情報Ｄｈｓは、ソースコードがブラウザに読み込まれることにより、ソースコードＳｃのｂｏｄｙ部分でのＨＴＭＬ要素の階層構造Ｅｈを表すシンボルＳｂとガイド記号Ｇとの対応関係が、編集中の最新のソースコードに対応するように更新される。

【0184】

以下、ソース要素マップＭｓｅ、ＤＯＭ要素マップＭｄｅ、階層構造情報Ｄｈｓについて詳述する。

【0185】

図３４は、ソース要素マップＭｓｅを説明するための図である。

【0186】

ソース要素マップＭｓｅは、ソースコードＳｃから取得できるＨＴＭＬ要素の特徴をメモリ２２上にテーブル形式で格納したものである。

【0187】

ソース要素マップＭｓｅにはソース要素情報ＥＬｓが含まれている。ソース要素情報ＥＬｓは、図３４に示すように、ソースコードＳｃの分析により得られたソースコードＳｃに含まれる１以上のＨＴＭＬ要素（ソース要素）を示す。ここで、ソースコード要素情報ＥＬｓが示す１以上のソース要素は、具体的にはｈｔｍｌ要素（ソースコード自体）Ｓｃ、ｈｅａｄ要素Ｈｄ、ｈｅａｄ要素Ｈｄに含まれるｔｉｔｌｅ要素Ｔｔ、ｂｏｄｙ要素Ｈｅ１、ｂｏｄｙ要素Ｈｅ１に含まれるｈ１要素Ｈｅ２、ｔａｂｌｅ要素Ｈｅ３、ｔｒ要素Ｈｅ４、ｔｄ要素Ｈｅ５、ｔｄ要素Ｈｅ６、ｕｌ要素Ｈｅ７、ｌｉ要素Ｈｅ８、ｌｉ要素Ｈｅ９、ｐ要素Ｈｅ１０である。メモリ２２上のソース要素マップＭｓｅに割り当てられた領域には、各ソース要素に対応付けてソース要素の位置情報Ｅｐｓおよびソース要素に含まれるタグ（ｔａｇ）の種類を示すタグ種情報Ｅｔａがテーブル形式で記録されている。

【0188】

なお、ここで、ソース要素の位置情報Ｅｐｓは、各ソース要素Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０の開始位置および終了位置を示す情報（要素Ｓｔａｒｔ／Ｅｎｄ位置）と、ソース要素の内容の開始位置および終了位置を示す情報（内容Ｓｔａｒｔ／Ｅｎｄ位置）とを含む。ソース要素Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０の要素Ｓｔａｒｔ／Ｅｎｄ位置には、例えば、ソース要素の先頭の位置（Ｓ（ＥＳｘ１、ＥＳｙ１）〜Ｓ（ＥＳｘ１３、ＥＳｙ１３））と、ソース要素の最後尾の位置（Ｅ（ＥＥｘ１、ＥＥｙ１）〜Ｅ（ＥＥｘ１３、ＥＥｙ１３））とを用いることができる。ソース要素Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０の内容Ｓｔａｒｔ／Ｅｎｄ位置には、これらのソース要素の内容の先頭の位置（Ｓ（ＣＳｘ１、ＣＳｙ１）〜Ｓ（ＣＳｘ１３、ＣＳｙ１３））と、ソース要素の内容の最後尾の位置（Ｅ（ＣＥｘ１、ＣＥｙ１）〜Ｅ（ＣＥｘ１３、ＣＥｙ１３））とを用いることができる。さらに、ソース要素Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０のタグ種情報は、「ｈｔｍｌ」、「ｈｅａｄ」、「ｔｉｔｌｅ」、「ｂｏｄｙ」、「ｈ１」、「ｔａｂｌｅ」、「ｔｒ」、「ｔｄ」、「ｔｄ」、「ｕｌ」、「ｌｉ」、「ｌｉ」、「ｐ」で示される。

【0189】

図３５は、ＤＯＭ要素マップを説明するための図である。

【0190】

なお、図３５では、図３４に示すソース要素マップＭｓｅにおけるソース要素情報ＥＬｓのみを示している。

【0191】

ＤＯＭ要素マップＭｄｅは、図３５（ａ）に示すように、ソース要素マップＭｓｅのソース要素情報ＥＬｓとブラウザ上ＤＯＭ（ブラウザによるソースコードの読み込みにより生成されたＨＴＭＬ要素の階層構造）Ｅｈ１とに基づいて作成されている。

【0192】

例えば、図３２に示すソース画面Ｒｃｅに表示されているソースコードＳｃがブラウザに読み込まれたとき、ブラウザ依存の機能により、ソースコードＳｃのｂｏｄｙ部分に対応する記述が、図３５（ａ）に示すブラウザ上ＤＯＭの階層構造Ｅｈ１として認識される。この階層構造Ｅｈ１では、ソースコードＳｃのｂｏｄｙ要素Ｈｅ１に対応する階層ノードＮｅ１がルートノードとされ、ソースコードＳｃのｈ１要素Ｈｅ２、ｔａｂｌｅ要素Ｈｅ３、ｕｌ要素Ｈｅ７、ｐ要素Ｈｅ１０に対応する階層ノードＮｅ２、Ｎｅ３、Ｎｅ７、Ｎｅ１０が階層ノードＮｅ１の子階層ノードとされている。また、対応する要素がソースコードに存在しないｔｂｏｄｙ要素Ｈｍ０に対応する階層ノードＮｅ０が、ブラウザ依存の機能により子階層ノードＮｅ３の子階層ノードとされ、ソースコードＳｃのｔｒ要素Ｈｅ４に対応する階層ノードＮｅ４が子階層ノードＮｅ０の子階層ノードとされている。ソースコードＳｃのｌｉ要素Ｈｅ８、Ｈｅ９に対応する階層ノードＮｅ８、Ｎｅ９が子階層ノードＮｅ７の子階層ノードとされている。さらに、ｔｄ要素Ｈｅ５、Ｈｅ６に対応する階層ノードＮｅ５、Ｎｅ６が子階層ノードＮｅ４の子階層ノードとされている。

【0193】

この場合、ＤＯＭ要素マップＭｄｅには、ソース要素マップＭｓｅに含まれるＨＴＭＬ要素（ソース要素）とブラウザ上ＤＯＭの階層構造Ｅｈ１を構成するＨＴＭＬ要素（ＤＯＭ要素）との対比結果（図３５（ａ））が、ブラウザ上ＤＯＭのノードＮｅ０〜Ｎｅ１０に対応する要素毎に示されている。

【0194】

具体的には、ＤＯＭ要素マップＭｄｅには、ＤＯＭ要素情報ＥＬｄが示す個々のＤＯＭ要素Ｈｍ０〜Ｈｍ１０が含まれている。ここで、ＤＯＭ要素情報ＥＬｄが示すＤＯＭ要素のうちで、ソース要素マップＭｓｅのソース要素情報ＥＬｓが示すソース要素と一致したＤＯＭ要素Ｈｍ１〜Ｈｍ１０には、要素名とともに「ＯＫ」の記述が記録されている。ソース要素マップＭｓｅのソース要素ＥＬｓと一致しないＤＯＭ要素Ｈｍ０には、要素名とともに「ＳＫＩＰ」の記述が記録されている。さらに、ソース要素と一致したＤＯＭ要素Ｈｍ１〜Ｈｍ１０には、表示用要素ガイドＥｇ１〜Ｅｇ１０とガイド記号〔Ｇ１〕〜〔Ｇ１０〕とが付与されている。

【0195】

ここで、表示用要素ガイドＥｇ１〜Ｅｇ１０は、プレビュー画面Ｒｅｐ上に表示される個々のコンテンツＣｎ１〜Ｃｎ１０を囲むように配置される長方形の枠であり、メモリ２２には、例えば、この長方形の枠の左上隅の位置（Ｓ（ＧＳｘ１、ＧＳｙ１）〜Ｓ（ＧＳｘ１０、ＧＳｙ１０））と、長方形の枠の右下隅の位置（Ｅ（ＧＥｘ１、ＧＥｙ１）〜Ｅ（ＣＧｘ１０、ＣＧｙ１０））とが予め記録される。また、ガイド記号〔Ｇ１〕〜〔Ｇ１０〕は表示用要素ガイドＥｇ１〜Ｅｇ１０の識別子となっている。

【0196】

図３６は、階層構造情報Ｄｈｓを説明するための図である。

【0197】

図３６（ｂ）に示す階層構造情報Ｄｈｓでは、ＤＯＭ要素情報ＥＬｄが示すＤＯＭ要素Ｈｍ０〜Ｈｍ１０のうちでソース要素マップＭｓｅのソース要素Ｈｅ１〜Ｈｅ１０と一致したＤＯＭ要素Ｈｍ１〜Ｈｍ１０の階層ノードＮｅ１〜Ｎｅ１０にガイド記号Ｇ１〜Ｇ１０が対応付けられている。さらに、ＤＯＭ要素Ｈｍ１〜Ｈｍ１０の階層ノードＮｅ１〜Ｎｅ１０には、それぞれの階層ノードを示すシンボル「ＢＯＤ」、「Ｈ１」、「ＴＢＬ」、「ＴＲ」、「ＴＤ」、「ＴＤ」、「ＵＬ」、「Ｌｉ」、「Ｌｉ」、「Ｐ」が割り当てられている。

【0198】

具体的には、メモリ２２上の階層構造情報に割り当てられた領域には、ノード〔Ｎｏｄｅ：１〕Ｎｅ１〜ノード〔Ｎｏｄｅ：１０〕Ｎｅ１０に、ガイド記号〔Ｇ１〕〜〔Ｇ１０〕、シンボルＳｂ１〜Ｓｂ１０を示す情報が関連付けて格納されている。

【0199】

図３４に示すソース要素マップＭｓｅの作成処理を説明する。

【0200】

まず、図３７に示すように、ソースコードＳｃがＨＰ作成支援装置２０に入力されると、ソース画面Ｒｃｅ上には、ＨＰ作成支援装置２０のプロセッサ１１が実現するテキストエディッタにより図３８に示すように、ソースコードＳｃが表示される。

【0201】

続いて、図３９に示すように、入力されたソースコードＳｃがプロセッサ１１により分析され、ソースコードＳｃにおける個々のＨＴＭＬ要素（ソース要素）Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０がプロセッサ１１により認識される。その結果、ソース画面Ｒｃｅ上に表示されたソースコードＳｃから取得できる各ＨＴＭＬ要素の特徴がメモリ２２上にテーブル形式で格納される。

【0202】

ここでは、特に図３４に示すように、メモリ２２の記憶領域には、ソース要素Ｓｃ、Ｈｄ、Ｔｔ、Ｈｅ１〜Ｈｅ１０に対応付けて、要素Ｓｔａｒｔ／Ｅｎｄ位置および内容Ｓｔａｒｔ／Ｅｎｄ位置が位置情報Ｅｐｓとして格納される。さらに、タグ種情報Ｅｔａがソース要素に対応付けてメモリ２２の記憶領域に格納される。

【0203】

これにより、編集中の最新のソースコードＳｃに対応したソース要素マップＭｓｅが完成する。

【0204】

次に、図３５（ｂ）に示すＤＯＭ要素マップＭｄｅの作成処理を説明する。

【0205】

図４０に示すように、ソースコードＳｃのコンテンツがプレビュー画面Ｒｅｐに表示されるようにソースコードＳｃがブラウザにより読み取られると、プレビュー画面Ｒｅｐには、図４１に示すように、ソースコードＳｃの各要素に含まれる内容（ホームページのコンテンツ）Ｃｎ１〜Ｃｎ１０が表示される。このようにブラウザにソースコードＳｃが読み込まれたとき、ブラウザでは、図４２に示すように、ブラウザに依存した機能によりソースコードＳｃのｂｏｄｙ部分を構成するソース要素を含む階層構造Ｅｈ１がブラウザ上ＤＯＭとして認識される。

【0206】

この階層構造Ｅｈ１の各階層ノードＮｅ１〜Ｎｅ１０はそれぞれ、ソースコードＳｃのｂｏｄｙ部分のＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０に対応するノードであるのに対し、階層ノードＮｅ０は、ブラウザ依存によって形成されたＨＴＭＬ要素（ｔｂｏｄｙ要素）であり、ソースコードＳｃに含まれている要素に対応していない。

【0207】

次に、図４３に示すように、ソース要素マップＭｓｅ（図３４）に含まれるＨＴＭＬ要素とブラウザ上ＤＯＭの各階層ノードＮｅ０〜Ｎｅ１０に対応するＨＴＭＬ要素との比較結果に基づいて、ソース要素と一致するＤＯＭ要素Ｈｍ１〜Ｈｍ１０に対して表示用要素ガイドＥｇ１〜Ｅｇ１０が作成される。

【0208】

なお、図４３では、ソース要素マップＭｓｅにおける位置情報Ｅｐｓは省略している。また、表示用要素ガイドＥｇ１〜Ｅｇ１０は、プレビュー画面Ｒｅｐ上に表示されている個々のＨＴＭＬ要素に対応するコンテンツを囲むようにプレビュー画面Ｒｅｐ上に配置される長方形の枠である。

【0209】

さらに図４４（ａ）に示すように、表示用要素ガイドＥｇ１〜Ｅｇ１０を、プレビュー画面Ｒｅｐ上に表示されている個々のＨＴＭＬ要素のコンテンツＣｎ１〜Ｃｎ１０に適用することにより、図４４（ｂ）に示すように、プレビュー画面Ｒｅｐでは表示用要素ガイドＥｇ１〜Ｅｇ１０がＤＯＭ構成要素のコンテンツＣｎ１〜Ｃｎ１０を囲むように表示用要素ガイドＥｇ１〜Ｅｇ１０が表示されるようになる。

【0210】

さらにこれらの表示用要素ガイドＥｇ１〜Ｅｇ１０には、図４４（ｃ）に示すようにガイド記号〔Ｇ１〕〜〔Ｇ１０〕が付与される。

【0211】

これにより、ソースコードの編集中に最新のソースコードＳｃに対応したＤＯＭ要素マップとして、ブラウザ上ＤＯＭの階層構造Ｅｈ１の各階層ノードに対応するＨＴＭＬ要素Ｈｍ１〜Ｈｍ１０に、表示用要素ガイドＥｇ１〜Ｅｇ１０とガイド記号〔Ｇ１〕〜〔Ｇ１０〕とが対応付けられたＤＯＭ要素マップＭｄｅ（図３５参照）が得られる。

【0212】

次に、図３６に示す階層構造情報Ｅｈの作成処理を説明する。

【0213】

図４５に示すように、ブラウザ上ＤＯＭの階層構造Ｅｈ１の各階層ノードに対応する要素（ＤＯＭ要素）と、ソース要素マップＭｓｅに含まれるＨＴＭＬ要素（ソース要素）との対比に基づいて、ブラウザ上ＤＯＭの階層構造Ｅｈ１における階層ノードのうちから、ソース要素に対応していない階層ノードを除くことにより、ソース要素Ｈｅ１〜Ｈｅ１０に整合した階層構造Ｅｈが、階層構造画面Ｒｈｄに表示すべき階層構造として作成される。さらに図４６に示すように、階層構造Ｅｈの階層ノードＮｅ１〜Ｎｅ１０に対応したシンボルＳｂ１〜Ｓｂ１０が作成される。さらに、図４６に示すように、ガイド記号〔Ｇ１〕〜〔Ｇ１０〕と階層構造ＥｈのＤＯＭ要素Ｈｍ１〜Ｈｍ１０を示すシンボルＳｂ１〜Ｓｂ１０との対応関係が、図３５（ｂ）に示すガイド記号〔Ｇ１〕〜〔Ｇ１０〕とＤＯＭ要素Ｈｍ１〜Ｈｍ１０との対応関係と一致するよう、シンボルＳｂ１〜Ｓｂ１０にガイド記号〔Ｇ１〕〜〔Ｇ１０〕を付与する。これにより階層構造情報Ｄｈｓが得られる。また、図４７に示すように、ソースコードＳｃのｂｏｄｙ部分のソース要素Ｈｅ１〜Ｈｅ１０の階層構造Ｅｈが認識されるように、階層構造画面ＲｈｄにはシンボルＳｂ１〜Ｓｂ１０が表示される。

【0214】

その結果、図３２に示すように、ソース画面ＲｃｅにソースコードＳｃが表示され、プレビュー画面ＲｅｐにソースコードＳｃに含まれるＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０の内容（コンテンツ）Ｃｎ１〜Ｃｎ１０が表示され、階層構造画面Ｒｈｄには、ソースコードＳｃに含まれるＨＴＭＬ要素Ｈｅ１〜Ｈｅ１０の階層構造Ｅｈが表示される。

【0215】

次に、ＨＰ作成支援装置２０により行われるＨＰ作成支援動作について説明する。

【0216】

ユーザが図４８に示すように、ソース画面Ｒｃｅのある位置をマウスポインタＭｐでクリックした場合、プロセッサ１１は、図３４に示すソース要素マップＭｓｅの位置情報Ｅｐｓの検索により、クリックされた位置に対応する位置のソース要素Ｓｃｒ１が、ユーザが検索の対象としたソース要素であると認識する。

【0217】

例えば、ｈ１要素Ｈｅ２がクリックされたＨＴＭＬ要素であると認識された場合、ＤＯＭ要素マップＭｄｅ（図３５（ｂ））に基づいて、ｈ１要素Ｈｅ２に対応するＤＯＭ要素としてｈ１要素Ｈｍ２が特定される。これにより、ＤＯＭ要素Ｈｍ２の表示用要素ガイドＥｇ２が占有する領域Ｃｈｔ１がハイライトされる。

【0218】

さらに、階層構造情報Ｄｈｓ（図３６（ｂ））に基づいて、ＤＯＭ要素マップＭｄｅ（図３５（ｂ））における表示用要素ガイドＥｇ２に付与されているガイド記号〔Ｇ２〕と同じガイド記号が付与されているシンボル〔Ｈ１〕Ｓｂ２が特定され、シンボル〔Ｈ１〕Ｓｂ２の占有領域Ｈｈｔ１がハイライトされる。

【0219】

ユーザが図４９に示すように、プレビュー画面Ｒｅｐのあるコンテンツの表示用要素ガイドの占有領域Ｃｃｒ２をマウスポインタＭｐでクリックした場合、図３５（ｂ）に示すＤＯＭ要素マップＭｄｅに基づいてＤＯＭ要素を特定することができる。例えば、表示用要素ガイドＥｇ３の占有領域がクリックされた場合、表示用要素ガイドＥｇ３に対応するＤＯＭ要素Ｈｍ３が特定される。さらに、ソース要素マップＭｓｅ（図３４）に基づいて、ＤＯＭ要素Ｈｍ３と一致したソース要素Ｈｅ３が取得され、ソース要素Ｈｅ３に対応する領域Ｓｈｔ２が図４９に示すようにハイライトされる。また、階層構造情報Ｄｈｓに基づいて、ＤＯＭ要素マップＭｄｅにおける表示用要素ガイドＥｇ３に付与されているガイド記号〔Ｇ３〕と同じガイド記号が付与されているシンボル〔ＴＢＬ〕Ｓｂ３が特定され、このシンボル〔ＴＢＬ〕Ｓｂ３の占有する領域Ｈｈｔ２がハイライトされる。

【0220】

ユーザが図５０に示すように、階層構造画面Ｒｈｄにおける階層構造をなすシンボルの１つの配置領域Ｈｃｒ３がマウスポインタＭｐによりクリックされた場合、図３６（ｂ）に示す階層構造情報Ｄｈｓに基づいて、クリックされた領域のシンボルに対応するガイド記号が特定される。例えば、上下に並ぶ２つのシンボル〔ＴＤ〕のうちの上側のシンボル〔ＴＤ〕の配置領域Ｈｃｒ３がマウスポインタＭｐでクリックされた場合、シンボル〔ＴＤ〕Ｓｂ５に対応するガイド記号〔Ｇ５〕が特定される。さらに、ＤＯＭ要素マップＭｄｅ（図３５（ｂ））に基づいて、ガイド記号〔Ｇ５〕に対応する表示用要素ガイドＥｇ５が選択され、この表示用要素ガイドＥｇ５が占有する領域Ｃｈｔ３が図５０に示すようにハイライトされる。さらに、この場合、ＤＯＭ要素の要素Ｈｍ５に一致したソース要素Ｈｅ５に対応する領域Ｓｈｔ３が図５０に示すようにハイライトされる。

【0221】

このように本実施形態２のＨＰ作成支援装置２０では、ユーザがプレビュー画面Ｒｅｐ上で任意のコンテンツをクリックしたり、ソース画面Ｒｃｅあるいは階層構造画面Ｒｈｄ上で任意のＨＴＭＬ要素に対応する領域をクリックしたりすると、クリックを行った画面以外の画面で、クリックしたコンテンツあるいはクリックした要素に対応する部分がハイライトされる。このため、例えば、ユーザは、階層構造画面Ｒｈｄに表示されている特定のＨＴＭＬ要素をクリックするだけで、ソース画面Ｒｃｅに表示されているソースコードＳｃに含まれる対応するＨＴＭＬ要素を簡単に見つけることができ、同時に、階層構造画面Ｒｈｄでクリックしたシンボルに対応するコンテンツをプレビュー画面Ｒｅｐで簡単に見つけることができる。

【0222】

なお、上記実施形態２では、ソース画面Ｒｃｅ上のある位置をクリックした場合、プレビュー画面Ｒｅｐ上で、クリックされた位置のＨＴＭＬ要素に対応する表示用要素ガイドの占有領域がハイライトされ、かつ階層構造画面Ｒｈｄ上で、クリックされた位置のＨＴＭＬ要素に対応するシンボルの占有領域がハイライトされる場合について説明したが、表示用要素ガイドＥｇ１〜Ｅｇ１０とシンボルＳ１ｂ〜Ｓｂ１０との間で対応するもの同士の関係が常に認識可能となるように、表示用要素ガイドＥｇ１〜Ｅｇ１０とシンボルＳ１ｂ〜Ｓｂ１０とは、対応するもの同士が同じ色で表示されるように構成してもよい。

【0223】

また、上記実施形態２では、ホームページの作成の支援を行わせるプログラムが、ユーザ側の端末に格納されている場合について説明したが、このようなプログラムは、インターネット上のサーバに格納されていてもよく、ユーザ側の端末がサーバに対して操作信号を送信することにより、サーバでホームページが作成されるとともに、ユーザによるホームページの作成の支援が行われてもよい。

【0224】

この実施形態２で説明したホームページ作成処理も実施形態１と同様に、実施形態２のようにユーザ側の端末に搭載されているプログラムで動作するスタンドアロンアプリケーションではなく、ユーザ側の端末のブラウザ上で動作するプログラミング言語によるプログラムとウェブサーバに搭載されているプログラムとの協調により動作するウェブアプリケーションにより実行されてもよい。

【0225】

この場合、完成されたホームページのソースコードはサーバ側に格納されても、ユーザ側の端末に提供されてもよい。

【0226】

また、上記実施形態２では、以下の第１から第３の３つの処理を行う場合について説明したが、ＨＰ作成支援装置２０は、以下の第１〜第３の処理のうちの少なくとも１つを行うようにしてもよい。

【0227】

第１の処理は、プレビュー画面でいずれかのコンテンツが選択されたとき、ソース画面Ｒｃｅで、選択されたコンテンツに対応するソース要素がハイライトされ、かつ階層構造画面Ｒｈｄで、選択されたコンテンツに対応するシンボルがハイライトされる処理である。

【0228】

第２の処理は、ソース画面Ｒｃｅで、いずれかのソース要素を選択したとき、プレビュー画面Ｒｅｐで、選択したソース要素に対応するコンテンツがハイライトされ、かつ階層構造画面Ｒｈｄで、選択したソース要素に対応するシンボル（階層ノード）がハイライトされる処理である。

【0229】

第３の処理は、階層構造画面Ｒｈｄで、いずれかのシンボルが選択されたとき、プレビュー画面Ｒｅｐで、選択したシンボルに対応するコンテンツがハイライトされ、かつソース画面Ｒｃｅで、選択したシンボルに対応するソース要素がハイライトされる処理である。

【0230】

（実施形態３）
図５１は、本発明の実施形態３によるＨＰ作成支援装置３０を説明するための図である。

【0231】

この実施形態３のＨＰ作成支援装置３０は、実施形態１のＨＰ作成支援装置１０と同様に、情報の処理を行うコンピュータ３０ａと、入力操作部１３ａと、表示部１４ａとを有する。コンピュータ３０ａは、実施形態１のコンピュータ１０ａのメモリ１２に代わるメモリ３２を備えており、メモリ３２には、ホームページの作成を支援する処理として実施形態１のＨＰ作成支援装置１０のものとは異なる処理をプロセッサ１１に実行させるためのプログラムが格納されている。

【0232】

なお、実施形態３のＨＰ作成支援装置３０では、コンピュータ３０ａのメモリ３２以外の構成は、実施形態１のＨＰ作成支援装置１０と同一である。

【0233】

以下、実施形態３のＨＰ作成支援装置３０により行われる、ホームページの作成を支援する処理（以下、ＨＰ作成支援処理）を具体的に説明する。

【0234】

図５２は、この実施形態３のＨＰ作成支援装置３０の表示部１４ａに表示される編集画面Ｓｅを示す図である。図５２中、図１５と同じ符号が付されたものは、実施形態１の編集画面Ｓｅにおけるものと同一のものである。

【0235】

この実施形態３のＨＰ作成支援装置３０により行われるＨＰ作成支援処理では、ブロックを含むブロックの編集モードを通常編集モードと一括編集モードとで切り換え可能となっている。

【0236】

なお、以下の説明では、少なくとも１つのブロックが他のブロックに含まれるとき、他のブロックに含まれるブロックを子ブロックともいい、少なくとも１つのブロックを含む他のブロックを親ブロックともいう。

【0237】

具体的には、この実施形態３のＨＰ作成支援装置３０により行われるＨＰ作成支援処理は、以下の３つの処理を含む。

【0238】

第１の処理は、ユーザ操作に基づいて、ホームページのコンテンツを配置するための複数のブロックを、少なくとも１つのブロックが少なくとも１つの他のブロック（親ブロック）に包含されるように編集画面上に表示する処理である。

【0239】

第２の処理は、親ブロックの編集モードを、ユーザ操作に基づいて、通常編集モードと一括編集モードとの間で切り換える処理である。

【0240】

第３の処理は、編集の対象とした親ブロックの編集モードが一括編集モードであるとき、親ブロックに含まれるブロック（子ブロック）毎に編集する個別編集操作を禁止し、かつ子ブロックを親ブロックとともに一括して編集する一括編集操作を許可し、親ブロックの編集モードが通常編集モードであるとき、子ブロックに対する個別編集操作および一括編集操作をともに許可する処理である。なお、以下の説明では、編集モードを一括編集モードにすることをロックするともいい、編集モードを通常編集モードに戻すことを、ロックを解除するともいう。

【0241】

これらの処理は、プロセッサ１１がメモリ３２に格納されたプログラムを実行することにより行われる。また、メモリ３２には、プロセッサ１１をテキストエディッタとして機能させたり、ブラウザとして機能させたりするための一般的なオペレーションシステムが格納されていることは言うまでもない。また、このメモリ３２には、実施形態１のＨＰ作成支援装置１０と同様にホームページの作成を支援する処理を行うためのプログラムがさらに格納されていてもよく、この場合は、プレビュー画面Ｒｅｐでコンテンツの編集が可能となり、プレビュー画面Ｒｅｐで編集した１以上のコンテンツに対応するソースコードがソース画面Ｒｃｅに表示されることとなる。また、このメモリ３２には、実施形態２のＨＰ作成支援装置２０と同様にホームページの作成を支援する処理を行うためのプログラムがさらに格納されていてもよく、この場合は、プレビュー画面Ｒｅｐ、ソース画面Ｒｃｅ、階層構造画面Ｒｈｄで、ホームページのコンテンツ、対応するソース要素、対応する階層ノード（シンボル）を同時に関連付けて表示可能となる。

【0242】

この実施形態３のＨＰ作成支援装置３０は実施形態１のＨＰ作成支援装置１０のＨＰ作成支援処理を行う機能は有していてもいなくてもよいが、ここでは、説明の都合上、実施形態１のＨＰ作成支援装置１０の機能を有するものとする。

【0243】

以下、このＨＰ作成支援装置３０を用いたホームページの編集処理を詳しく説明する。

【0244】

例えば、図５２に示す編集画面Ｓｅでは、プレビュー画面Ｒｅｐに、１つの大きいブロック（実施形態１のブロックボックスと同じもの）Ｂｒ３０が作成され、この大きいブロックＢｒ３０内に２つの小さいブロックＢｒ３１およびＢｒ３２が配置され、それぞれの小さいブロックＢｒ３１およびＢｒ３２内にコンテンツＣｔ３１およびＣｔ３２が配置されている。ここでは、大きいブロックが親ブロックであり、小さいブロックが子ブロックである。また、親ブロック内に子ブロックを配置する操作は、親ブロックをクリックなどで選択した後、作成ボタンＢｕ１を押す操作である。このような操作により、新たなブロックが子ブロックとして既存のブロック（親ブロック）内に配置される。なお、図５２に示す編集画面Ｓｅでは、ブロックＢｒ３１が選択された状態となっている。

【0245】

また、ソース画面Ｒｃｅには、大きいブロックＢｒ３０に対応するＨＴＭＬ要素（ｄｉｖ要素）Ｓｃ３０、小さいブロックＢｒ３１およびＢｒ３２に対応するＨＴＭＬ要素（ｄｉｖ要素）Ｓｃ３１およびＳｃ３２が表示されている。なお、ＨＴＭＬ要素Ｓｃ３はこのホームページの全体に対応するｈｔｍｌ要素である。

【0246】

図５３は、図５２に示す編集画面Ｓｅのプレビュー画面Ｒｅｐのみを拡大して示す図である。

【0247】

図５３に示す編集状態では、大きなブロックＢｒ３０はロックされておらず、このブロックの編集モードは、ブロックＢｒ３０内の小さいブロックＢｒ３１及びＢｒ３２に対する個別の編集操作（コピー、移動、削除などの操作）が可能であり、かつブロックＢｒ３０内の小さいブロックＢｒ３１及びＢｒ３２を大きいブロックとともに編集する一括編集操作（コピー、移動、削除などの操作）が可能である通常編集モードである。

【0248】

従って、通常編集モードでは、プレビュー画面Ｒｅｐに表示されている各ブロックの輪郭を示す外線が表示されている。

【0249】

この状態で、ユーザが、クリック操作により、大きなブロック内の例えば小さいブロックＢｒ３２を選択した後、例えば、コピーボタンＢｕ３を操作すると、コピー操作はこの小さいブロックＢｒ３２に反映される。つまり、図５４に示すように、小さいブロックＢｒ３２がその内部のコンテンツＣｔ３２とともにコピーされ、コピーされたブロックＢｒ３２ａが元のブロックＢｒ３２の下側に配置される。コピーされたブロックＢｒ３２ａには、元のブロックＢｒ３２内のコンテンツＣｔ３２と同じコンテンツＣｔ３２ａが含まれている。

【0250】

なお、通常編集モードでは、大きいブロックを選択した後、例えばコピーなどの操作を行うと、大きいブロックおよびその内部の小さいブロックの両方がコピーされて、元の大きいブロックの下側に配置される。

【0251】

一方、図５３に示す編集状態で、ユーザが大きなブロックＢｒ３０内の領域をクリックした後、ロックボタンＢｕ５の操作により大きなブロックＢｒ３０の編集モードを通常編集モードから一括編集モードに切り換えると、大きなブロックＢｒ３０内に配置されている小さいブロックＢｒ３１及びＢｒ３２の外線が、図５５に示すように消え、大きなブロックＢｒ３０内に配置されているブロックＢｒ３１及びＢｒ３２に対する個別操作が禁止された状態となる。なお、図５５では、説明の都合上、実際には消える外線を二点鎖線で示している。従って、一括編集モードでは、小さいブロックＢｒ３１、Ｂｒ３２に対する操作は禁止される。また、通常編集モードと一括編集モードでの表示画面上での相違はあくまでも一例であり、このような表示の相違に限定されるものではない。

【0252】

この編集状態で、ユーザが大きなブロックＢｒ３０内の領域をクリックしてこのブロックＢｒ３０を選択した後、例えばコピーボタンＢｕ３を操作すると、図５６に示すように、大きなブロックＢｒ３０がその内部の小さいブロックＢｒ３１及びＢｒ３２内に含まれていたコンテンツＣｔ３１及びＣｔ３２とともにコピーされ、コピーされた大きなブロックＢｒ３０ａが元の大きなブロックＢｒ３０の下側に配置される。コピーされた大きなブロックＢｒ３０ａ内には、元のブロックＢｒ３０内にあった小さいブロックＢｒ３１及びＢｒ３２のコンテンツＣｔ３１、Ｃｔ３２と同じコンテンツＣｔ３１ａ及びＣｔ３２ａが含まれている。

【0253】

図５６に示す編集状態で、ロックボタンＢｕ５のロック解除操作により元の大きなブロックＢｒ３０の編集モードを一括編集モードから通常編集モードに戻すと、図５７に示すように、元の大きなブロックＢｒ３０内の小さいブロックＢｒ３１及びＢｒ３２の外線が現れる。ただし、コピーした大きなブロックＢｒ３０ａ内の小さいブロックＢｒ３１ａ及びＢｒ３２ａの外線が現れず、このブロックＢｒ３０ａはロックされたままである。従って、図５７に示す編集状態では、元の大きなブロックＢｒ３０内の個々の小さいブロックを対象とした編集操作が可能であるが、コピーした大きなブロックＢｒ３０ａ内の小さいブロックＢｒ３１ａ及び３２ａに対する編集操作は不可能である。

【0254】

図５８は、図５１に示すＨＰ作成支援装置２０の動作を説明するための図であり、コンピュータが編集モードに従ってユーザの編集操作に応じた処理を実行する処理をフローチャートで示す。

【0255】

プロセッサ１１は、ユーザによる入力操作部１３の操作に基づいて表示部１４ａにホームページの編集画面Ｓｅを表示する処理を実行し、以下のステップＳ３１〜３５の処理を行う。

【0256】

プロセッサ１１は、所定のブロックを対象としてユーザによる編集操作が行われたか否かの判定を行い（ステップＳ３１）、編集操作が行われていない場合は、この判定処理を繰り返す。一方、編集操作が行われた場合は、編集の対象とされた対象ブロックの編集モードが通常編集モードであるか一括編集モードであるかを判定する（ステップＳ３２）。

【0257】

例えば、対象ブロックの編集モードが一括編集モードである場合は、プロセッサ１１は、対象ブロックが親ブロックである場合のみ、対象ブロックとその子ブロックに対する編集操に応じた処理を実行する（ステップＳ３３）。

【0258】

一方、対象ブロックの編集モードが通常編集モードである場合は、プロセッサ１１は、対象ブロックが親ブロックであっても子ブロックであっても対象ブロックに対する編集操作に応じた処理を実行する（ステップＳ３４）。

【0259】

その後、プロセッサ１１は終了操作が行われた場合は、処理を終了し、終了操作が行われていない場合は、ステップＳ３１の処理に戻る。

【0260】

このように本実施形態３のＨＰ作成支援装置３０では、ユーザが操作対象とする親ブロックの編集モードをロックボタンにより一括編集モードと通常編集モードとの間で切り換え可能としたので、親ブロックをロックすることで、親ブロックが編集の対象ブロックとなったとき、対象ブロック及びその内部に含まれるブロックの一括編集のみを可能とし、親ブロックのロックを解除することで、親ブロック内の個々の子ブロックに対する個別の編集が可能となる。

【0261】

なお、実施形態３のＨＰ作成支援装置３０により行われるＨＰ作成支援処理も、実施形態１あるいは２と同様に、実施形態３のようにユーザ側の端末に搭載されているプログラムで動作するスタンドアロンアプリケーションではなく、ユーザ側の端末のブラウザ上で動作するプログラミング言語によるプログラムとウェブサーバに搭載されているプログラムとの協調により動作するウェブアプリケーションにより実行されてもよい。

【0262】

この場合、完成されたホームページのソースコードはサーバ側に格納されても、ユーザ側の端末に提供されてもよい。

【0263】

（実施形態４）
図５９は、本発明の実施形態４によるＨＰ作成支援装置４０を説明するための図である。

【0264】

この実施形態４のＨＰ作成支援装置４０は、実施形態１のＨＰ作成支援装置１０と同様に、情報の処理を行うコンピュータ４０ａと、入力操作部１３ａと、表示部１４ａとを有する。コンピュータ４０ａは、実施形態１のコンピュータ１０ａのメモリ１２に代わるメモリ４２を備えており、メモリ４２には、ホームページの作成を支援する処理として実施形態１のＨＰ作成支援装置１０のものとは異なる処理をプロセッサ１１に実行させるためのプログラムが格納されている。

【0265】

なお、実施形態４のＨＰ作成支援装置４０では、コンピュータ４０ａのメモリ４２以外の構成は、実施形態１のＨＰ作成支援装置１０と同一である。

【0266】

以下、実施形態４のＨＰ作成支援装置４０により行われる、ホームページの作成を支援する処理（以下、ＨＰ作成支援処理）を具体的に説明する。

【0267】

図６０は、この実施形態４のＨＰ作成支援装置４０の表示部１４ａに表示される編集画面Ｓｅを示す図である。図６０中、図１５と同じ符号が付されたものは、実施形態１の編集画面Ｓｅにおけるものと同一のものである。

【0268】

この実施形態４のＨＰ作成支援装置４０により行われるＨＰ作成支援処理は、コンピュータが、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別する処理と、コンピュータが、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理する処理とを含む。

【0269】

これらの処理は、プロセッサ１１がメモリ４２に格納されたプログラムを実行することにより行われる。また、メモリ４２には、プロセッサ１１をテキストエディッタとして機能させたり、ブラウザとして機能させたりするための一般的なオペレーションシステムが格納されていることは言うまでもない。また、このメモリ４２には、実施形態１、２、３
のＨＰ作成支援装置１０、２０、３０と同様にホームページの作成を支援する処理を行うためのプログラムがさらに格納されていてもよい。例えば、実施形態１のプログラムがメモリ４２に格納されている場合は、プレビュー画面Ｒｅｐでコンテンツの編集が可能となり、プレビュー画面Ｒｅｐで編集した１以上のコンテンツに対応するソースコードがソース画面Ｒｃｅに表示されることとなる。

【0270】

この実施形態４のＨＰ作成支援装置４０は実施形態１のＨＰ作成支援装置１０のＨＰ作成支援処理を行う機能は有していてもいなくてもよいが、ここでは、説明の都合上、実施形態１のＨＰ作成支援装置１０の機能を有するものとする。

【0271】

以下、このＨＰ作成支援装置４０を用いたホームページの編集処理を詳しく説明する。

【0272】

例えば、図６０に示す編集状態では、プレビュー画面Ｒｅｐに、１つのブロックボックスＢｒ４１が作成され、このブロックボックスＢｒ４１内にコンテンツ「ＡＢＣＤＥＦＧ」Ｃｔ４１が配置されている。なお、ソース画面Ｒｃｅには、プレビュー画面Ｒｅｐに表示されているページ全体に対応するソースコードＳｃ４が表示されており、ソースコードＳｃ４はｂｏｄｙ要素Ｓｃ４０を含み、ｂｏｄｙ要素Ｓｃ４０は、ブロックボックスＢｒ４１に対応するソース要素Ｓｃ４１を含んでいる。

【0273】

ユーザは、編集画面Ｓｅ上に表示されたテキスト編集画面ＴＳｅの操作ボタンＢｕ２１〜Ｂｕ２３などにより、ブロックボックスに含まれるコンテンツ「ＡＢＣＤＥＦＧ」Ｃｔ４１に対して種々のスタイルを設定することができる。

【0274】

ここで、スタイルの設定は以下のルール１〜３に従っている。

【0275】

（ルール１）ＣＳＳをＨＴＭＬ要素に設定する場合はｓｐａｎタグを用い、ｓｐａｎタグ以外のタグにＣＳＳを設定しない。これは、タグの整理の際に前後のタグが一致する確率を高めるためである。

【0276】

（ルール２）タグで分割されているコンテンツに跨ってタグを設定しない。

【0277】

なぜなら、タグで分割されているコンテンツに跨ってタグが設定されていると、開始タグと対応する終了タグとの間に、他のタグの開始タグおよび終了タグの一方のみが配置される部分が生じ、この部分ではＨＴＭＬ要素におけるタグの階層関係が判断できなくなり、結果的に、タグの階層関係に従って同一種類の終了タグと開始タグとを合体してソースコードを整理する最適化処理ができなくなるからである。

【0278】

（ルール３）タグにＣＳＳを設定する場合、親タグのＣＳＳは変更しない。１つのタグの親タグのＣＳＳは変更すると親タグにぶら下がっている他の子タグが影響を受けるためである。

【0279】

図６１は、図５９に示すＨＰ作成支援装置４０の動作を説明するための図であり、スタイル設定処理Ｓ４００〜Ｓ４０７でコンテンツに種々のスタイルを設定したときのソースコードの変化を示す。
（スタイル設定処理Ｓ４００）
例えば、図６０に示されるコンテンツ「ＡＢＣＤＥＦＧ」Ｃｔ４１のフォントサイズは１２に設定されている。このようなフォントサイズの設定は、図６１に示すように、ｄｉｖ要素の開始タグ＜ｄｉｖ＞にクラス属性「ｃｌａｓｓ＝“ｓ１２”」を付加することにより行われる。
（スタイル設定処理Ｓ４０１）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＤＥＦ」にフォントサイズ「１８」を設定する場合は、その設定は、ｓｐａｎタグを用い、その開始タグ＜ｓｐａｎ＞にクラス属性「ｃｌａｓｓ＝“ｓ１８”」を付加することにより行われる。
（スタイル設定処理Ｓ４０２）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＢＣＤ」に「ｃｏｌｏｒ ９９」を設定する場合は、その設定は、「ＢＣ」の前の開始タグ＜ｓｐａｎ＞および「Ｄ」の前の開始タグ＜ｓｐａｎ＞にクラス属性「ｃｌａｓｓ＝“ｃ９９”」を付加することにより行われる。
（スタイル設定処理Ｓ４０３）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＥＦ」に強調（ＥＭＰＨＡＳＩＳ）を設定する場合は、その設定は、コンテンツ「ＥＦ」を含むｓｐａｎ要素の前後に＜ｅｍ＞タグ＜／ｅｍ＞タグを配置することにより行われる。
（スタイル設定処理Ｓ４０４）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＡＢＣ」に別の強調（ＳＴＲＯＮＧ）を設定する場合は、その設定は、コンテンツ「Ａ」の前後に＜ｓｔｒｏｎｇ＞タグ＜／ｓｔｒｏｎｇ＞タグを配置し、コンテンツ「ＢＣ」の前後に＜ｓｔｒｏｎｇ＞タグ＜／ｓｔｒｏｎｇ＞タグを配置することにより行われる。
（スタイル設定処理Ｓ４０５）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＣＤＥ」にイタリック体を設定する場合は、その設定は、コンテンツ「Ｃ」、「Ｄ」、「Ｅ」の前の＜ｓｐａｎ＞タグにクラスの属性値「ｔｓ１」を付加することにより行われる。
（スタイル設定処理Ｓ４０６）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＡＢＣＧ」に、フォントサイズ「１８」を設定する場合は、その設定は、コンテンツ「ＡＢＣＤＥＦＧ」の「Ａ」、「Ｂ」、「Ｃ」、「Ｇ」のそれぞれの前の＜ｓｐａｎ＞タグにクラスの属性値「ｓ１８」を付加することにより行われる。
（スタイル設定処理Ｓ４０７）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＡＥＦＧ」に「ｃｏｌｏｒ ９９」を設定する場合は、その設定は、コンテンツ「ＡＢＣＤＥＦＧ」の「Ａ」、「Ｅ」、「Ｆ」、「Ｇ」のそれぞれの前の＜ｓｐａｎ＞タグにクラスの属性値「ｃ９９」を付加することにより行われる。
（スタイル設定処理Ｓ４０８）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＡＢＣＤＧ」に強調（ＥＭＰＨＡＳＩＳ）を設定する場合は、その設定は、コンテンツ「ＡＢＣＤＥＦＧ」の「Ａ」、「Ｂ」、「Ｃ」の＜ｓｔｏｒｏｎｇ＞タグの直前に＜ｅｍ＞タグを配置し、「Ａ」、「Ｂ」、「Ｃ」の＜／ｓｔｏｒｏｎｇ＞タグの直後に＜／ｅｍ＞タグを配置し、コンテンツ「ＡＢＣＤＥＦＧ」の「Ｄ」、「Ｇ」の＜ｓｐａｎ＞タグの直前に＜ｅｍ＞タグを配置し、「Ｄ」、「Ｇ」の＜／ｓｐａｎ＞タグの直後に＜／ｅｍ＞タグを配置することにより行われる。
（スタイル設定処理Ｓ４０９）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＤＥＦＧ」に強調（ＳＴＲＯＮＧ）を設定する場合は、その設定は、コンテンツ「ＡＢＣＤＥＦＧ」の「Ｄ」の＜ｅｍ＞タグの直前に＜ｓｔｒｏｎｇ＞タグを配置し、「Ｇ」の＜／ｅｍ＞タグの直後に＜／ｓｔｒｏｎｇ＞タグを配置することにより行われる。
（スタイル設定処理Ｓ４１０）
コンテンツ「ＡＢＣＤＥＦＧ」のうちの一部「ＡＢＦＧ」にイタリック体を設定する場合は、その設定は、コンテンツ「Ａ」、「Ｂ」、「Ｆ」、「Ｇ」の前の＜ｓｐａｎ＞タグにクラスの属性値「ｔｓ１」を付加することにより行われる。

【0280】

次に、このようにして得られたソースコードを整理する処理を説明する。

【0281】

このソースコードの整理処理は、基本的に２つのパターンを認識し、そのパターンの存在により、タグ内容を合体し、最適化を行うものである。

【0282】

その２つのパターンは以下のパターン１とパターン２である。

【0283】

（パターン１）
同じタグ（ｓｔｒｏｎｇ、ｅｍ、等）が隣りどうしになっている場合、その内容を合体し、一つのタグにすること。

【0284】

（パターン２）
隣り同士の特定のタグ（例えばｓｐａｎ）は同じクラス指定になっていれば、その内容を合体し、一つの特定のタグ（例えばｓｐａｎ）にすること。

【0285】

まず、プロセッサ１１は、入力されたソースコードＳｃ４ａを分析することにより、ソースコードＳｃ４ａを構成するＨＴＭＬ要素が形成する階層構造の上位の階層から順にＨＴＭＬ要素の分析を行う。

【0286】

ここでは、図６２のスタイル設定処理Ｓ４１０で得られたソースコードＳｃ４ａの整理を行う場合を例に挙げて説明する。この実施形態４のＨＰ作成支援装置４０の処理の対象となるソースコードはこれに限定されない。

【0287】

この実施形態４のＨＰ作成支援装置４０によるソースコードの整理は、ソースコードを構成する複数の要素の階層構造の各階層毎に上位の階層から順に行われる。

【0288】

１回目の整理処理（整理サイクル１）では、まず、図６３（ａ）に示すように、プロセッサ１１は、開始タグ＜ｄｉｖ ｃｌａｓｓ ＝ “ｓ１２”＞と終了タグ＜／ｄｉｖ＞との間に含まれるソースコードの記述を、このタグの１つ下の階層（第１階層）に属するＨＴＭＬ要素（第１階層要素）Ｅ１ａ〜Ｅ１ｇに区分する。

【0289】

次に、プロセッサ１１は、隣接する第１階層要素の間で、同一タグが隣接している箇所を検出し、同一タグで定義された要素を合体する。

【0290】

例えば、図６３（ａ）に示す例では、＜ｅｍ＞要素Ｅ１ａと＜ｅｍ＞要素Ｅ１ｂとの間、＜ｅｍ＞要素Ｅ１ｂと＜ｅｍ＞要素Ｅ１ｃとの間では、＜ｅｍ＞タグが隣接している。＜ｓｔｒｏｎｇ＞要素Ｅ１ｄと＜ｓｔｒｏｎｇ＞要素Ｅ１ｅとの間、＜ｓｔｒｏｎｇ＞要素Ｅ１ｅと＜ｓｔｒｏｎｇ＞要素Ｅ１ｆとの間、＜ｓｔｒｏｎｇ＞要素Ｅ１ｆと＜ｓｔｒｏｎｇ＞要素Ｅ１ｇとの間では、＜ｓｔｒｏｎｇ＞タグが隣接している。

【0291】

従って、プロセッサ１１は、図６３（ｂ）に示すように、＜ｅｍ＞要素Ｅ１ａ〜＜ｅｍ＞要素Ｅ１ｃを合体して１つの＜ｅｍ＞要素Ｅｅｍに変換し、＜ｓｔｒｏｎｇ＞要素Ｅ１ｄ〜＜ｓｔｒｏｎｇ＞要素Ｅ１ｇを合体して１つの＜ｓｔｒｏｎｇ＞要素Ｅｓｔに変換する。これにより整理されたソースコードＳｃ４ｂが得られる。

【0292】

次に、２回目の整理処理（整理サイクル２）では、プロセッサ１１は、＜ｅｍ＞要素Ｅｅｍに含まれるソースコードの記述、および＜ｓｔｒｏｎｇ＞要素Ｅｓｔに含まれるソースコードの記述の分析を行って、＜ｅｍ＞要素Ｅｅｍに含まれるソースコードの記述を、＜ｅｍ＞要素Ｅｅｍの１つ下の階層（第２階層）に属するＨＴＭＬ要素（第２階層要素）Ｅｅｍａ〜Ｅｅｍｃに区分し、＜ｓｔｒｏｎｇ＞要素Ｅｓｔに含まれるソースコードの記述を、＜ｓｔｒｏｎｇ＞要素Ｅｓｔの１つ下の階層（第２階層）に属するＨＴＭＬ要素（第２階層要素）Ｅｓｔｄ〜Ｅｓｔｇに区分する。

【0293】

次に、プロセッサ１１は、隣接する第２階層要素の間で、同一タグが隣接している箇所を検出し、同一タグで定義された要素を合体する。

【0294】

例えば、図６４（ａ）に示すように、＜ｓｔｒｏｎｇ＞要素Ｅｅｍａと＜ｓｔｒｏｎｇ＞要素Ｅｅｍｂとの間、＜ｓｔｒｏｎｇ＞要素Ｅｅｍｂと＜ｓｔｒｏｎｇ＞要素Ｅｅｍｃとの間では、＜ｓｔｒｏｎｇ＞タグが隣接している。

【0295】

＜ｅｍ＞要素Ｅｓｔｄと＜ｅｍ＞要素Ｅｓｔｅとの間、＜ｅｍ＞要素Ｅｓｔｅと＜ｅｍ＞要素Ｅｓｔｆとの間、＜ｅｍ＞要素Ｅｓｔｆと＜ｅｍ＞要素Ｅｓｔｇとの間では、＜ｅｍ＞タグが隣接している。

【0296】

従って、プロセッサ１１は、図６４（ｂ）に示すように、＜ｓｔｒｏｎｇ＞要素Ｅｅｍａ〜＜ｓｔｒｏｎｇ＞要素Ｅｅｍｃを合体して１つの＜ｓｔｒｏｎｇ＞要素Ｅｅｍ１に変換し、＜ｅｍ＞要素Ｅｓｔｄ〜＜ｅｍ＞要素Ｅｓｔｇを合体して１つの＜ｅｍ＞要素Ｅｓｔ１に変換する。これによりさらに整理されたソースコードＳｃ４ｃが得られる。

【0297】

続いて、３回目の整理処理（整理サイクル３）では、プロセッサ１１は、＜ｓｔｒｏｎｇ＞要素Ｅｅｍ１に含まれるソースコードの記述、および＜ｅｍ＞要素Ｅｓｔ１に含まれるソースコードの記述の分析を行って、＜ｓｔｒｏｎｇ＞要素Ｅｅｍ１に含まれるソースコードの記述を、＜ｓｔｒｏｎｇ＞要素Ｅｅｍ１の１つ下の階層（第３階層）に属するＨＴＭＬ要素（第３階層要素）Ｅｅｍ１１〜Ｅｅｍ１３に区分し、＜ｅｍ＞要素要素Ｅｓｔ１に含まれるソースコードの記述を、＜ｅｍ＞要素Ｅｓｔ１の１つ下の階層（第３階層）に属するＨＴＭＬ要素（第３階層要素）Ｅｓｔ１１〜Ｅｓｔ１４に区分する。

【0298】

次に、プロセッサ１１は、隣接する第３階層要素の間で、特定のタグが隣接し、かつタグのクラス指定（クラス属性の属性値）が同一となっている箇所を検出し、同じクラス指定を有する同一タグで定義された要素を合体する。

【0299】

例えば、図６５（ａ）に示すように、＜ｓｔｒｏｎｇ＞要素Ｅｅｍ１では、＜ｓｐａｎ＞要素Ｅｅｍ１２はその前の＜ｓｐａｎ＞要素Ｅｅｍ１１と同じクラス指定の同じタグを有し、＜ｓｐａｎ＞要素Ｅｅｍ１３はその前の＜ｓｐａｎ＞要素Ｅｅｍ１２と同じクラス指定の同じタグを有する。

【0300】

＜ｅｍ＞要素Ｅｓｔ１では、＜ｓｐａｎ＞要素Ｅｓｔ１２はその前の＜ｓｐａｎ＞要素Ｅｓｔ１１と同じクラス指定の同じタグを有し、＜ｓｐａｎ＞要素Ｅｓｔ１３はその前の＜ｓｐａｎ＞要素Ｅｓｔ１２と同じクラス指定の同じタグを有し、＜ｓｐａｎ＞要素Ｅｓｔ１４はその前の＜ｓｐａｎ＞要素Ｅｓｔ１３と同じクラス指定の同じタグを有する。

【0301】

従って、プロセッサ１１は、図６５（ｂ）に示すように、＜ｓｐａｎ＞要素Ｅｅｍ１１〜＜ｓｐａｎ＞要素Ｅｅｍ１３を合体して１つの＜ｓｐａｎ＞要素Ｅｅｍ２に変換し、＜ｓｐａｎ＞要素Ｅｓｔ１１〜＜ｓｐａｎ＞要素Ｅｓｔ１４を合体して１つの＜ｓｐａｎ＞要素Ｅｓｔ２に変換する。これによりより一層整理されたソースコードＳｃ４ｄが得られる。

【0302】

４回目の整理処理（整理サイクル４）では、プロセッサ１１は、＜ｓｐａｎ＞要素Ｅｅｍ２に含まれるソースコードの記述、および＜ｓｐａｎ＞要素Ｅｓｔ２に含まれるソースコードの記述の分析を行うが、これらの要素には区分されるべき要素は含まれていないので、図６６（ａ）に示すように、合体可能な記述パターンのＨＴＭＬ要素はないと判断し、３回目の整理処理（整理サイクル４）で得られた整理結果を４回目の整理結果（図６６（ｂ））として確定し、ソースコードの整理を完成する。

【0303】

このように本実施形態４では、作成されたホームページのソースコードに含まれる隣接するタグの種類、タグに含まれる属性、および属性値を判別し、判別結果が所定の条件を満たすとき、隣接するタグを１つのタグに置き換えてソースコードを整理するので、機械的に作成されたホームページのソースコードを冗長のない簡単な記述に変換することができ、ソースコードに基づいてホームページの表示を行うブラウザなどでデータ処理の負荷を低減することができ、ブラウザの応答性や検索速度などの向上を図ることができる。

【0304】

なお、上記実施形態４では、ソースコードとして、タグで分割されているコンテンツに跨ってタグが設定されている部分のないものを挙げて、ソースコードを整理するソースコードの最適化処理を説明したが、ソースコードの最適化処理は、ソースコードが、タグで分割されているコンテンツに跨ってタグが設定されている部分を含むものでも可能である。

【0305】

例えば、第１のＨＴＭＥ要素「＜ｄｉｖ＞＜ｅｍ＞ＡＢＣ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥＦＧ＜／ｓｔｒｏｎｇ＞＜／ｄｉｖ＞」では、コンテンツ「ＡＢＣＤＥＦＧ」がｅｍタグとｓｔｒｏｎｇタグとにより、コンテンツ「ＡＢＣ」とコンテンツ「ＤＥＦＧ」とに分割されている。

【0306】

これに対し、第２のＨＴＭＥ要素「＜ｄｉｖ＞＜ｅｍ＞ＡＢ＜ｓｐａｎ＞Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ＜／ｓｐａｎ＞ＦＧ＜／ｓｔｒｏｎｇ＞＜／ｄｉｖ＞」では、コンテンツ「ＡＢＣ」とコンテンツ「ＤＥＦＧ」とに跨るようにｓｐａｎ要素が設定されている。

【0307】

このような構成の第２のＨＴＭＥ要素では、コンテンツ「ＡＢＣＤＥＦＧ」のｓｐａｎタグ内にある部分「Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ」とｓｐａｎタグ外にある部分「＜ｅｍ＞ＡＢ」およびＦＧ＜／ｓｔｒｏｎｇ＞とで新しいタグをつけることにより最適化処理が可能となる。

【0308】

具体的には、ｓｐａｎタグ内にある部分「Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ」は、ｅｍ開始タグ＜ｅｍ＞とｓｔｒｏｎｇ終了タグ＜／ｓｔｒｏｎｇ＞を追加することで、「＜ｅｍ＞Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ＜／ｓｔｒｏｎｇ＞」に変更される。さらに、ｓｐａｎタグ外にある部分「＜ｅｍ＞ＡＢ」は、ｅｍ終了タグ「＜／ｅｍ＞」の追加により「＜ｅｍ＞ＡＢ＜／ｅｍ＞」に変更される。また、ｓｐａｎタグ外にある部分「ＦＧ＜／ｓｔｒｏｎｇ＞」は、ｓｔｒｏｎｇ開始タグ「＜ｓｔｒｏｎｇ＞」の追加により「＜ｓｔｒｏｎｇ＞ＦＧ＜／ｓｔｒｏｎｇ＞」に変更される。

【0309】

結果、第２のＨＴＭＥ要素「＜ｄｉｖ＞＜ｅｍ＞ＡＢ＜ｓｐａｎ＞Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ＜／ｓｐａｎ＞ＦＧ＜／ｓｔｒｏｎｇ＞＜／ｄｉｖ＞」は、第３のＨＴＭＥ要素「＜ｄｉｖ＞＜ｅｍ＞ＡＢ＜／ｅｍ＞＜ｓｐａｎ＞＜ｅｍ＞Ｃ＜／ｅｍ＞＜ｓｔｒｏｎｇ＞ＤＥ＜／ｓｔｒｏｎｇ＞＜／ｓｐａｎ＞＜ｓｔｒｏｎｇ＞ＦＧ＜／ｓｔｒｏｎｇ＞＜／ｄｉｖ＞」に変更される。

【0310】

これにより、第２のＨＴＭＥ要素は、タグで分割されているコンテンツに跨ってタグが設定されている部分のないもの（第３のＨＴＭＥ要素）となる。

【0311】

また、実施形態４のＨＰ作成支援装置４０により行われるＨＰ作成支援処理も、実施形態１ないし３のいずれかと同様に、実施形態４のようにユーザ側の端末に搭載されているプログラムで動作するスタンドアロンアプリケーションではなく、ユーザ側の端末のブラウザ上で動作するプログラミング言語によるプログラムとウェブサーバに搭載されているプログラムとの協調により動作するウェブアプリケーションにより実行されてもよい。

【0312】

この場合、最適化されたソースコードはサーバ側に格納されても、ユーザ側の端末に提供されてもよい。

【0313】

以上のように、本発明の好ましい実施形態を用いて本発明を例示してきたが、本発明は、この実施形態に限定して解釈されるべきものではない。本発明は、特許請求の範囲によってのみその範囲が解釈されるべきであることが理解される。当業者は、本発明の具体的な好ましい実施形態の記載から、本発明の記載および技術常識に基づいて等価な範囲を実施することができることが理解される。

【産業上の利用可能性】

【0314】

本発明は、ホームページの作成を支援する方法、プログラム、記録媒体、および装置の分野において、一般ユーザがホームページの編集画面上で簡単な操作により思い通りのホームページを作成することができるものとして有用である。

【符号の説明】

【0315】

１ 要素「テキスト」
２ 内容
３ 開始タグ
４ 終了タグ
１０、２０ ＨＰ作成支援装置
１０ａ，２０ａ コンピュータ
１１、２１ プロセッサ
１２、２２ メモリ
１３ 入力インターフェース
１３ａ 入力操作部
１４ 出力インターフェース
１４ａ 表示部
１５ 入出力インターフェース
１５ａ 外部記憶装置
１６ ネットワーク制御部
１７ データバス
３１ ｓｔｙｌｅ属性
Ｂ、Ｂ１〜Ｂ４ ボックス
Ｂａ、Ｂｄａ、Ｂｄｂ１〜Ｂｄｂ２、Ｂｄｃ１〜Ｂｄｃ２、Ｂｄｄ、Ｂｄｅ１〜Ｂｄｅ２、Ｂｄｆ１〜Ｂｄｆ２ Ｅ１、Ｓｒｂ０ ｂｏｄｙ要素
Ｂｒ１ａ〜Ｂｒ１ｄ、Ｂｒ２ａ〜Ｂｒ２ｄ、Ｂｘ１ａ〜Ｂｘ１ｃ、Ｂｘ２ａ〜Ｂｘ２ｃ ブロックボックス
Ｂｒ３、Ｂｒ３ａ〜Ｂｒ３ｂ、Ｂｘ１ｄ〜Ｂｘ１ｆ、Ｂｘ２ｄ〜Ｂｘ２ｆ インラインボックス
Ｂｕ１〜Ｂｕ６、Ｂｕ２１〜Ｂｕ２４ 操作ボタン
Ｃ１〜Ｃ４ 内容（１）〜内容（４）
Ｃ１ａ〜Ｃ１ｆ、Ｃ２ａ〜Ｃ２ｆ、Ｃｎ、Ｃｎ１〜Ｃｎ６、Ｃｒ１〜Ｃｒ３、Ｃｒ３ａ、Ｃｒ３ｂ コンテンツ
Ｃｈｔ１、Ｃｈｔ３、Ｅｈｔ１、Ｅｈｔ２、Ｓｈｔ２、Ｓｈｔ３ ハイライト領域
Ｃｃｒ２、Ｈｃｒ３、Ｓｃｒ１ クリック領域
Ｄ 表示データ
Ｄｃ 属性情報
Ｄｃｐ プロパティ
Ｄｃｖ 値
Ｄｅ 宣言要素
Ｄｈ 記述
Ｄｍ マージン領域の幅
Ｄｈｓ 階層構造情報
Ｄｐ パディング領域の幅
Ｄｓ セレクタ
Ｄｓ１ｂ、Ｄｓ１ｃ ｔｅｓｔ１属性
Ｄｓ２ｂ、Ｄｓ２ｃ ｔｅｓｔ２属性
Ｄｓｅ、Ｄｓｆ ｔｅｓｔ属性
Ｄｔｘ テキスト入力領域
Ｅ２、Ｅｒ１ａ〜Ｅｒ１ｅ、Ｅｒ２ａ〜Ｅｒ２ｄ、Ｅｒ３、Ｅｒ３０〜Ｅｒ３２ ｄｉｖ要素
Ｅ３ ｐ要素
Ｅ４ ｕ要素
Ｅｇ、Ｅｇ１〜Ｅｇ６ 表示要素ガイド
Ｅｈ ＤＯＭ構造の階層構造
Ｅｈ１ ブラウザ上ＤＯＭの階層構造
ＥＬｄ ＤＯＭ構造要素（識別子）
ＥＬｓ ソース要素（識別子）
Ｅｍ１ａ〜Ｅｍ１ｃ、Ｅｍ２ａ〜Ｅｍ２ｃ、Ｅｎ１ｂ〜Ｅｎ１ｃ、Ｅｎ１ｅ〜Ｅｎ１ｆ、Ｅｎ２ｂ〜Ｅｎ２ｃ、Ｅｎ２ｅ〜Ｅｎ２ｆ ブロック要素
Ｅｍ１ｄ〜Ｅｍ１ｆ、Ｅｍ２ｄ〜Ｅｍ２ｆ、Ｅｒ３ａ〜Ｅｒ３ｄ インライン要素
Ｅｐｓ 位置情報
Ｅｓ スタイルを設定するための記述
Ｅｔａ タグ種情報
Ｇ ガイド記号
Ｒｇ１〜Ｒｇ６ 表示用要素ガイド
Ｈａ、Ｈｄ、Ｈｄａ、Ｈｄｂ１〜Ｈｄｂ２、Ｈｄｃ１〜Ｈｄｃ２、Ｈｄｄ、Ｈｄｅ１〜Ｈｄｅ２、Ｈｄｆ１〜Ｈｄｆ２、Ｓｒｈ０ ｈｅａｄ要素
Ｈｅ、Ｈｅ１〜Ｈｅ６、Ｈｍ１〜Ｈｍ６ ＨＴＭＬ要素
Ｈｐａ〜Ｈｐｆ、Ｓｄ 表示画面
Ｍ１〜Ｍ４、Ｐ１〜Ｐ４、Ｖ１〜Ｖ２ 値入力領域
Ｍｄｅ ＤＯＭ構造要素マップ
Ｍｐ マウスポインタ
Ｍｓｅ ソース要素マップ
Ｎ ネットワーク
Ｎｄ ノード情報
Ｎｅ１〜Ｎｅ６ ノード
Ｒｂ ボックスの境界
Ｒｂｕ ボタン配置領域
Ｒｃ 内容領域（表示される部分）
Ｒｃｅ ソース画面
Ｒｅｏ 操作画面
Ｒｅｐ プレビュー画面
Ｒｅｓ 素材選択画面
Ｒｈｄ 階層構造画面
Ｒｍ マージン領域
Ｒｐ パディング領域
Ｓ 操作信号
Ｓ１、Ｓｃ、Ｓｃａ、Ｓｃｂ１〜Ｓｃｂ２、Ｓｃｃ１〜Ｓｃｃ２、Ｓｃｄ、Ｓｃｅ１〜Ｓｃｅ２、Ｓｃｆ１〜Ｓｃｆ２、Ｓｒ０、Ｓｒ１ａ〜Ｓｒ１ｈ、Ｓｒ３、Ｓｒ３０〜Ｓｒ３２ ソースコード
Ｓｂ、Ｓｂ１〜Ｓｂ６ シンボル
Ｓｅ、Ｓｅ２ 編集画面
Ｓｅｃ セレクタ
Ｔｔ ｔｉｔｌｅ要素
ＴＳｅ テキスト編集画面

【図1】

【図2】

【図3】

【図4】

【図5】

【図6】

【図7】

【図8】

【図9】

【図10】

【図11】

【図12】

【図13】

【図14】

【図15】

【図16】

【図17】

【図18】

【図19】

【図20】

【図21】

【図22】

【図23】

【図24】

【図25】

【図26】

【図27】

【図28】

【図29】

【図30】

【図31】

【図32】

【図33】

【図34】

【図35】

【図36】

【図37】

【図38】

【図39】

【図40】

【図41】

【図42】

【図43】

【図44】

【図45】

【図46】

【図47】

【図48】

【図49】

【図50】

【図51】

【図52】

【図53】

【図54】

【図55】

【図56】

【図57】

【図58】

【図59】

【図60】

【図61】

【図62】

【図63】

【図64】

【図65】

【図66】