🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

661閲覧

labelを表示させたい

dehi0923

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/26 11:51

編集2020/11/26 12:22

写真の赤丸のようにlabelを表示させたいのですが表示されません。どのようにすれば表示されますでしょうか?
イメージ説明

該当のソースコード

HTML

1<div class="wrappir"> 2 <div class="sidebar"> 3 <div class="side-container"> 4<!--ここから非表示--> 5 <label for="label1"> <i class="fas fa-bars"></i></label> 6 <input type="checkbox" id="label1" class="csc"/> 7

css

1.side-container label { 2 float: ; right: 3 font-weight: bold; 4 cursor :pointer; 5 background-color: pink; 6 display: block; 7 font-size: 20px; 8 9 } 10 11 .side-container *:not(.sidelogo){ 12 height: 0; 13 padding: 0; 14 overflow: hidden; 15 opacity: 0; 16 transition: 0.8s; 17 } 18 19 .side-container input{ 20 display: none; 21} 22 23 input:checked + .side-container { 24 25 opacity: 1; 26 display: block; 27  }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dehi0923

2020/11/26 12:24

コード機能を利用し、再度編集しました。 初心者なものでルールを知らず、大変失礼いたしました。 ご指摘ありがとうございます。
m.ts10806

2020/11/26 12:29

Font Awesomeはここ以外でも使ってますか? そこが出てないだけに見えます。 CSSの問題と言うよりFont Awesomeの問題かなと HTMLをDOCTYPE宣言から全体提示いただけますか?
guest

回答1

0

ベストアンサー

HTMLは divの閉じタグがないのはコピーできていないだけとして、

CSSで下記が間違っているで修正してください。
2行目
float: ; right:

float: right;

最終行
}
↓ 全角空白を削除
}

で、これでもラベルは表示されません。
下記のCSSで .side-container.sidelogo以外の子孫要素をすべて非表示にしているので。

css

1 .side-container *:not(.sidelogo){ 2 height: 0; 3 padding: 0; 4 overflow: hidden; 5 opacity: 0; 6 transition: 0.8s; 7 }

これを削除すればラベルは表示されます。
(Font Awesomeへのリンクができていればですが)

追記

ラベル(ハンバーガー)をクリックしたら、
.side-container内にあるメニュー(リスト)を表示させたり、非表示にしたりしたいのだとしたら、
HTMLで label input.side-containerの外に出せばいいでしょう。

html

1<div class="wrappir"> 2 <div class="sidebar"> 3 <label for="label1"> <i class="fas fa-bars"></i></label> 4 <input type="checkbox" id="label1" class="csc"/> 5 <div class="side-container"> 6<!--ここから非表示--> 7 8<!--メニューリスト--> 9 10 </div> 11 </div> 12</div>

さらに追記

たぶんやりたいことは下記のようなことでしょうか。

html

1<div class="wrappir"> 2 <div class="sidebar"> 3 <label for="label1"> <i class="fas fa-bars"></i></label> 4 <input type="checkbox" id="label1" class="csc" /> 5 <div class="side-container"> 6 <ul> 7 <li><a>menu1</a></li> 8 <li><a>menu2</a></li> 9 <li><a>menu3</a></li> 10 <li><a>menu4</a></li> 11 </ul> 12 </div> 13 </div> 14</div>

css

1.sidebar label { 2 float: right; 3 font-weight: bold; 4 cursor :pointer; 5 background-color: pink; 6 display: block; 7 font-size: 20px; 8} 9 10.side-container { 11 height: 0; 12 padding: 0; 13 overflow: hidden; 14 opacity: 0; 15 transition: 0.8s; 16} 17 18#label1{ 19 display: none; 20} 21 22#label1:checked ~ .side-container { 23 height: auto; 24 opacity: 1; 25 display: block; 26}

CodePenサンプル

投稿2020/11/26 13:08

編集2020/11/26 14:14
hatena19

総合スコア34073

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dehi0923

2020/11/26 13:44

ありがとうございます。
hatena19

2020/11/26 14:18

やりたいことを推測して、サンプルを追加しましたので、参考にしてください。
dehi0923

2020/11/26 14:59

すごく役立ちました。質問が下手で申し訳ありません。少しずつ上達していきます。 今後ともよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問