Webページの作成と保存結果について、お尋ねします。

Question

Webページの作成と保存結果について、質問します。
HTML作成方法では、タイトル作成には3種類あり、
①画像で作る方法（はじめからタイトル文字と画像が一体）
②画像は使わず、「キーボード文字入力」と「カラーコード」等で背景を作る方法で、公的なサイトや検索エンジン等では、視覚障害者向け音声読み上げソフトNVDA等に対応した「Webアクセシビリティ」基準で作られ、「見出しタグ＜h1＞文字入力」は、HTML検証で条件にしている場合があり、背景画像が使われない理由です。
③そして今回質問するテレビの「字幕スーパー」のように背景画像の上にキーボード文字入力をして、二層で表示する方法がありますが、③の「字幕スーパー」方法では、「Web完全形式保存方法」で背景画像が保存できできなかったのですが、CSSファイルではなく、HTML5やXHTMLファイル側に、<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>を入れると、Web完全形式でもタイトル背景画像が保存でき、アーカイブ形式と同じ保存ができます。今までこのような方法が普及しなかった欠点を調べたく質問しました。
　原因がわかりました。IE9ではこの方法では保存されないことがわかりました。ウィンドウズシステムプログラマさん、ありがとうございました。ずっとかみ合わなかったのは、IE9でみえないんですよね。

Answer 1

質問内容がわかりません。質問者さんはこの文章を読み返して、回答者に何を求めているのか理解できるのでしょうか？

Answer 2

要するに Web ページでボタンを表現する方法として、アクセシビリティの観点からのベスト プラクティスを紹介しているサイトや情報が無いか、という話のようですね。

ちょっと質問内容としては抽象的すぎるのでこのフォーラムで適切かどうか微妙ですが、何か情報をお持ちの方がいればぜひ紹介してください。

---

hebikuzure

Answer 3

編集されましたが、③の最初が異様に長い文ですし、質問者さんは本当にご自身の書かれた文章を読まれているのでしょうか？

そして今回問題の「メニューボタン背景」と「クリック済メニューボタン背景」で2枚だけ用意し、テレビの字幕スーパーのように背景画像の上にキーボード文字入力して、二層で表示する方法がありますが、公的なサイトや検索エンジン等では、視覚障害者など多様な利用者に対応した「Webアクセシビリティ」基準で作られ、メニューボタンに①や③の画像メニューボタンが使われないサイトが多く、特に「見出しタグ＜h1＞文字入力」は、HTML検証で条件にしている場合があり、③の「タイトル背景画像の上にキーボード文字入力2層構造表示」をすると、Web完全形式では、背景のみ保存できず、キーボード文字入力(視覚障害者向け音声読み上げソフトNVDA)に対応したWebページと両立できなかったのですが、CSSファイルではなく、HTML5やXHTMLファイル側に、<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>を入れると、Web完全形式でもメニューボタン画像が保存でき、アーカイブ形式と同じ保存ができるようになりましたが、アメリカのGoogleやYahoo検索エンジンやWeb完全形式が主な保存方法であるFire foxのMozillaのサイトを見ても、「③背景画像の上にキーボード文字入力2層構造表示方法」でwebページが作られていません。

それはそうとして、

「タイトル背景画像の上にキーボード文字入力2層構造表示」をすると、Web完全形式では、背景のみ保存できず

は保存に使用したツールの問題なのでは。例えばInternet Archive等のサイトではきちんと保存できているでしょうし、別のツールを使うまでです。
また、ボタンの外見・背景としてbackground-imageを使用するのはしごく普通のことですので、③の実現方法として避ける理由がありません。

参考になるかわかりませんが、例えばDojo ToolkitのButtonウィジェットのテンプレートには、ARIAのrole="button"などが指定されています。

Answer 4

私の回答が「不適切な発言」だそうですが、結局、質問者さんは何を求めているのでしょうか？ 最初に書いたように質問内容がわかりません。それは他の人も同じだからこそ誰からもコメントが付かないのではないでしょうか。

