コード ```###前提・実現したいこと 可能であれば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/
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/10 20:33
退会済みユーザー
2017/10/10 20:37
退会済みユーザー
2017/10/11 00:14