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

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

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

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1920閲覧

ハンバーガーボタンで正しく表示できない

rura

総合スコア70

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/03/08 06:17

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
携帯とタブレット画面に対応するためにハンバーガーボタンをつけてますが、うまくいきません。
###発生している問題・エラーメッセージ

ハンバーガーボタンを押しても正しく閉じることができないのと、レイアウトがしたにずれないのです。

###該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BootstrapのCSS読み込み --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery読み込み --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#site-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="logo"><%= link_to "relief goods", root_path %></h1> </div> <div class="collapse navbar-collapse" id="site-menu"> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "ガイドライン", guidelines_news_path %></li> <li><%= link_to "支援物資配信情報", supply_infos_info_path %></li> <% unless logged_in? %> <li><%= link_to "新規登録", signup_path %></li> <li><%= link_to "ログイン", login_path %></li> <% else %> <li> <%= link_to new_item_path do %> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 物資ネット検索 <% end %> </li> <li><%= link_to "物情配信登録", supply_infos_path %></li> <li><%= link_to "物資在庫登録", reliefs_index_path %></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="gravatar"> <%= gravatar_for current_user , size: 20 %> </span> <%= current_user.name %> <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><%= link_to "アカウント" , current_user %></li> <li><%= link_to "プロフ設定", edit_user_path(current_user) %></li> <li><%= link_to "お届け先設定", deliveries_path %></li> <li role="separator" class="divider"></li> <li> <%= link_to "ログアウト", logout_path, method: "delete" %> </li> </ul> </li> </ul> <% end %> </div> </div> </nav> </header> header { padding:10px; font-family: 'Vidaloka', serif; text-align:center; font-weight:normal; color:#fff; height: 60px; .navbar { width: 100%; margin: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); &.navbar-default { background-color: #fff !important; } .container-fluid { margin: 0 !important; padding: 0 !important; } .navbar-inner { max-width: 1200px; margin: 0 auto; .navbar-header { h1 { color:white; margin-light:400px; padding: 10px 0 0 0 !important; a { width: 200px; height: 40px !important; margin: 0; background-size: contain; display: block; white-space: nowrap; } } } .maintitle{ display:block; font-size:72px; line-height:72px; letter-spacing:-4px; text-shadow:1px 1px 3px #ccc, 1px -1px 3px #ccc, -1px 1px 3px #ccc, -1px -1px 3px #ccc; } .description{ display:block; font-size:24px; line-height:10px; letter-spacing:1px; text-shadow:1px 1px 3px #ccc, 1px -1px 3px #ccc, -1px 1px 3px #ccc, -1px -1px 3px #ccc; } .navbar-nav { li { a { padding: 10px; .gravatar { margin-right: 2px; img { border-radius: 100%; } } } } .dropdown-menu { li { &.divider { margin: 0; } a { padding: 10px 15px; } } } } } } } .logo{ background-color:#adff2f } @media (max-width: 768px) { body { font-size: 12px; } h1 { font-size: 30px; } h2 { font-size: 24px; } .panel-title { font-size: 14px; } }

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
Ruby,Ruby on Rails

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

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

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

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

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

moke

2017/03/08 10:40

ハンバーガーボタンはruby on railsとは関係ありませんBootstrapとCSSのtagをつけて質問しましょう
moke

2017/03/08 10:42

また、ハンバーガーボタン自体がUIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という評価を受けていることを知るべきです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問