詳しい人求む！

ホームページの作成について

締切済

質問者：faef2020
質問日時：2021/10/17 18:19
回答数：1件

htmlに詳しい方、教えてください。

プルダウンで項目を選択すると
リンクを表示するようなページを作りたいです。

リンクは画面遷移するものではなく、
プルダウンの下に一覧のような形で出したいです。
(月を選択させて、カレンダーみたいな感じに日を並べたいです)

画面遷移するのは作成できたのですが……
なかなか思うようなものができません。
なんて検索したらいいかも分からずで、質問させていただきました。

よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2021/10/17 21:29

こんばんは

＞画面遷移するのは作成できたのですが……
方法はひとつではないので、どのような方法をりようなさったのか不明です。

＞プルダウンの下に一覧のような形で出したいです。
こちらも、何をどのようにしたいのか具体的な内容がわかりません。

とりあえず、ご質問のよう（といっても曖昧なのでよくわかりませんが）になるものの簡単な一例を以下に。
あとは適当に修正してみてください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
select { width: 4em; margin-bottom: 2em; }
#calender>div {
width: 400px; height:300px;
background-color: lemonchiffon;
display:none;
}
#calender.M1 .M1 { display: block; }
#calender.M2 .M2 { display: block; }
#calender.M3 .M3 { display: block; }
#calender.M4 .M4 { display: block; }
#calender.M5 .M5 { display: block; }
</style>
</head>
<body>
<div>
<select onchange="document.getElementById('calender').className=this.value;">
<option value="M1" selected>1月</option>
<option value="M2">2月</option>
<option value="M3">3月</option>
<option value="M4">4月</option>
<option value="M5">5月</option>
</select>
<div id="calender" class="M1">
<div class="M1">1月のカレンダー</div>
<div class="M2">2月のカレンダー</div>
<div class="M3">3月のカレンダー</div>
<div class="M4">4月のカレンダー</div>
<div class="M5">5月のカレンダー</div>
</div>
</body>
</html>