Q&A
jinba 様
早速、ご回答いただきありがとうございます。
タブレットサイズに指定することができました。
一点、追加で質問がございます。
質問欄に画像を一つ追加したのですが、
青色枠の部分にはflexboxを指定していたのですが、
縦並びにするには、どのように修正するべきでしょうか。
display:flexなどのコードを削除してみたのですが、
レイアウトが崩れてしまいます。
お手数ですが、ご回答いただけると幸いです。
よろしくお願いいたします。
幅1170pxでパソコン表示させたものを、タブレットサイズの1000pxにレスポンシブデザインを行いたいのですが、
タブレットの1000pxにオブジェクトの配置ができても画面サイズがパソコンの1170pxかそれ以上になっており、
うまくタブレットサイズで表示ができません。
解決のため行ってみたこと ： @mediaやbox-sizing:border-boxなどレスポンシブにする時に
必要だと思われるコードを書き、width:100%の指定を行いました。
使用ソースコードエディタ : brackets
タブレット表示はGoogle Chromeのディベロッパーツールでサイズ768×1024としました。
以下、現時点でサイト表示させた時の見え方の枠組みと、
コードを添付いたしました。
２枚目の添付画像は、１枚目の青枠箇所のflexbox指定をなくした場合の完成パターン図です。
※レスポンシブのコードは、CSS下部にある
/タブレット/@media(max-width:1000px) { からとなります。
よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>PORTFOLIO</title> 7 <link rel="stylesheet" href="about.css"> 8 </head> 9 <body> 10 <header> 11 <div class="container"> 12 <div class="wrapper"> 13 <div class="header-left"> 14 <img class="header-logo" src="images/●○○○○●○○○○●○○○○.svg"> 15 </div> 16 <nav> 17 <a href="●○○○○●○○○○●○○○○">●○○○○●○○○○●○○○○</a> 18 <a href="●○○○○●○○○○●○○○○">●○○○○●○○○○●○○○○</a> 19 </nav> 20 </div> 21 </div> 22 </header> 23 <section class="about-wrapper"> 24 <div class="container"> 25 <div class="heading"> 26 <h1>●○○○○●○○○○●○○○○</h1> 27 </div> 28 <div class="about-content"> 29 <a><img class="about-img" src="images/●○○○○●○○○○●○○○○.jpg"></a> 30 <div class="sentence"> 31 <h2>●○○○○●○○○○●○○○○</h2> 32 <p>●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○●○○○○</p> 33 <div class="sentence-content"> 34 <div class="bold"> 35 <p>●○○○○●○○○○●○○○○</p> 36 <p>●○○○○●○○○○●○○○○</p> 37 <p>●○○○○●○○○○●○○○○</p> 38 </div> 39 <div class="normal"> 40 <p>●○○○○●○○○○●○○○○</p><br> 41 <p>●○○○○●○○○○●○○○○</p><br> 42 <p>●○○○○●○○○○●○○○○</p><br> 43 </div> 44 </div> 45 </div> 46 </div> 47 </div> 48 </section> 49 <footer> 50 <div class="container"> 51 <div class="wrapper-bottom"> 52 <div class="footer-center"> 53 <img class="header-logo" src="images/●○○○○●○○○○●○○○○.svg"> 54 </div> 55 </div> 56 </div> 57 </footer> 58 </body> 59</html>
CSS
1* { 2 box-sizing: border-box; 3} 4body { 5 margin: 0; 6 font-family: "Hiragino Mincho ProN"; 7} 8a { 9 text-decoration: none; 10} 11.container { 12 width: 1170px; 13 margin: 0 auto; 14} 15.wrapper { 16 height: 190px; 17 width: 100%; 18 display: flex; 19 justify-content: space-between; 20} 21.header-left { 22 display: flex; 23 justify-content: flex-start; 24} 25.header-logo { 26 width: 110px; 27 padding: 40px 0; 28} 29.header-logo:hover { 30 cursor: default; 31} 32nav { 33 display: flex; 34 justify-content: flex-end; 35 padding-top: 128px; 36} 37nav a { 38 color: black; 39 font-size: 18px; 40 font-weight: bold; 41 letter-spacing: 5px; 42 padding-left: 100px; 43} 44nav a:hover { 45 cursor: pointer; 46} 47.about-wrapper { 48 padding-top: 160px; 49} 50.heading { 51 text-align: center; 52 padding-bottom: 80px; 53} 54.heading h1 { 55 font-size: 18px; 56 letter-spacing: 5px; 57 padding: 6px 50px; 58 color: white; 59 background-color: black; 60 display: inline-block; 61 font-weight: bold; 62 border-radius: 7px; 63} 64.about-content { 65 padding-bottom: 160px; 66 display: flex; 67 justify-content: space-between; 68} 69.about-img { 70 width: 535px; 71 object-fit: cover; 72 height: 450px; 73 border: 1px solid #CCCCCC; 74} 75.sentence { 76 width: 535px; 77} 78.about-img:hover { 79 cursor: pointer; 80} 81.about-content h2 { 82 font-size: 18px; 83 font-weight: bold; 84 letter-spacing: 5px; 85 text-align: left; 86} 87.about-content p { 88 letter-spacing: 5px; 89 margin: 10px 0; 90 font-size: 14px; 91 font-weight: normal; 92 line-height: 2; 93 text-align: justify; 94 display: inline-block; 95} 96.sentence-content { 97 display: flex; 98 justify-content: space-between; 99} 100.bold p { 101 font-weight: bold; 102} 103footer { 104 height: 100px; 105 background-color: black; 106 width: 100%; 107} 108.footer-center { 109 text-align: center; 110} 111.footer-center img { 112 width: 60px; 113 padding: 22px 0 8px 0; 114} 115 116/*タブレット*/ 117@media(max-width:1000px) { 118header { 119 width: 90%; 120 margin: 0 auto; 121 display: flex; 122 justify-content: center; 123} 124.about-wrapper { 125 width: 90%; 126 display: flex; 127 justify-content: space-between; 128 margin: 0 auto; 129 padding-top: 80px; 130} 131.about-content { 132 width: 90%; 133 padding: 40px 0 100px 0; 134 text-align: center; 135} 136.heading { 137 width: 90%; 138 padding-bottom: 40px; 139 margin: 0 auto; 140} 141.about-img { 142 width: 90%; 143 height: 350px; 144} 145.sentence h2 { 146 margin: 0 auto; 147} 148.sentence p { 149 margin: -5px 0; 150} 151footer { 152 height: 70px; 153 background-color: black; 154 width: 100%; 155} 156.footer-center { 157 text-align: center; 158} 159.footer-center img { 160 width: 40px; 161 padding: 15px 0 5px 0; 162} 163}
回答2件
0
footerの中にdiv.containerが存在していて、containerクラスにwidth: 1170px;と指定されているためです。
タブレット用のメディアクエリブロックの中でcontainerクラスのスタイリングもレスポンシブに変更してください。
投稿2020/08/25 01:46
退会済みユーザー
総合スコア0
0
ベストアンサー
横幅をクラスcontainerで指定しているのならば
@media内でクラスcontainerの横幅を上書きしてやりましょう
CSS
1.container { 2 width: 1170px; 3 margin: 0 auto; 4} 5 6/* 略 */ 7 8/* ↓は解像度1000以下の場合は{}内のCSS適用してねの意 */ 9@media(max-width:1000px) { 10 11/* ↓@media内でクラスcontainerの指定がない */ 12.container { 13 width: 90%;/* 解像度1000以下の場合widthを上書き */ 14} 15 16} 17
また
PC：1170px
タブレット：1000px
とのことですのでサイズ差がわずかしかありません
でしたら
<header>タグ内に <meta name="viewport" content="width=1170px"> とすることでタブレットの全画面を1170pxへすることができ 横幅調整だけならこちらのほうが楽なような気がします投稿2020/08/25 01:39
総合スコア310
ヒントとしましては
メディアクエリブロック内ではしきりに「width:90％」とされていますが
これはメディアクエリブロック以前で指定した横幅の90％という意味ではなく
親要素の90％という意味であり見解が間違っていそうな気がしました
また％指定は親要素にも大きさ指定が無いと効きません
そして「.about-content」は親要素になっており
子要素（「.about-img」と「.sentence」）を横並びにするといったほうがいいかと思います
子要素の合計幅が親要素を超えれば横並びにはできません
以上のヒントを踏まえ、質問の前にご自身でもう少し試行錯誤され修正したソースと共にあらたに質問されることをお勧めします
ご回答いただき、ありがとうございます。
ヒントを踏まえ、学習を行なっていきます。
この度の質問のベストアンサーとさせていただきます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。