Q&A
わからないことは何ですか？ メディアクエリの書き方ですか？
前提・実現したいこと
画像を投稿するwebアプリを作っています。
レスポンシブWebデザインに対応した画面にしたいと考えています。
現在、画面の幅を狭くすると右上のボタンが隠れてしまう。（右上の画面に取り残されてしまいます。）
（レスポンシブWebデザインに対応できていないため、PCの画面を少しでも小さく開いても、右側のナビボタン（マイページ、ログアウト）ボタンが隠れてしまいます。全画面だと表示されます。）
レスポンシブ メディアクエリの正しい記述方法をすれば、改善されるのでしょうか？
初めてのwebアプリ作成なので、PCだけでもしっかり表示させたいと思っています。
該当のソースコード
rails
1アプリケーション.html.erb 2 3<!DOCTYPE html> 4<html lang="ja" > 5 <head> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>ShareGreen</title> 8 <%= csrf_meta_tags %> 9 <%= csp_meta_tag %> 10 <script src="https://kit.fontawesome.com/968836844b.js" crossorigin="anonymous"></script> 11 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 12 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 13 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap" rel="stylesheet"> 14 </head> 15 16```rails 17CSS 18 19/* ヘッダー */ 20 21.header { 22 margin-bottom: 150px; 23 padding: 20px 0; 24 25} 26 （変更前） 27.inner { 28 width: 1400px; 29 margin: 0 auto; 30} 31 （変更後） 32.inner { 33 width:90%; 34 width: 1024px; 35 margin: 0 auto; 36} 37 38 39.nav { 40 width: 100%; 41 display: flex; 42 justify-content: space-between; 43} 44.logo { 45 width: 230px; 46} 47.nav__btn{ 48 display: inline-block; 49 padding: 0.4em 1.6em; 50 font-size: 1.0em; 51 color: #87CEFA; 52 text-decoration: none; 53 user-select: none; 54 border: 1px #87CEFA solid; 55 border-radius: 3px; 56 transition: 0.4s ease; 57} 58.nav__btn:hover{ 59 color: #fff; 60 background: #87CEFA; 61} 62 63.nav__logout{ 64 display: inline-block; 65 padding: 0.4em 1.6em; 66 font-size: 0.8em; 67 color: #87CEFA; 68 text-decoration: none; 69 user-select: none; 70} 71.nav__logout:hover{ 72 opacity: 0.5; 73} 74 75/* タブレット対応 */ 76@media (max-width: 1024px) { 77 .inner { 78 width: 90%; 79 margin: 0 auto; 80 } 81 .page-heading { 82 font-size: 24px; 83 } 84 .card { 85 width: 48%; 86 margin-bottom: 40px; 87 } 88 .prototype_image{ 89 width: 60%; 90 } 91} 92 93 /* スマホ表示 */ 94@media (max-width: 599px) { 95 .logo { 96 width: 120px; 97 } 98 .page-heading { 99 font-size: 20px; 100 } 101 .card { 102 width: 100%; 103 margin-bottom: 60px; 104 } 105 .card__title { 106 font-size: 18px; 107 } 108 .card__summary { 109 font-size: 14px; 110 } 111 .prototype_image{ 112 width: 100%; 113 } 114 .table{ 115 width: 100%; 116 } 117 118 119
試したこと
1,<meta name="viewport" content="width=device-width, initial-scale=1.0" />の記述
２，＠media の記述で、タブレットと携帯にも対応するようにしました。
参考にした記事
https://pecopla.net/web-column/how-to-responsive
分からないことは、どのようにしたら、画面を小さくしても画面上に表示させることができるかということです。
レスポンシブ メディアクエリの正しい記述方法をすれば、改善されるのでしょうか？
行ったことは、ipad用に@media (max-width: 1024px) 、携帯用に@media (max-width: 599px) の記述をしましたが、改善することができませんでした。現在の状況、画像の添付しました。
回答1件
0
ベストアンサー
画面幅が1024pxより大きい時.innerがwidth: 1400px;になると思いますがこのせいではないでしょうか？
1024px以下にした場合にはおそらく正しい位置に表示されるようになると思います。
併せて確認してください。
css
1/* widthとmax-widthを組み合わせるとある程度以上広がらないようにもできます */ 2.inner { 3 width:90%; 4 max-width: 1400px; 5 margin: 0 auto; 6}
投稿2021/01/20 23:52
総合スコア3235
アドバイスありがとうございます。
画面幅が1024pxより大きい時に.innerがwidth: 1400px;の設定になっていたせいでした。
変更後は、画面に隠れることなく表示することができました。
あなたの回答
tips
プレビュー
