ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 クリックで非表示だったテキストを表示させたいです ユーザー助け合い掲示板 『クリックで非表示だったテキストを表示させたいです』へのコメント投稿 記事 0 へのレス:クリックで非表示状態だったテキストを表示させる方法を知りたいです。 下記のCSSとHTMLを参考にしましたが、最初からテキストが表示状態になっているので、これを非表示の状態から始めたいのですが、ググったり、自分で弄ってみたりしても解決できなかったため、皆さまのお力をお借りしたいです。 CSSとHTMLはこんな風になっています。 <CSS> <script language="Javascript"> function Click_Sub() { if (document.all.div1.style.display == "none") { document.all.div1.style.display = "block" } else { document.all.div1.style.display = "none" } } </script> <HTML> <input type="button" value="クリック" onclick="Click_Sub()"> <div id="div1">表示・非表示</div> ※以下その他のCSS <style> @charset "UTF-8"; /* Template & Designed by Towako. */ /* https://ninawas.me */ /* ウェブフォントの読み込み */ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap'); @font-face { font-family: 'はれのそら明朝'; font-display: swap; src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2') format("woff2"); } /*------------------------------------------------- このフォントはIPAフォントライセンスv1.0の下で提供されています。 http://ipafont.ipa.go.jp/ipa_font_license_v1.html オリジナルのフォントは以下から取得できます。 はれのそら明朝 http://ipafont.ipa.go.jp/ -------------------------------------------------*/ /* 全体に適用する */ * { padding: 0; margin: 0; box-sizing: border-box; font-weight: normal; font-family: 'Noto Sans JP', sans-serif; } /* 基本設定 */ body { text-align: center; background-color: #fff; line-height: 1.7; letter-spacing: 0.1em; font-size: 12px; color: #000; } /* リンク */ a { color: #cc99ff; } /* ヘッダー */ header { margin: 3em auto; padding: 0; position: relative; width: 200px; } /* ヘッダー画像サイズ */ header img { width: 100px; } /* フォントの指定 */ h1 { font-family: 'はれのそら明朝', serif; font-size: 12px; } h2 span, .link span { font-family: 'はれのそら明朝', serif; font-size: 13px; } /* 見出しを配置する */ h1 { position: absolute; top: 60%; right: 0; color: #cc99ff; } /* ナビゲーション */ nav { margin: 1em auto 2em; width: 200px; } /* 文字色 */ nav p, .atogaki { color: #808080; } /* メインコンテンツ */ main { margin: 5em auto 3em; } /* セクションとアーティクル */ section, article { margin: 3em auto; width: 300px; text-align: justify; word-break: break-all; } /* 余白 */ p, footer { margin: 1em auto 1.5em; } /* 見出し */ h2 { position: relative; margin: 0.5em auto; color: #cc99ff; font-size: 15px; } /* 線 */ h2::before { position: absolute; display: block; content: ''; z-index: -50; top: 50%; left: 0; width: 100%; height: 1px; border-bottom: 1px dashed#cc99ff; } h2 span { padding-right: 1em; background-color: #fff; } /* リスト系 */ ol { list-style-position: inside; list-style-type: decimal-leading-zero; } ul { list-style-type: none; } .flex { display: flex; flex-wrap: wrap; list-style-type: none; } .flex li { flex-basis: 10%; } .columns { columns: 2 auto; } /* メニュー */ .center { text-align: center; } .center li { display: inline-block; margin: 0 1.5em; } .center li a { display: inline-block; padding: 0.3em 0.5em; text-decoration: none; background-color: #d87484; color: #fff; } /* 水平線 */ hr { border: none; border-bottom: 1px dashed#cc99ff; } /* フォーム系 */ textarea, input[type] { -webkit-appearance: none; padding: 0.2em 0.5em; background-color: #fff; border: none; border-bottom: thin solid #cc99ff; border-radius: 5px; color: #c0c0c0; } textarea { width: 200px; height: 70px; } input[type=text] { width: 60px; } input[type=submit] { width: auto; } /* 横幅768px以上で読み込む */ @media screen and (min-width:768px) { #wrap { margin: 0 auto; max-width: 700px; } #wrap::after { display: block; content: ''; clear: both; } #head { float: left; } main { overflow: hidden; } article { width: 600px; } } </style> どうかよろしくお願い致します。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>0 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート