a-go-go.com

主に動作確認用。いろいろ実験&ひとりごと

外字一覧
旧字一覧
Sara
Line
blog

「簡単診断」形式のページを作ってみました(htmlだけの使用)

最近、電話のお問い合わせで「うちは何を買ったらいいですか?」との問い合わせがありましたので、「診断」形式のものを html で作ってみました。
(PCのみに対応。スマホですと画面が乱れます汗)
※昔のInternetExploreでは見れないかもしれません。safari,chrome,firefox,Ie8以降対応

↓↓↓ 以降は余談です

このページでは設問にお答えいただくことにより、最終ページに目的の商品が表示される・・・という単純な形式のものです。
ホームページを開設されておみえのお寺様も多いと思います。
これは沙羅の例なので、あまり面白くないんですが、
違う設問と答えにより、このような「なんちゃって簡単診断ページ」は、いろいろと応用できるのでは?
と思います。(デザイン的に「スマホ対応」ではないので CSS改良が必要ですが、、、、)
また、このページはよくある診断アプリのような閲覧者のデータ収集は行っておりません。
ややこしいイメージかもしれませんが、使っているのは index.html というファイル1個だけとあとは画像ファイルだけです。
(※ラベルにリンクさせて、その部分以外は非表示にしているだけです。)
沙羅のこのサイトでは wordpress というシステムで作られていますが、これはwordpressとは関係ない別のフォルダで作り、
それをページに ”iframe” というタグで組み込んでいます。
元ファイル(html)は http://jiin.sakura.ne.jp/yes-no/index.html です。
ホームページ作りをされている方はどうぞhtml を保存(←← 右クリックして「対象を保存」)して、メモ帳などで開いて、必要な場所だけを適当に加工し設問と答えを作って、お使いいただけたらと思います。
また、「こんな診断ページ」を作って欲しい」というご要望がございましたらお作りいたしますのでご連絡下さい。

関連記事

Archive

  1. カタカナにする文字起こし

  2. 厄年・九曜星

  3. 単に数字を置換するだけ(月)

  4. 『crysti32.ocx』またはその依存関係のひとつが適切に登録されていません。

  5. 改行コードを消す!には

  6. ペーストした画像をワードプレスに投稿する⇒プラグイン不要

  7. Lineのスタンプ

  8. VisualStudio2023 コントロールのプロパティが表示されない

  9. 全角の文字を半角に変えて数値型にして計算式に使う

PAGE TOP