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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

4276閲覧

CSSだけで三本線のメニューを美しく表示させたい。

2001Y

総合スコア83

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/03/04 16:46

####目標

  • もはや維持だけになっているjQuery縛りで、CSSのみで三本線のメニューを美しく表示させたい。
  • 調べて行くうちに、ラジオボタンを使う方法がいいのではないかと判断したがうまくできない現状。

####参考にしたサイト

####大まかなHTML構成 - 動作確認サンプル

HTML

1<nav> 2<input type="checkbox" id="nav"/> 3<label for="nav"> 4<span class="nav-btn"></span> 5<div class="nav-content">コンテンツだよ!</div> 6</label> 7</nav>

####使用してみたCSS

css

1nav { 2 position: relative; 3} 4nav label { 5 height: auto; 6} 7.nav-content { 8 display: none; 9} 10.nav-btn { 11 display: block; 12 position: absolute; 13 top: 50%; 14 left: 50%; 15 width: 14px; 16 height: 2px; 17 margin: -1px 0 0 -7px; 18 background: #000; 19 transition: .2s; 20} 21.nav-btn:before,.nav-btn:after{ 22 display: inline-block; 23 content: ""; 24 position: absolute; 25 top: 50%; 26 left: 0; 27 width: 14px; 28 height: 2px; 29 background: #000; 30 transition: .3s; 31} 32.nav-btn:before{ 33 margin-top: -6px; 34} 35.nav-btn:after{ 36 margin-top: 4px; 37} 38 39input:checked .nav-content { 40 display: block; 41} 42input:checked .nav-btn:before, input:checked .nav-btn:after{ 43 margin-top: 0; 44} 45input:checked .nav-btn:before{ 46 transform: rotate(-45deg); 47 -webkit-transform: rotate(-45deg); 48} 49input:checked .nav-btn:after{ 50 transform: rotate(-135deg); 51 -webkit-transform: rotate(-135deg); 52}

####要望

  • CSSのみで完結させたい

CSSのラジオボタンを使うのはほぼ初めてで全然うまくいかなかったので、解決方法がわかる方は教えてください

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

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

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

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

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

guest

回答1

0

ベストアンサー

【隣接セレクタ (E + F)|セレクタ|CSS HappyLife ZERO】
http://zero.css-happylife.com/selectors/adjacent_sibling_combinators.shtml

投稿2017/03/04 16:52

kei344

総合スコア69364

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

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

2001Y

2017/03/04 17:03

ありがとうございます。 サイトではlabelは一度も使ってないので問題ないのかと思っていましたが、+を使わないと動作しないようになっているのですか?
kei344

2017/03/04 17:17

> サイトでは どの? > +を使わないと動作しないようになっているのですか? 隣接セレクタがどういうものかのリンクを回答したので、それを見てください。
2001Y

2017/03/04 18:11

申し訳ないのですが、サイトはお答えすることができません。 教えていただいた隣接セレクタを付加するだけで動作しました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問