質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

90.48%

  • CSS

    5987questions

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

  • CSS3

    2135questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • メニュー

    20questions

    メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

  • ドロップダウンメニュー

    13questions

    GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

cssでメニュー

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 606

caad

score 2

前提・実現したいこと

cssでドロップメニューを作成していて、「閉じる」項目を追加して、pcでクリックまたはスマホでタッチするとメニューを閉じられるようにしたいです。
ご教示頂けると幸いです><

※参考サイト
http://weboook.blog22.fc2.com/blog-entry-408.html

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/04/05 18:27

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

+3

input要素のtype属性の値をcheckboxにしてチェックボックスを作成してください。
あとはCSSの擬似クラス:checkedチェックボックスがチェックされている時に特定のルールセットを適用させることができます。

例えば次のHTMLとCSSではチェックボックスをチェックした時にlabel要素のテキストカラーを赤にすることができます。
つまり、要素の状態を切り替えることができます。

<input id="switch" type="checkbox">
<label id="switch-label" for="switch">label text</label>
#switch:checked + #switch-label {
  color: red;
}


これをうまく利用すると「メニューを閉じた状態(初期状態)」と「メニューを開いた状態(チェック状態)」をクリックまたはタッチで作り出すことができます。
あとはご自分でルールセットを定義していけば求めているドロップメニューを作成できるはずなので、ぜひ頑張って作ってみてください。


追記
回答にあるCSSのセレクタ#switch:checked + #switch-labelが何を意味しているのかを理解してみましょう。

 #switch:checked

:checked擬似クラスはラジオボタンチェックボックスおよびオプションボタンがオンになっている状態を表します。
ここでは「#switchというIDを与えたチェックボックスがチェックされている状態」を意味します。

+

これは隣接兄弟セレクタといい、直後(隣)にある要素を指定するセレクタです。
ここでは#switchの直後に存在する要素である#switch-labelを指定しています。
つまり「#switchというIDを与えたチェックボックスの状態が:checked(オン)になった時に、直後に存在する要素#switch-labelのテキストカラーを赤にする」というルールセットを定義している事が分かります。

なお、この様なセレクタは複数を組み合わせて利用することも出来ます。
例えば#a:hover + #b + #cとすると「#aにマウスカーソルが当たった時、その直後にある#bのそのまた直後にある#cに宣言したブロックの内容を適用する」という意味のセレクタになります。

これらを踏まえた上でイメージしやすいHTMLにしてみましょう。

<!-- 切り替えのスイッチとなるチェックボックス -->
<input id="switch" type="checkbox">
<!-- for属性を使えばラベルからチェックボックスをチェックできる -->
<label id="switch-label" for="switch">menu</label>

<!-- 状態を切り替えたい要素(メニュー) -->
<ul class="list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>


ここでチェックボックス#switchをチェックした時にリスト.listを非表示にするには、どのようなルールセットを定義すると良いでしょうか?
大分イメージしやすくなっているのではないでしょうか。

#switch(チェックボックス)の状態がオンの時、その直後にある#switch-label(ラベル)のそのまた直後にある.list(メニュー)を指定するセレクタを書いてみてください。

最後にCSSのセレクタをまとめたページがあったのでリンクしておきます。
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス - EXP - クリエイティブな事をはじめた(い)全ての人達へ


具体的なコードを追記しておきます。

<!--
  チェックボックスはリストの外側に置いても良いですが、隣接させた方がセレクタの誤りを防止できて、隣接兄弟セレクタひとつで済むので楽です。
  <a href="#">menu</a>となっていた箇所をラベルに変更しています。
-->
<ul>
 <li><label for="switch">menu</label><input id="switch" type="checkbox">
  <ul>
   <li><a href="#">list</a></li>
   <li><a href="#">list</a></li>
   <li><a href="#">list</a></li>
   <li><label for="switch">閉じる</label></li>
  </ul>
 </li>
</ul>
#switch {
  display: none;
}

#switch:checked + ul {
  visibility: hidden;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/06 12:30

    ご教示大変ありがとうございます!!!
    無知で申し訳無いです。。
    色々と奮起して試してみてはいるのですが、なかなかうまくいきません。。
    「メニューを閉じた状態(初期状態)」にするにはどのようなルールセットを定義したらよいのでしょうか、、?
    下記のようだとイメージとは離れてしまいまして。。
    #switch:checked + #switch-label {
    visibility: hidden;
    }
    アドバイス頂けると大変ありがたいです><

    キャンセル

  • 2016/04/06 18:02 編集

    回答に追記しました。
    分からない事があればまたコメントして下さればお答えします。

    キャンセル

  • 2016/04/07 10:22 編集

    分かりやすいご回答ありがとうございます!
    セレクタについてもとても勉強になりました!
    #switch(チェックボックス)の状態がオンの時、その直後にある#switch-label(ラベル)のそのまた直後にある.list(メニュー)を非表示にするセレクタを書いてみましたので誤りがありましたらご指摘をお願い致します。

    #switch:checked + #switch-label + .list{
    visibility: hidden;
    }
    #switch{
    display: none;
    }


    また、下記の場合のHTMLに対してだと、どのような指定をしたらよろしいのでしょうか?
    <ul>
     <li><a href="#">menu</a>
      <ul>
       <li><a href="#">list</a></li>
       <li><a href="#">list</a></li>
       <li><a href="#">list</a></li>
       <li><a href="#">閉じる</a></li>
      </ul>
     </li>
    </ul>

    度々で恐れ入ります。ご教示お願い致します。

    キャンセル

  • 2016/04/07 16:15 編集

    セレクタはそれでOKです。
    理解が進んだようで何よりです。

    > また、下記の場合のHTMLに対してだと、どのような指定をしたらよろしいのでしょうか?

    label 要素をクリックすることで、for 属性に指定したIDを持つチェックボックスを操作できるという点を利用しましょう。

    「menu」をクリックしたときと、「閉じる」をクリックしたときの両方でチェックボックスを操作できるようにすると問題は解決するはずです。
    ポイントは「チェックボックスを追加する位置」「ラベルを追加する位置」「セレクタの指定」です。

    追記
    質問をするときのひとつのアドバイスなのですが、自身で試してみたHTMLやCSSなどのコードは最初から提示された方が良いです。
    これはコードが書きかけで完成していなかったり、内容に誤りがあったとしても構いません。

    コードなどの詳細があった方が回答者も正確で具体的な回答をしやすいですし、その内容に誤りがあれば大抵は訂正してくれます。

    また、そうする事で「やってほしいことだけを記載した丸投げの質問」という指摘を受けて質問の評価が下がり、質問が一覧に表示されず回答を得にくくなるという事も減るでしょう。

    コードは質問する側と回答する側の双方にとって重要な情報となるので、また質問をされるときにコードが手元にあるのでしたら、ぜひ質問に含めてみてください。:)

    キャンセル

  • 2016/04/09 06:12 編集

    具体的な回答がないのも不親切かもしれないと思いましたので回答の方にコードを追記しておきました。
    よろしければ参考にしてください。

    キャンセル

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

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5987questions

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

  • CSS3

    2135questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • メニュー

    20questions

    メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

  • ドロップダウンメニュー

    13questions

    GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。