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

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

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

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

CSS

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

Q&A

解決済

1回答

5151閲覧

htmlとcssのみでついてくるメニューバー

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/10/09 05:46

コード ```###前提・実現したいこと 可能であればhtmlとcssのみでついてくるメニューバーを実装したいです。 また、ボタン全体にLinkする判定が欲しいです。 今のデザインに近ければ多少のレイアウトのズレはかまいません。 ###発生している問題・エラーメッセージ

メニューの文字の部分しかリンクする判定がありません。
また、ウィンドウ幅が狭くなった時にボタンの文字を消すメディアクエリが発動するとボタン自体押せなくなってしまいます。

###該当のソースコード ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./index.css" type="text/css" /> <title>ゼロから始まるHTML</title> <meta name="description" content="サイト説明"> <meta name="keywords" content="キー,ワード,キーワード"> </head> <body> <!--ここからメニュー--> <header class="header"> <a href="#"><img src="img/top.png" alt="トップ画像"></a> </header> <nav> <div class="in"> <ul class="menu"> <li class="home"><a href="#">ホーム</a></li> <li class="rank"><a href="#">ランキング</a></li> <li class="sns"><a href="#">SNS</a></li> <li class="link"><a href="#">リンク</a></li> <li class="howto"><a href="#">利用方法</a></li> </ul> </div> </nav> <!--ここからコンテンツ--> <div class="main"> <section class="lsb"> <h1>左サイドバー</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum. </p> </section> <section class="col"> <h1>メインコンテンツ</h1> <p> Morbi non semper sapien. Suspendisse elementum interdum metus, in volutpat lectus consectetur id. Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Integer vel pellentesque elit. Sed faucibus magna vitae metus ornare, ut pulvinar leo blandit. Mauris tincidunt ante nec quam maximus iaculis ut id lorem. Integer nec ligula faucibus, sollicitudin elit at, maximus tortor. </p> </section> </div> <!--ここからフッター--> <div class="footer"> <hr> <p>CopyrightゼロからはじまるHTML.All Rights Reserved.</p> </div> </body> </html> ```ここに言語を入力 ###該当のソースコード ```CSS /*全余白リセット*/ * { margin: 0; padding: 0; /*全体設定*/ } body { margin-top: 1%; margin-bottom: 5%; margin-right: 5%; margin-left: 5%; background-color: rgb(255,255,250);/*サイト全体の背景色*/ color: rgb(63,63, 54); } .header img{ width: 100%; } /*メニュー*/ .menu { margin-left: 5px; border-radius: 5px;/*角に丸み*/ display: table;/*テーブル化*/ table-layout: fixed; position: fixed; text-align: center; width: 90%; background-color: #4584b1; list-style: none;/*リストの先頭の「・」を消す*/ } .menu li{ border-right: 1px solid #fff; display: table-cell; vertical-align: middle; height: 40px; } .menu a { display: block; color: #fff; font-size: 1vw; text-decoration: none;/*リンク下のアンダーライン削除*/ } /*アイコンの呼び出し*/ .home:before { color: #fff; content:"\f015"; font-family: "FontAwesome"; } .rank:before { color: #fff; content:"\f082"; font-family: "FontAwesome"; } .sns:before { color: #fff; content:"\f0d5"; font-family: "FontAwesome"; } .link:before { color: #fff; content:"\f167"; font-family: "FontAwesome"; } .howto:before { color: #fff; content:"\f099"; font-family: "FontAwesome"; } /*コンテンツ*/ .main{ margin-left: 5px; display: flex; } .main section { margin-top: 50px; margin-left: 5px; border-radius: 5px; background: #F5F0CF; padding: 15px; } .lsb { width: 200px; } .col { flex: 3; } .main h1 { color: #E6AC27; font-size: 1.5rem; } .main p { margin-top: 10px; } /*フッター*/ .footer { margin-top: 10px; } .footer hr { width: 100%; } .footer p { text-align: center; } /*レスポンシブ設定*/ @media screen and (max-width: 700px) { .main { flex-direction: column-reverse; } .lsb{ width: auto; } .menu a{ display: none; } } /*アイコンのフォントファミリー*/ @font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

###試したこと
tableプロパティでレイアウトしていたものをFlexboxでレイアウトし直してみましたが、アイコンと文字をボタン内に収められなかったです。
今は元の状態もどしてあります。
###補足情報(言語/FW/ツール等のバージョンなど)
アイコン及び、ボタンの作成は下記サイトを参考に作成しました。
http://delaymania.com/201404/web/font-awesome/

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

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

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

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

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

guest

回答1

0

ベストアンサー

a要素が「クリックできる範囲」なのでそういう挙動になっています。

CSS

1/* ADD */ 2.menu a { 3 width: 100%; 4 height: 100%; 5 line-height: 40px; 6} 7/*.home:before 8 ↓ */ 9 .home a:before { 10 /* 以下同様 */ 11 } 12```**動くサンプル:**[https://jsfiddle.net/8yp3mc1x/](https://jsfiddle.net/8yp3mc1x/) 13 14--- 15 16> ウィンドウ幅が狭くなった時にボタンの文字を消すメディアクエリが発動するとボタン自体押せなくなってしまいます。 17 18下記記述が原因です。 19 20```CSS 21 .menu a{ 22 display: none; 23 }

追記:

文字をspan要素でくくるとかするほうが良いですが、とりあえず下記を試してみてください。

CSS

1/* ADD */ 2.menu li{ 3 position: relative; 4} 5.menu a::before { 6 display: block; 7} 8.menu a:after { 9 content: ''; 10 display: block; 11 width: 100%; 12 height: 100%; 13 position: absolute; 14 left: 0; 15 top: 0; 16} 17/*.home:before 18 ↓ */ 19 .home a:before { 20 /* 以下同様 */ 21 } 22 23/*レスポンシブ設定*/ 24@media screen and (max-width: 700px) { 25 .menu a{ 26 /*display: none;*/ 27 font-size: 0; 28 } 29 .menu a::before{ 30 font-size: 1vw; 31 } 32 33} 34```**動くサンプル:**[https://jsfiddle.net/8yp3mc1x/3/](https://jsfiddle.net/8yp3mc1x/3/)

投稿2017/10/10 17:12

編集2017/10/10 22:14
kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2017/10/10 20:33

回答ありがとうございます! 1.メディアクエリにて小さくなった際に文字のみを消してアイコンだけ表示したい。 2.ボタン内のアイコンの下にホーム等メニュー名の文字という形を崩さない。 という事を明記し忘れていました。 上手くやりたい事を文章におこせなかった事を反省致します。 申し訳ありません。 添削して頂いたソースコードを元に上記基準を満たせないか試行錯誤してみます。
退会済みユーザー

退会済みユーザー

2017/10/10 20:37

追記です。 2はメディアクエリが働く前の状態です。
退会済みユーザー

退会済みユーザー

2017/10/11 00:14

回答ありがとうございます! コピペで実際にやってみました。結果大成功でした。ご教授頂いた内容をひとつづつ何をしているのか確認もしましたので今後にも役に立ちそうです。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問