アプリ版：「スタンプのみでお礼する」機能のリリースについて

HTML プルダウン

解決済

サイトを作成しようと思うのですがHTML初心者です。記述方法がわからないので教えてください。

作成サイトは、プルダウンで、
支店名・年・季節・服のジャンル
の4つをそれぞれ選択し、「go」ボタンをクリック
すると、結果の写真画像が表示されるようにしたいです。記述方法を教えてください。
また画像に伴い、HTMLページ上のタイトルも
変更できれば嬉しいです。

もし、初心者に難しいようであれば
Htmlページを複数枚作って「go」クリックで各ページURLにジャンプする方法でお願いします！

質問者からの補足コメント

  • 分かりにくくてすいません。
    やりたいことは

    ①4つのプルダウンselectタブをつかって選択
    　1つのHTMLで図のみを差し替える
    　(できれば同時にタイトルの支店名等もかえたい)

    ①が難しいようなら
    ②4つのプルダウンselectタブをつかって選択
    　各htmlへリンクする

    です。「go」ボタンでは
    onclickのlocation harf=(支店名での選択したもの)+(年)+(季節)+(服のジャンル).html
    で実行できるようにしたいです。

    具体的な記述方法をお願いします。
    Javascriptはあるのではないかと思いますが
    詳しくないのでできれば使用したくありません。
    お願いします。

      補足日時：2018/05/31 12:19
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： zircon3
  • 回答日時：

まずは初心者向けのHTMLの解説書を1冊入手されるとよいです。


本屋さんへ行くとそういった本が何種類かありますから中をパラパラと簡単に見て、ご自身にとって「これはわかりやすい」と感じる物にされるとよいでしょう。
もちろんネット上の本屋さんで内容を少し見ることが出来るようなところでもよいです。

また、自治体などの図書館で探してみるという方法もあります。

加えてネット上にある初心者向けのHTMLの解説サイトをあたられるのも方法です。Googleなどで「HTML　初心者」とか「HTML　入門」といった極簡単なキーワードで検索するといろいろみつかるはずです。

ちなみにプルダウンメニューを作成する際のタグを知りたいだけでしたら「HTML　プルダウンメニュー」といったキーワードで検索すればHTMLタグの解説サイトなどにある該当箇所がヒットするかと思います。

参考まで。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

javascriptなど記載できるwebサービスと契約しているのでしょうか？


そうでないなら最初からご希望の機能がそなわっている
サービスと契約する必要があるかもしれません
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

セレクトボックス４つの組み合わせで表示を切り替えたいということですね？



・サーバーサイドのプログラムを使わない
・javascriptをつかわない

となると相当面倒ですが、大丈夫ですか？
つまり４＊４＋未選択＝17のコンテンツを同じページ内に埋め込む必要があります
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yambejp
  • 回答日時：

あ、ごめんなさい


4*4ではなく、４つのセレクトボックスの要素数の積分の要素＋１ですね

仮に支店名=3・年＝５・季節=4・服=10だとすると
600+1ページです
    • good
    • 0
    • 件
通報する

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞onclickのlocation harf=(支店名での選択したもの)+
＞(年)+(季節)+(服のジャンル).html
＞Javascriptは～～できれば使用したくありません。
onclickやlocation.hrefという時点で、すでにjavascriptを利用することになります。

#3様のアイデアは、現実的には相当に厳しいのではないかと思いますので、javascriptを利用した例です。
（サーバ側で行う方法もあると思いますが、質問者様にはハードルが高いのかも知れませんので）
リンク先のアドレスは、ご指定のような形式で、選択されたoptionのvalue値を連結した形にしてありますが、以下のサンプル程度でも、2×2×4×5＝80通りのリンク先ができますので、対応するものを準備しておく必要がありますし、現状では全部同一ディレクトリになってしまうので、そちらの管理の方も面倒そうな気がします。

セレクトを選択してボタンクリックすると、指定のURLへジャンプしようとしますが、以下のHTMLだけでは当然ながら「File Not Found」のエラー表示になるでしょう。（リンク先のファイルが存在しないので）
でも、その状態で、ブラウザのアドレスバーを見れば遷移先のアドレスを確認することができると思います。

※ HTMLの文書構成を変えた場合は、スクリプトの修正が必要になることがあります。
※ 表示レイアウトの変更は(CSS)、自由に行っても動作に影響はないはずです。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#linker, #linker * { margin:0; padding:0; }
#linker {
width:24em; list-style-type:none;
display:flex; justify-content:space-between;
}
#linker li { text-align:center; line-height:1.4em; }
#linker button { padding:0.4em 0.8em; margin-top:0.5em; }
</style>
</head>
<body>
<ul id="linker">
<li><h5>支店名</h5>
<select>
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
</select>
</li>
<li><h5>年</h5>
<select>
<option value="2017">2017年</option>
<option value="2018">2018年</option>
</select>
</li>
<li><h5>季節</h5>
<select>
<option value="spring">春</option>
<option value="summer">夏</option>
<option value="autumn">秋</option>
<option value="winter">冬</option>
</select>
</li>
<li><h5>ジャンル</h5>
<select>
<option value="casual">カジュアル</option>
<option value="mode">モード</option>
<option value="saron">サロン</option>
<option value="street">ストリート</option>
<option value="surf">サーフ</option>
</select>
</li>
<li><button type="button" value="go">go</button></li>
</ul>

<script type="text/javascript">
document.querySelector("#linker button").addEventListener("click", function(){
var u = "", s = document.querySelectorAll("#linker select");
Array.prototype.map.call(s, function(e){ u += e.value; });
location.href = u + ".html";
}, false);
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報