重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

HTMLについて

解決済

現在課題としてHTMLを用いて工業製品のホームページを製作しなければなりません。
そこで色々趣向を凝って作ってみようと思っていたのですがHTMLが難しいことこの上ない。なので質問をさせていただきます。

項目ごとに分けて解説を入れるのですが非常に長いのでDisplayを用いて表示非表示を切り替えるようにしたいのですが最初は非表示にしておくにはどうすればいいのでしょうか。参考にしたページ(http://www.pori2.net/js/DOM/7.html)はこちらです。僕はJavascriptが分からないので殆どコピペなので意味が分かっていないです。
もし良ければホームページ作りに参考になるページ等教えていただけると幸いです

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： taigoito
  • 回答日時：

失礼！No.2ですが、ソースのコピペにミスりました。


〇〇を https: に置き換えてください。2箇所あります。
ちなみに、これが先の回答に記述したライブラリの読み込み部分にあたります。

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="〇〇//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
<div class="container">
<div>
<h2>セクション1の見出し</h2>
<button class="btn btn-primary" data-toggle="toggle" data-target="#detail1">詳細</button>
<div id="detail1" data-role="toggle">
<p>セクション1の解説</p>
<p>セクション1の解説</p>
<p>セクション1の解説</p>
<p>セクション1の解説</p>
</div>
</div>
<div>
<h2>セクション2の見出し</h2>
<button class="btn btn-info" data-toggle="toggle" data-target="#detail2">詳細</button>
<div id="detail2" data-role="toggle">
<p>セクション2の解説</p>
<p>セクション2の解説</p>
<p>セクション2の解説</p>
<p>セクション2の解説</p>
</div>
</div>
<div>
<h2>セクション3の見出し</h2>
<button class="btn btn-success" data-toggle="toggle" data-target="#detail3">詳細</button>
<div id="detail3" data-role="toggle">
<p>セクション3の解説</p>
<p>セクション3の解説</p>
<p>セクション3の解説</p>
<p>セクション3の解説</p>
</div>
</div>
</div>
<!--実際に使用するのはココから-->
<script src="〇〇//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var $toggle = $("[data-toggle=\"toggle\"]");
$("[data-role=\"toggle\"]").hide();
$toggle.on("click", function () {
var $target;
$target = $($(this).data("target"));
if ($target.css("display") === "none") {
$target.slideDown("slow");
} else {
$target.slideUp("slow");
}
return false;
});
</script>
<!--実際に使用するのはココまで-->
</body>

</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にソースコードまでありがとうございます。
Jqueryについてもう少し知ってある程度意味が分かった上で回答文のソースを扱っていきたいと思います。

通報する
お礼日時：2017/05/23 21:35

参考程度に

No.2

  • 回答者： taigoito
  • 回答日時：

最初から非表示にしておきたい要素に、"display:none"を指定するだけです。



ですが、どうせコピペなら、こちらのソースをコピペしてください。
非表示にしておきたい要素に、適当なIDと、 data-role="toggle"
要素を表示させるボタンに 、data-toggle="toggle"と、data-target="#〇〇"
という各属性を付けます。
（"#〇〇"には、表示させる要素のIDを記述してください。）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/ …
</head>
<body>
<div class="container">
<div>
<h2>セクション1の見出し</h2>
<button class="btn btn-primary" data-toggle="toggle" data-target="#detail1">詳細</button>
<div id="detail1" data-role="toggle">
<p>セクション1の解説</p>
<p>セクション1の解説</p>
<p>セクション1の解説</p>
<p>セクション1の解説</p>
</div>
</div>
<div>
<h2>セクション2の見出し</h2>
<button class="btn btn-info" data-toggle="toggle" data-target="#detail2">詳細</button>
<div id="detail2" data-role="toggle">
<p>セクション2の解説</p>
<p>セクション2の解説</p>
<p>セクション2の解説</p>
<p>セクション2の解説</p>
</div>
</div>
<div>
<h2>セクション3の見出し</h2>
<button class="btn btn-success" data-toggle="toggle" data-target="#detail3">詳細</button>
<div id="detail3" data-role="toggle">
<p>セクション3の解説</p>
<p>セクション3の解説</p>
<p>セクション3の解説</p>
<p>セクション3の解説</p>
</div>
</div>
</div>
<!--実際に使用するのはココから-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></s …
<script>
var $toggle = $("[data-toggle=\"toggle\"]");
$("[data-role=\"toggle\"]").hide();
$toggle.on("click", function () {
var $target;
$target = $($(this).data("target"));
if ($target.css("display") === "none") {
$target.slideDown("slow");
} else {
$target.slideUp("slow");
}
return false;
});
</script>
<!--実際に使用するのはココまで-->
</body>
</html>

実際に使用するところを、</body>の手前（閉じの手前）に貼り付けてください。
専門家を目指すのでなければ、CSS/JavaScriptを一から学ぶより、
bootstrapやjQueryと言ったフレームワーク、ライブラリを使えば、Webサイトを効率的に作れます。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nitto3
  • 回答日時：

エクセルで作ってHTML文として登録すればいい。

    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報