ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 クリックで非表示だったテキストを表示させたいです 編集 キャンセル 削除 アク禁 アク禁解除 キャンセル 凍結 0 匿名 Chrome クリックで非表示状態だったテキストを表示させる方法を知りたいです。 下記の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> どうかよろしくお願い致します。 04/04 13:17 返信 コメント投稿 検索 2 匿名 Chrome >>1 ご回答ありがとうございます! 追加してみたところ、見事解決いたしました…!! 本当にありがとうございました…!! 04/06 17:31 返信 1 藤 iPad styleに以下を加えてみるのはいかがでしょうか? #div1 { display: none; } 1 04/06 16:40 返信 1ページ中1ページ目 61 view 残り書き込み 9998 件 人気スレ 更新できなくて、困っています 2019年11月07日 19時38分 13 拍手コメント 2020年11月17日 09時05分 5 名前変換がうまくできません 2022年02月07日 21時23分 2 名前変換のURLが載せられない 2020年03月10日 22時45分 4 関連スレ 掲示板TOPへ サイトTOPへ ALICE+サポート