先にも書きましたが、

> Web完全形式では、背景のみ保存できず
ツールの問題でしょう。他のツールでは保存できるはずです。特定のツールでの動作に関する質問でしたら、ツール名を提示しなければ話が始まりません。

> W3C等で、関連ページがあれば、URLを教えてください
ARIAのキーワードを挙げましたがご存じないのでしょうか？ これを知らないでは何も始まらないと思うのですが。Accessible Rich Internet Applications (WAI-ARIA) 1.0です。先のコメントでrole="button"を挙げましたがこれもARIAに依るものです。質問者さんが挙げられたindex.htmlの例には role="menu" など含まれていないのでNVDA等もメニューであると認識できないでしょう。

> Mozillaは応答拒否を表示しています。
何の話かわかりません。FirefoxはARIAに対応しているはずですが。

Answer 5

フォーラム オペレーターの星 睦美です。
aoibara さん、投稿ありがとうございます。

質問の内容を変更したとのこと、私のほうでも[回答の候補に設定] した箇所は取消しをさせていただきました。フォーラムではコミュニティの回答者からの返信スレッドに投稿者から返信を行い質問のやり取りをすすめる流れになっていますので、回答としての返信内容に疑問な点がありましたら投稿者から返信をして質問を続けていただければと思います。

＞またソフトをダウンロードせずに避難所にあるパソコンの初期設定でも作れるホームページを作りたいのです。ご協力をお願いします。

aoibara さんがホームページを作成するために使用しているアプリケーションや条件（「ソフトをダウンロードせずに避難所にあるパソコンの初期設定でも作れるホームページ」）に関して詳しく書いていただくと質問への適切なアドバイスにつながるのではないかと思います。

---

フォーラム オペレーター　星 睦美 - MSDN Community Support

Answer 6

なんかいろんなことを言いたくて、それを全部書くから、読む側は分からなくなる、読みたくなくなる、のでは。

問題なり、質問なり、分けられるだけ分けて、それぞれ、テーマをひとつに絞って、それだけを単純化して、書けばよいのでは。

Answer 7

私はW3Cレベル以上でHTMLやCSS検証パスできるホームページを作っています。またソフトをダウンロードせずに避難所にあるパソコンの初期設定でも作れるホームページを作っています。

Answer 8

めんどうでしょうが、NVDAのダウンロードをお願いします。再度メニューボタン付ひな形を投稿したいのですが、操作しているフォーラムオペレーター星さんを説得していただけないでしょうか？

Answer 9

再度メニューボタン付ひな形を投稿したいのですが、

貼り付けたCSS等が自動置換されて困っているのですね。

このフォーラムではいくつかのキーワードは「自動」で置換されるようで、
 「自動」で置換されてしまう事象は避けられないようです。（セキュリティ等を考慮してのことだと思っています）
できればzipで頂ければと思います。

NVDAのダウンロードと、再現のためのHTML/CSS/画像の作成はいたしました。

「Web完全形式」での保存とは、「メニューバー」の「ファイル」から「名前を付けて保存」でファイルの種類を「Ｗebページ、完全」を選択したときのことでよろしいでしょうか？

 質問となる背景の確認ですが、
全体的にWebページのローカルファイルへの保存にこだわっているように感じられました。
「ソフトをダウンロードせず待避場所にあるパソコンの初期設定でもホームページを作れるようにするため」でしょうか？
避難所にあるパソコンで「Ｗebページ、完全」で保存すると「<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>」を挿入しなかった場合、想定どおり保存されなかったのかなと読み取りましたが、正しいでしょうか？

Answer 10

Include Background images background-image url(...) when saving a webpage (.html or .mht)  Microsoft Connect

この仕様を回避するために、同じ画像を<img>タグで挿入しておく、という回避策を採っているだけれども、その回避策を採ることが最善なのか、という質問？

ところで、アーカイブ形式では保存されてると思われているようですが、完全と同じで保存されてません。urlがそのままなので、インターネットかキャッシュを見に行って表示されてるだけです。

Answer 11

めんどうでしょうが、NVDAのダウンロードをお願いします。

ダウンロードしたところで異様に長い１文が短くなるわけでもありませんし、質問内容がわかるようになるわけではないと思います。

再度メニューボタン付ひな形を投稿したいのですが、操作しているフォーラムオペレーター星さんを説得していただけないでしょうか？

CSSを正しく投稿できないのはここMSDNフォーラムの仕様のようです。以前から指摘されてはいますが修正される様子はなさそうです。それはそうと、投稿直後に既に書き変わっているわけですから人の手が介在していないことは明らかです。開発者フォーラムの利用者であれば、これがプログラムに依るものか、モデレーターさんの操作なのかを判別できそうなものですが。

ところで「投稿者」と「批判者」という記述をされていますが私も投稿者です。質問者と回答者では？ もう少し日本語を勉強した方がいいと思います。
どんなにアクセシビリティを考慮した設計でも、閲覧者がコンテンツを読み取れない・理解できないようでは意味がありません。逆にアクセシビリティに多少の難があったとしても良質なコンテンツであればアクセスされます。

MozillaはMail等での応答拒否を表示しています。（Mozillaのフォーラムには投稿できました）IEでも「タイトル背景画像の上にキーボード文字入力2層構造表示」について「相談できるmail先」が載っていれば、教えてください。

なぜ質問者さんの指定する手段でやり取りを強要するのでしょうか。MozillaであれMicrosoft社であれコンタクト手段は提供されており、それに従うべきです。
メールではありませんが、Internet Explorerについてはいくつかあり

• Microsoft Connect。議論でなくピンポイントで説明する必要があります。内容によってはIE開発者が対応してくれます。意図が伝わらないと速攻でInvalidにされてしまいますが。
• Microsoftサポート。メールでの問い合わせも可能です。有償ですが質問内容が伝わるまで根気強く対応してくれます。
• このフォーラム。Microsoft社は運営しているだけであまり答えることはありませんが、詳しい方が答えてくれます。質問内容が伝わればの話ですが。
• 英語版のInternet Explorer Forum。運が良ければIE開発者が答えてくれることがあるかも。

当然ですが、あくまでInternet Explorerについてであり、NVDAなど外部のものについては扱ってくれない場合があります。

ところで、W3Cのページを紹介しましたが無視でしょうか？

Answer 12

＞佐祐理さん
 　
質問者さんの本当に知りたいことを少しづつ聞き出す方向で話を進めて行きたいと思っています。　
最初は、誰一人も何を解決したいのか分からなくても、対話を繰り返しながら段々あきらかになることは少なくないと思っています。
　

ダウンロードしたところで異様に長い１文が短くなるわけでもありませんし、質問内容がわかるようになるわけではないと思います。

それは私の認識とは異なりました。
話を続けていくことで、本当に知りたいことが分かってくるものだと思っています。
最初は分からなくても、対話を繰り返しながら掘り下げていくことが出来ると思っています。
　

ところで、W3Cのページを紹介しましたが無視でしょうか？

本筋とはあまり関係ない可能性がありそうです。
質問内容が分からない状況でその事に関して解答を催促しても問題が解決しない可能性が高いと思っています。

Answer 13

「ところで、アーカイブ形式では保存されてると思われているようですが、完全と同じで保存されてません。urlがそのままなので、インターネットかキャッシュを見に行って表示されてるだけです。」とありますが、私のサイトでは確認用に同じものを用意してあり、今完全形式で確認してフォルダに入れてから、開いてみたのですが、問題なく、ピンとこないのですが？

Answer 14

あなたが

③の「字幕スーパー」方法では、「Web完全形式保存方法」で背景画像が保存できできなかったのですが、CSSファイルではなく、HTML5やXHTMLファイル側に、<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>を入れると、Web完全形式でもタイトル背景画像が保存でき、アーカイブ形式と同じ保存ができます。

と言ってる部分です。これに対して、

アーカイブ形式では保存されてると思われているようですが、完全と同じで保存されてません。（アーカイブ形式では、）urlがそのままなので、インターネットかキャッシュを見に行って表示されてるだけです。

と言ってるのです。なので、

<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>を入れると、Web完全形式でもアーカイブ形式でもタイトル背景画像が保存できます。

は両方に対する回避策です。

Answer 15

英語のサイトを見てきました。ウィンドウズスクリプトプログラマさんが言っている「アーカイブ形式では保存されてると思われているようですが、完全と同じで保存されてません。urlがそのままなので、インターネットかキャッシュを見に行って表示されてるだけです。」について、原因がわかりました。IE9ではこの方法では保存されないことがわかりました。ウィンドウズシステムプログラマさん、ありがとうございました。ずっと話がかみ合わなかったのは、ウィンドウズスクリプトプログラマさんがIE9でみえないんですよね。ウィンドウズスクリプトプログラマさん引用したサイトを私はすべて見ていませんでした。しかも最初はざっくりと見てました。この引用部分中の詳細をクリックすると、IE9で起こる問題と書かれていて、ウィンドウズスクリプトプログラマさんがずっとコピペを間違えたとばかり思っていました。

Answer 16

<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>

がないhtmlを開いて、mhtに保存して、mhtファイルをメモ帳で開いてみれば、title.jpgが保存されてないことが分かるでしょう？

Answer 17

ウィンドウズスクリプトプログラマさんへ

私のコピペをしていただいたと思われますが、CSSのほうに問題がありまして、

background-%となっているはずです。正しくはbackground-の後ろに「position」「:」「50」が入り、「%」以降は大丈夫です。

さらに問題がありまして、背景画像を自分で作ってもらわなければなりません。ペイントソフトで770px＊70pxで黒っぽいほうがいいと思います。画像ファイル名を「title.jpg」で保存してください。

ZIP形式ではないのですが、テスト用メニューボタン付のホームページ画面があり、そこのリンクを表示します。

Answer 18

プリントスクリプトさんへ

<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>

がないhtmlを開いて、mhtに保存して、mhtファイルをメモ帳で開いてみれば、title.jpgが保存されてないことが分かるでしょう？

まさに私が皆さんに主張したい「ポイント」のすべてです。ゼロでいいんです。なのに保存されるんです。ホームページはまったく変化なく、なのにこれが「ある」と「ない」とでは、タイトル背景が「完全形式」で保存されるか、されないかが決まります。このタグをつけ「完全形式」で保存して、次に

<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>

を消して、⇒完全形式で保存すれば、文字のカラーコードはシロの#ffffffなので、画面は真っ白になってわからないのですが、タイトル付近を左クリックでドラックすると水色で文字が「ここに全角日本語で入力。」と見えます。

Answer 19

background:url(title.jpg)がアーカイブや完全で保存されない、のは、ieの仕様である。

その回避策が、<img src="title.jpg" width="0" height="0" />を入れる、である。

そこまではいいですか？

その上で、他に質問がありますか？

Answer 20

ブラウザのそういった保存機能は、
内部表現に置き換えたものを出力し直すこともあるようで、
不可逆だったり、欠落などします。
# なので、zipで良いのでは？

Answer 21

返信遅れてすいません。ZIP形式ではないのですが、テスト用メニューボタン付のホームページ画面があり、そこのリンクを表示します。

{「Web完全形式」での保存とは、「メニューバー」の「ファイル」から「名前を付けて保存」でファイルの種類を「Ｗebページ、完全」を選択したときのことでよろしいでしょうか？}について、おっしゃるとおりです。

｛避難所にあるパソコンで「Ｗebページ、完全」で保存すると「<div class="menu0"><img src="title.jpg" width="0" height="0" /></div>」を挿入しなかった場合、想定どおり保存されなかったのかなと読み取りましたが、正しいでしょうか？｝について、

311等直接汗をかいたことはありません。被災したわけでもありません。私の想定です。ソーシャルネットワークがあるので、ホームページを使おうとする人はいないと思います。偽善者です。いい人ぶっているだけです。

Answer 22

ウィンドウズスクリプトプログラマさんへ

返信が遅れ、すいません。「background:url(title.jpg)がアーカイブや完全で保存されない、のは、ieの仕様である。

その回避策が、<img src="title.jpg" width="0" height="0" />を入れる、である。そこまではいいですか？」について、

「IE」や「Safari」の「アーカイブ形式」では保存できますが、「IE」や「Fire fox」の「Web完全形式」では保存されなかったのが英文サイトのほうで、英語版の人はアーカイブの話に触れていないので、アーカイブは保存できているはずです。私も今までの③の「字幕スーパー」のように背景画像の上にキーボード文字入力をして、二層で表示する方法では、英語版の人と同じ結果になっていましたが、今は両方でも保存できる点が英語版と違う点で、「その回避策が、<img src="title.jpg" width="0" height="0" />を入れる」になります。ウィンドウズスクリプトプログラマさんの言葉をそのまま使わせていただくと、

background:url(title.jpg)が完全で保存されない、のは、ieやFire fox等の仕様である。

その回避策が、<img src="title.jpg" width="0" height="0" />をHTMLファイル側に入れる、である。

そこまではいいですか？」というのが私の方法です。たとえば、styleをHTMLファイル内に書けば、完全形式でも保存できるんです。CSSとHTMLファイルに分けるから、背景が消えるんです。

Answer 23

繰り返しになりますが、

sample.htm

<style>
body {background:url(title.jpg);}
</style>

これを開いて、アーカイブと完全で保存。

完全は.filesフォルダもできない。アーカイブはメモ帳で開いてみればtitle.jpgが入ってない、でしょう？

なんか、質問とかでなく、問題と回避方法を見つけたので、それを発表したかったということですか？

それから、前にも言いましたが、アーカイブでは保存はされないけれどurlがそのままなので表示はされる。

完全では、相対アドレスでなく、絶対アドレスにすれば同様に保存はされないけど表示はされる。

補足、win7+ie11で確認。なのでたぶん他も同様。

Answer 24

結局のところ質問内容は何で、それに対する答えは何だったのでしょうか？IE9に問題があったように書かれていますが、それが何を意味するのかよくわかりませんでした。

私からは「別のツールを使うまでです。」や「ツールの問題でしょう。他のツールでは保存できるはずです。特定のツールでの動作に関する質問でしたら、ツール名を提示しなければ話が始まりません。」が適切な回答だったということでしょうか？

Answer 25

background-imageのパスが画像ファイルの実体として保存されないことは
IE9だけでなく、IE11でも同じです。(実機にて確認済み)
　
aoibaraさんやウィンドウズスクリプトプログラマさんが書かれていることは、基本的にＩＥのバージョンは関係無いと思っています(少なくともＩＥ１１以前)。
英語サイト(Connect)は、ＩＥ９で発生したという報告がされているだけで、ＩＥ９に限定しているわけではありません。
　
操作内容だけでなく、保存された中身のソースファイルや出力ファイルを比べてみると、
「<img src="title.jpg" width="0" height="0" />」が存在しない場合に、
背景が消える理由(または表示されたりされなかったりする理由）が理解でき、
aoibaraさんが考える欠点がどのようなものか分かってくると思います。
　
偽善者だとかは関係なく、とにかく誠実に回答のやりとりをして頂ければと思います。

Answer 26

アーカイブはメモ帳で開いてみればtitle.jpgが入ってない、でしょう？

見方が分からないのかも。

sample1.htm

<style>
body {background:url(title.jpg);}
< /style>

sample2.htm

<style>
body {background:url(title.jpg);}
< /style>

<img src="title.jpg" width="0" height="0" />

これらを開いて、アーカイブと完全で保存。アーカイブのほうはファイルのサイズを比べてみれば、保存されてないと分かるでしょう？

ここまで言えば分かると思いますが、それでも分からない場合、よそではそういうことを言わないほうがいいですよ。間違ってますから。