こんにちは。プログラミング初学者です。
今、レスポンシブとSass、jQueryをメインに勉強しています。
やりたいこと:パソコンで徐々に幅を小さくしたときもその動きと連動して徐々に画面に収まってくれるようにしたい。
https://stand-4u.com/web/javascript/jquery-method.html
↑このページのように、幅をPCで動かしたときも、ちゃんとすべての内容物がおさまってくれるようになっている感じ
実際のコード
html
1 <div id="about"> 2 <section class="about container"> 3 <a name="look">→これは、上のヘッダー部分でlinkを張っていて、そのリンク先です。 4 <div class="box3"> 5 <h2 class="h2">About 6 <div>私の自己紹介</div> 7 </h2> 8 9 <h3>コンセプト</h3> 10 <p>私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。</p> 11 </div> 12 </a> 13 <div class="pic"><img src="img/about.jpg" alt="" class="image_me"></div> 14 </section> 15 </div> 16 </section>
CSS
1.about { 2 margin-bottom: 145px; 3 display: -webkit-box; 4 display: -ms-flexbox; 5 display: flex; 6 -webkit-box-pack: justify; 7 -ms-flex-pack: justify; 8 justify-content: space-between; 9 -webkit-box-align: center; 10 -ms-flex-align: center; 11 align-items: center; 12} 13 14@media (max-width: 667px) { 15 .about { 16 -webkit-box-orient: vertical; 17 -webkit-box-direction: normal; 18 -ms-flex-direction: column; 19 flex-direction: column; 20 margin-bottom: 130px; 21 padding: 0 15px; 22 } 23} 24 25.box3 { 26 border: solid 1px #707070; 27 background-color: #F0F0F0; 28 width: 315px; 29 padding: 40px; 30} 31 32@media (max-width: 667px) { 33 .box3 { 34 background-color: #fff; 35 width: auto; 36 border: none; 37 padding: 0; 38 } 39} 40 41.box3 h2 { 42 font-size: 64px; 43 margin-bottom: 30px; 44} 45 46@media (max-width: 667px) { 47 .box3 h2 { 48 font-size: 38px; 49 } 50} 51 52.box3 h3 { 53 font-size: 24px; 54 margin-bottom: 30px; 55} 56 57@media (max-width: 667px) { 58 .box3 h3 { 59 font-size: 20px; 60 margin-bottom: 20px; 61 } 62} 63 64.box3 p { 65 line-height: 1.8; 66} 67 68@media (max-width: 667px) { 69 .box3 p { 70 font-size: 12px; 71 line-height: 1.5; 72 margin-bottom: 30px; 73 } 74} 75 76.image_me { 77 width: 100%; 78} 79 80@media (max-width: 667px) { 81 .image_me { 82 width: 100%; 83 } 84}
困ってること
.box3はパーセンテージ指定にしたら、うまくレスポンシブしてくれるのですが、
画像の.image_meが極端に小さくなってしまって、ぶかっこうなんです。
親要素をspace-around;にしてみましたが、、これが凶と出ているのか…
本当は、.box3と.image_meの間は、20pxくらいの幅にしたいんですが…うまくいきません。
画像はちっちゃくなるわ、距離感はとりずらいわ、という感じです。
CSS
1.about { 2 width: auto; 3 margin: 0 auto; 4 margin-bottom: 145px; 5 display: -webkit-box; 6 display: -ms-flexbox; 7 display: flex; 8 -ms-flex-pack: distribute; 9 justify-content: space-around; 10 padding: 0 5%; 11 -webkit-box-align: center; 12 -ms-flex-align: center; 13 align-items: center; 14} 15 16@media (max-width: 667px) { 17 .about { 18 -webkit-box-orient: vertical; 19 -webkit-box-direction: normal; 20 -ms-flex-direction: column; 21 flex-direction: column; 22 margin-bottom: 130px; 23 padding: 0 15px; 24 } 25} 26 27.box3 { 28 border: solid 1px #707070; 29 background-color: #F0F0F0; 30 width: 50%; 31 padding: 40px; 32} 33 34@media (max-width: 667px) { 35 .box3 { 36 background-color: #fff; 37 width: auto; 38 border: none; 39 padding: 0; 40 } 41} 42 43.box3 h2 { 44 font-size: 64px; 45 margin-bottom: 30px; 46} 47 48@media (max-width: 667px) { 49 .box3 h2 { 50 font-size: 38px; 51 } 52} 53 54.box3 h3 { 55 font-size: 24px; 56 margin-bottom: 30px; 57} 58 59@media (max-width: 667px) { 60 .box3 h3 { 61 font-size: 20px; 62 margin-bottom: 20px; 63 } 64} 65 66.box3 p { 67 line-height: 1.8; 68} 69 70@media (max-width: 667px) { 71 .box3 p { 72 font-size: 12px; 73 line-height: 1.5; 74 margin-bottom: 30px; 75 } 76} 77 78.image_woman { 79 width: 100%; 80} 81 82@media (max-width: 667px) { 83 .image_woman { 84 width: 100%; 85 } 86}
何かうまい方法はありませんでしょうか。
伝わりますでしょうか。
分かりにくければすみません。よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー