下は背景画像とカラーコード#333333黒の組み合わせの上にテキスト文字がシロで表示されている三層構造の例です。左クリックのまま引きずってドラックすると、テキスト文字部分だけ色が反転し、背景画像とテキスト文字が別々になっていることがわかります。
このホームページはWebアクセシビリティを保ちつつ、背景画像がFire fox等「Web完全形式」でも保存できる特徴があります。（オリジナル）2024年5月5日現在HTML Liveng Standard検証サイトが見つからない
2024年11月6日reset.css（様々なブラウザに対応してくれます）URLから取り込む方法で、コピペで作れるようにしました。
2016年2月5日ネットからでもnetにつないでいない状態でも、デスクトップ上に「完全形式で保存」すると、「HTMLファイルのみ」消えているかのような不具合について、（前回はパソコン起動ごとに保存結果が異なっていたが）再起動すれば、HTMLファイルは表示されることがわかりました。動画「IE11で証拠ムービーWMV形式192KBを再生する」で確認できます。（CSSファイルや画像が入っている）黄色いフォルダだけが現れ、「新規作成」フォルダに入れると、⇒HTMLファイルが現れます。閲覧ソフト「IE」や「Safari」のアーカイブ形式（CSSと一体型）ならば問題ありません。Windows11では完全形式でデスクトップに保存先を合わせても「html」ファイルが表示され、見ることができます。
2015年12月26日Googleモバイルフレンドリーテストにパスしました。スマホ・PC共通化レスポンシブwebデザイン。
2014年3月Webページ保存方法で、テレビの字幕スーパーの様な（文字の入っていない）「タイトル背景」の上にキーボード文字入力をして、⇒二層で表示する方法で、Web完全形式でもメニューボタン画像が保存でき、アーカイブ形式と同じ保存ができるようになりました。（キーボード文字入力は視覚障害者向け音声読み上げソフトNVDAに有効）この「ひな型」は個人や非営利は無料です。©著作権法2条十の二「プログラム著作物」です。利用には無料期間を提示してください。
mail:szheyuan383@gmail.com下の画像がダウンロードファイルに入っている「index.html」に動画を入れた状態です。
ここをクリックして、無料簡易homepageひな型画面を見られます。（動画再生画面付ではありません。）
下の画面はプレーヤーテスト画面です。こちらをクリックして動画再生方法のページに入ります。
ファビコンが見えるひな形HTML5が見られます。
このひな型はクリエイティブ・コモンズ 表示 - 非営利 2.1 日本
ライセンスの下に非営利で改変使用できます。
ここから「ひな型408KB」をダウンロード（デスクトップにダウンロード設定しないと表示されない場合があります）できます。
コピペでヒナ型作り
（下図のように、ドラックで）<!DOCTYPE html>～以降</html>まで左クリックのまま下に引きずるドラックで、（文字を反転させ）コピーして、メモ帳に保存して、ファイル名を半角英字で「index.html」と書く。
下の画像を押すと、パラパラで「コピー&ペースト」方法が見られます。
「コピー＆ペースト」パソコン操作の流れWMV形式286KB動画を再生する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ここにタイトル。</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" />
<link rel="stylesheet" href="style.css" />
<meta name="description" content="ここにホームページの説明。" />
<meta name="keywords" content="キーワードを半角カンマ（,）で複数入力。" />
<meta name="author" content="匿名" />
<link rel="next" href="index.html" />
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="title">
<h1>ここにタイトル。</h1></div>
<p>ここに本題や画像の説明やホームページの説明。</p>
<img src="a-1.jpg" alt="ここに画像の説明。" title="ここに画像の説明。"/>
<p>ここに画像の説明。</p>
<img src="a-2.jpg" alt="ここに画像の説明。" title="ここに画像の説明。"/>
<p>ここに画像の説明。</p>
<img src="a-3.jpg" alt="ここに画像の説明。" title="ここに画像の説明。"/>
<p>ここに画像の説明。</p>
<img src="a-4.jpg" alt="ここに画像の説明。" title="ここに画像の説明。"/>
<p>ここに画像の説明。</p>
<img src="a-5.jpg" alt="ここに画像の説明。" title="ここに画像の説明。"/>
<div id="footer"><a
href="http://jigsaw.w3.org/css-validator/check/referer"><img
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="正当なCSSです!" height="31" width="88"
/></a></div>
<div class="menu0"><img src="title.jpg" alt="完全形式用タイトル画像"
title="完全形式用タイトル画像" width="0" height="0" /></div>
</body>
</html>
⇒メモ帳に保存して、⇒ファイル名を半角英字で「index.html」と入力。「index（ドット）html」
次にスタイルシート「CSSファイル」を作ります。
下のすべてを左クリックを押したまま、（ドラックで）コピーして、⇒メモ帳に保存して、⇒ファイル名を半角英字で「style.css」と書いてください。（@charset "UTF-8";～から.menu0 img { max-width: 100%; }までコピーをする）
@charset "UTF-8";
html {
font-size: 100%;
}
img {
max-width: 100%;
}
body {
background:url(title.jpg) no-repeat;
background-position: 50% 0%;
text-align: center;
color: #ffffff;
}
h1 {
margin: 0 auto;
}
#body {
width: 765px;
}
#contents {
margin-top:25px;
}
p {
font-style:normal;
font-size: 20px;
color: #333333;
text-indent: 1em;
}
img {
max-width: 100%;
}
最後に、下の文字の入っていないタイトル背景画像を右クリックして⇒「名前をつけて保存」⇒半角英字で「title.jpg」と付ける。
ここをクリックして、テスト用画面が見られます。
