Q&A
HTMLはDOCTYPEから全て提示してください。
それに、コードからはレスポンシブな指定が全然見えないですが・・
画像のように画面を縮小したりすると全体的にHPの形が崩れてしまいます。
これを縮小しても、元の形にように見えるようにしたいです。
この問題を解決するにはどうすれば良いのでしょうか？回答よろしくお願いいたします。
HTML
1 <div class="box"> 2 <div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg" alt=""></div> 3 <div class="right-text"> 4 <p class="title">『365日 世界遺産 絶景の旅』旅人の声募集箇所一覧</p> 5 <p class="text1"> 6 ヨーロッパ 7 サンマリノ 8 １、サンマリノ歴史地区とティターノ山 9 イタリア 10 2、フィレンツェ歴史地区 11 3、ドロミーティ 12 4、ピサのドゥオモ広場 13 5、ポルトヴェネーレ、チンクエテッレ及び小島群 14 6、ローマ歴史地区、教皇領とサン・パオロ・フオーリ・レ・ムーラ大聖堂 15 7、オルチア渓谷 16 8、アルベロベッロのトゥルッリ 17 9、アマルフィ海岸 18 10、ヴェネツィアとその潟 19 バチカン 20 11、バチカン市国 21 マルタ 22 12、ヴァレッタの市街 23 スイス 24 13、アルプス ユ</p> 25 </div>
CSS
1 2.wrap .box { 3 display: flex; 4 margin: 0px 350px 20px 350px; 5} 6 7.box img { 8 width: 50%; 9 width: 320px; 10 margin: 20px 0 0 0; 11} 12 13 14.wrap .box .right-text { 15 display: flex; 16 flex-direction: column; 17 /* justify-content: center; */ 18 margin-left: 30px; 19 width: 50%; 20} 21 22.right-text { 23 width : 460px; 24} 25 26.right-text .title { 27 font-size: 18px; 28 line-height: 31px; 29 font-weight: 700; 30 letter-spacing: 1.8px; 31 font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;; 32} 33 34.right-text .text { 35 color: #656c6e; 36 font-size: 13px; 37 line-height: 22px; 38 font-weight: 400; 39 display: -webkit-box; 40 overflow: hidden; 41-webkit-box-orient: vertical; 42-webkit-line-clamp: 7; 43 padding-bottom: 0px; 44 font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;; 45} 46 47.right-text .text1 { 48 color: #656c6e; 49 font-size: 13px; 50 line-height: 22px; 51 font-weight: 400; 52 display: -webkit-box; 53 overflow: hidden; 54-webkit-box-orient: vertical; 55-webkit-line-clamp: 7; 56padding-bottom: 80px; 57 font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;; 58} 59
> width: 50%;
width: 320px;
直後に上書きしているのはどういう意図ですか？
問題が再現しませんでした。
ご提示のコードで試してみたところ、スクリーンショットのようなレイアウトにならずに、横スクロールバーが出ました。
おそらく、ご提示いただいていない部分に原因があると思われます。
<!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.0">
<link rel="stylesheet" href="sample.css">
<title>Pas-Pol</title>
</head>
<body>
<!-- ページ１ -->
<div class="part-img">
<div class="change_img">
<img src="../siteLogo-pc@2x.png">
<ul>
<li>TOP</li>
<li>PRODUCT</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!-- ページ２ -->
<div class="text1">
<h1>旅に出よう</h1>
<p> 僕たちが作りたいのは <br>
持っているだけで旅に出たくなるモノ。<br>
持っているだけでわくわくするモノ。<br>
<br>
それは新しい時代の “パスポート”<br>
僕たちが作るものは、<br>
そんな、存在でありたい。<br>
<br>
そして、人と人が繋がる<br>
こんな時代だからこそ、<br>
僕たちは、みんなでひとつのモノを<br>
作ることを追求したい。</p>
<div class="paspol-img">
<img src="https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/concept-siteLogo@2x.png">
<p>それは、自分と世界を繋げる
<br>
旅のモノづくりブランド</p>
</div>
</div>
<!-- 3ページ目 -->
<section class="hako1">
<div class="product-text">
<h2>PRODUCT</h2>
</div>
<div class="product-detail">
<h3>MORE</h3>
</div>
</section>
<div class="profile">
<div class="world">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/01/wh_thumb2.png">
<p>地球一周 365日
世<br>界遺産絶景の旅</p>
</div>
<div class="kyoto">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/kyoto365_thumnail-1.png">
<p> 365日 京都 絶景の<br>旅</p>
</div>
<div class="Hokkaido">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/banner_thumb1.png">
<p>365日 北海道 絶景<br>
日めくりカレンダー</p>
</div>
</div>
<div class="profile2">
<div class="Hokkaido2">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/08/thumb_gokkaido.png">
<p>365日 北海道
絶景<br>の旅</p>
</div>
<div class="TWFD">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2019/05/thumb_fes.png">
<p> The World<br>
Festival Duide
- <br>海外の音楽フェス完<br>
全ガイド -</p>
</div>
<div class="the-world">
<img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2018/11/banner_%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB21.png">
<p>この世界で死ぬまで<br>
にしたいこと2000</p>
</div>
</div>
<!-- ニュース -->
<section class="hako2">
<div class="news">
<h2>NEWS</h2>
</div>
<div class="product-detail">
<h3>MORE</h3>
</div>
</section>
<!-- 画像と文字の横並び -->
<div class="wrap">
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2-800x450.jpg" alt="lastsale"></div>
<div class="right-text">
<p class="title">【セール情報あり】PAS-POLオンラインショップ閉店のお知らせ</p>
<p class="text">
いつも、PAS-POLのサイトをご覧いただきありがとうございます。突然ではございますが、この度2021年9月30日をもちまして、PAS-POL公式オンラインショップを閉鎖する運びとなりました。（※PAS-POLのブランドがなくなるわけではありません）
2015年の夏からスタートしたオンラインショップですが、旅が好きな方、TABIPPOを知ってくださってる方、ライフスタイルにこだわりたい方、などたくさんの方にPAS-POLの商品を公式ショップにて購入いただいたこと、と…</p>
</div>
</div>
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg" alt="lastsale"></div>
<div class="right-text">
<p class="title">【募集期間延長】人気の絶景ポストカード製作中！日本の「夏」の絶景を大募集します</p>
<p class="text">こんにちは、TABIPPOの中 美砂希です。
東急ハンズやLOFTにて販売されている、旅好きな方とつくってきたPAS-POLの絶景ポストカードですが、制作が再開しましたのでお知らせいたします。
今回の制作は、四季に合わせて募集をしています。年間を通して募集をするので、彩り豊かな四季折々の写真のご応募をお待ちしております。第二弾は、夏の風景写真を募集いたします！
現在の予定では以下のスケジュールで募集を行い（変更の可能性あり）、夏以降募集の際にはまた、改めてお知ら
</p>
</div>
</div>
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/05/springphoto.jpg" alt="lastsale"></div>
<div class="right-text">
<p class="title">【募集期間延長】人気の絶景ポストカードの制作が再スタート！日本の「春」の絶景を大募集します</p>
<p class="text">こんにちは、TABIPPOの中 美砂希です。
東急ハンズやLOFTにて販売されている、旅好きな方とつくってきたPAS-POLの絶景ポストカードですが、久しぶりに制作が決定しましたのでお知らせいたします。
今回の制作は、四季に合わせて募集をしていきます。年間を通して募集をするので、彩り豊かな四季折々の写真のご応募をお待ちしております。まずは、春の風景写真を募集いたします！
現在の予定では以下のスケジュールで募集を行い（変更の可能性あり）、春以降募集の際にはまた、改めてお知らせをいたします。</p>
</div>
</div>
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/2020-12-10-16.59.15.jpg" alt="lastsale"></div>
<div class="right-text">
<p class="title">新年を新たな気持ちで迎える！PAS-POLより、人気商品が詰まった「選べる」福袋の発売がスタート</p>
<p class="text">今年は、いろんなことがあった1年でした。2021年は、もっと笑ってもっと楽しむ1年に。
世界の旅先に想いを馳せて、日本の魅力を再発見した2020年。旅ができることは当たり前じゃなかった。そんなことを気付かされた年になりました。
来年こそは、徐々に国内外を自由に行き来することができますように。
未来への予定を立てたり、絶景を眺めながらあこがれの場所や再訪したい場所をピックアップしたり。ワクワクした気持ちになって新たな気持で新年を迎えられるPAS-POLグッズを詰め込み、2種類の福袋をご用意いたしま</p>
</div>
</div>
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg" alt="lastsale"></div>
<div class="right-text">
<p class="title">【10/7募集箇所更新】世界遺産フォトグラファーとつくる『365日世界遺産絶景の旅』。不足場所の「旅人の声」を募集中！</p>
<p class="text">現在制作中の「世界遺産」だけを365箇所集めた書籍『365日世界遺産絶景の旅』に掲載する、旅人の声を9月末まで募集しておりました。
約100名の方からたくさんの感想コメントをいただき、365箇所分のうち、211箇所まで集まりました。ご応募いただいたみなさま、本当にありがとうございます…！
しかし、あと132箇所が残っている状態です…なんとか、365箇所まで近づけたく、募集期間を延長することにしました。（募集するのは不足場所のみとなります）
この場所に行ったことがある！という方は、感想コメントをご</p>
</div>
</div>
<div class="box">
<div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg" alt=""></div>
<div class="right-text">
<p class="title">『365日 世界遺産 絶景の旅』旅人の声募集箇所一覧</p>
<p class="text1">
ヨーロッパ
サンマリノ
１、サンマリノ歴史地区とティターノ山
イタリア
2、フィレンツェ歴史地区
3、ドロミーティ
4、ピサのドゥオモ広場
5、ポルトヴェネーレ、チンクエテッレ及び小島群
6、ローマ歴史地区、教皇領とサン・パオロ・フオーリ・レ・ムーラ大聖堂
7、オルチア渓谷
8、アルベロベッロのトゥルッリ
9、アマルフィ海岸
10、ヴェネツィアとその潟
バチカン
11、バチカン市国
マルタ
12、ヴァレッタの市街
スイス
13、アルプス ユ</p>
</div>
</div>
</div>
<!-- フッター -->
<!-- 簡易的なボタン -->
<section class="footer-button">
<div class="button">
<div class="facebook">
<h4>Share on Facebook</h4>
</div>
</div>
<div class="button">
<div class="twitter">
<h4>Share on Twitter</h4>
</div>
</div>
<div class="button">
<div class="hatena">
<h4>Hatena Bookmark</h4>
</div>
</div>
</section>
<section class="five-navs">
<ul>
<li>TOP</li>
<li>PRODUCT</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</section>
<section class="footer-last">
<div class="final-img">
<img src="https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/siteLogo-small@2x.png" alt="paspol"> </div>
<div class="footer-text">
<p>Copyright © 2021 PAS-POL -旅のモノづくりブランド-｜TABIPPO All rights reserved.</p>
</div>
</section>
</body>
</html>
css
body {
margin: 0;
}
.part-img {
background-image: url(https://pas-pol.jp/wp-content/uploads/2014/11/main_visual_13-0x0.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height:750px;
display: inline-block;
}
.change_img {
display: flex;
}
.change_img img {
margin: 50px 0px 0px 100px;
width: 250px;
}
.change_img ul {
list-style: none;
color: white;
display: flex;
font-size: 14px;
font-family: "Gill Sans Std Book", sans-serif;
margin: 80px 0px 0px 560px;
}
.change_img li {
display: inline;
width: 100px;
}
.text1 {
background-color: #f6f6f6;
display: inline-block;
margin: 0;
}
.text1 p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 600px;
margin-inline-end: 600px;
font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
.text1 h1 {
font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
font-style: normal;
text-align: center;
font-size: 44px;
line-height: 75px;
font-weight: 400;
padding-top: 120px;
}
.paspol-img img {
max-width: 100%;
display: block;
margin:auto;
zoom: 50%;
padding: 60 0 60 0 px;
}
.paspol-img p {
padding-bottom: 100px;
}
/* 3ページ目 */
.hako1 {
display: flex;
}
.product-text h2 {
display: block;
margin: 100px 0px 50px 340px;
font-size: 30px;
font-weight: normal;
/* 下の波線img */
background: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/sectionTitle-underLine@2x.png) no-repeat;
background-size: 68px 8px;
background-position: 0 bottom;
padding-bottom: 17px;
line-height: 1;
font-family: "Gill Sans Std Book", sans-serif;
letter-spacing: 0.1em;
display: flex;
}
.product-detail h3 {
display: inline-block;
margin: 100px 0px 50px 500px;
padding: 10px 55px 10px 55px;
border: solid 1px;
font-family: "Gill Sans Std Book", sans-serif;
font-weight: 400;
font-size: 14px;
background-image: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/button-arrow@2x.png) no-repeat;
background-position: 0 right 0 0;
}
.profile {
width: 100%;
display: flex;
}
.world img {
width: 240px;
margin-left: 360px;
margin-right: 30px;
}
.world p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
letter-spacing: 0.1em;
margin-left: 340px;
margin-right: 30px;
margin-bottom: 70px;
text-align: center;
}
.kyoto img {
width: 240px;
}
.kyoto p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
margin-left: 10px;
margin-bottom: 70px;
letter-spacing: 0.1em;
/* text-align: center; */
}
.Hokkaido img {
width: 240px;
margin-left: 30px;
}
.Hokkaido p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
margin-left: 10px;
margin-bottom: 70px;
letter-spacing: 0.1em;
text-align: center;
}
.profile2 {
display: flex;
justify-content: center;
}
.Hokkaido2 img {
width: 240px;
}
.Hokkaido2 p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
margin-left: 20px;
letter-spacing: 0.1em;
}
.TWFD img {
width: 240px;
margin: 0px 30px 0px 30px;
}
.TWFD p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
letter-spacing: 0.1em;
margin-left: 45px;
}
.the-world img {
width: 240px;
}
.the-world p {
font-family:"Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3"
, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; ;
font-style: normal;
color: #13191b;
font-size: 20px;
font-weight: 700;
line-height: 34px;
letter-spacing: 0.1em;
text-align: center;
}
/* 3ページ目の終盤 空白調整 */
.profile2 {
margin-bottom: 120px;
}
/* 背景色 */
.hako2 {
display: flex;
background-color: #f6f6f6;
/* margin: 0px; */
}
/* 4ページ目ニュース */
.wrap {
background-color: #f6f6f6;
overflow: hidden;
}
.news h2 {
/* 文字の幅 */
display: block;
background-color: #f6f6f6;
margin: 100px 0px 50px 340px;
font-size: 30px;
font-weight: normal;
/* 下の波線img */
background: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/sectionTitle-underLine@2x.png) no-repeat;
padding-bottom: 17px;
line-height: 1;
font-family: "Gill Sans Std Book", sans-serif;
letter-spacing: 0.1em;
display: flex;
}
.product-detail h3 {
display: inline-block;
margin: 100px 0px 50px 500px;
padding: 10px 55px 10px 55px;
border: solid 1px;
font-family: "Gill Sans Std Book", sans-serif;
font-weight: 400;
font-size: 14px;
background-image: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/button-arrow@2x.png)
background-repeat: no-repeat;
background-position: 0 right 0 0;
}
.wrap .box {
display: flex;
margin: 0px 350px 20px 350px;
}
.box img {
width: 50%;
width: 320px;
margin: 20px 0 0 0;
}
.wrap .box .right-text {
display: flex;
flex-direction: column;
/* justify-content: center; */
margin-left: 30px;
width: 50%;
}
.right-text {
width : 460px;
}
.right-text .title {
font-size: 18px;
line-height: 31px;
font-weight: 700;
letter-spacing: 1.8px;
font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;;
}
.right-text .text {
color: #656c6e;
font-size: 13px;
line-height: 22px;
font-weight: 400;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
padding-bottom: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;;
}
.right-text .text1 {
color: #656c6e;
font-size: 13px;
line-height: 22px;
font-weight: 400;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
padding-bottom: 80px;
font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;;
}
/* footer 最後のページ */
.footer-button {
display: flex;
justify-content: center;
}
.button {
margin: 20px 30px 20px 0px;
}
.button h4 {
display: inline-block;
padding: 13px 20px 13px 20px;
border: solid 1px;
font-family: "Gill Sans Std Book", sans-serif;
font-weight: 400;
line-height: 20px;
letter-spacing: 1.4px;
font-size: 12px;
background-image: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/button-arrow@2x.png) no-repeat;
background-position: 0 right 0 0;
}
.facebook h4 {
color: #5b5bdc;
}
.twitter h4 {
color: #70bdd3;
}
.hatena h4 {
color: #2F9bcd;
}
/* ボタンホバーしたとき */
.button .facebook h4:hover {
color: #fff;
background-color: #5b5bdc;
}
.button .twitter h4:hover {
color: #fff;
background-color: #70bdd3;
}
.button .hatena h4:hover {
color: #fff;
background-color: #2F9bcd;
}
/* footer 戻しナビ */
.five-navs {
color: white;
background-color: #939899;
}
.five-navs ul {
display: flex;
justify-content: center;
margin: 0px;
list-style: none
}
.five-navs ul li {
font-family: "Gill Sans Std Book", sans-serif;;;
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin: 20px 40px 20px 0px;
padding: 10px 0px 10px 0px;
}
.footer-last {
display: flex;
justify-content: center;
align-items: center;
background-color: #656c6e;
}
.final-img img {
width: 30%;
margin: 30px 120px 30px 0px;
}
.footer-text {
color: #FFFFFF;
font-family: "Gill Sans Std Book", sans-serif;;
font-weight: 400;
font-size: 10px;
line-height: 17px;
letter-spacing: 1.2px;
word-spacing: 0px;
}
width: 50%;は単純に消し忘れていました。
レスポンシブデザインは大方HPの形ができてから、
指定する予定です。
申し訳ありません。提示いたしました！
ご質問に追記されることをおすすめします。
全部は入りきりませんでした…
入れられるところまで入れてみます。
回答1件
0
ベストアンサー
とりあえず、以下を見直してみるといいのでは。
css
1margin: 0px 350px 20px 350px;
これは、左右に350pxの余白を入れる、という意味です。
たとえば、モバイルサイズですと400pxぐらいですから、左右の余白で計700pxも取ってしまうと、それだけでコンテンツを入れる場所がなくなります。
ただ、そもそも「PCとモバイルを同じレイアウトにする」ということ自体がかなり無理があります。
PCでは横に並べているものをモバイルでは縦に並べる、など、スクリーンサイズに合ったレイアウト変更を行うことがあり、これを「レスポンシブデザイン」と呼びます。
コードを見る感じ、おそらく模写をしていらっしゃると思いますので、模写元のページをよく観察して、ビューポートサイズの変化によってどのようにレイアウトが変わるのか、参考になさるのがいいのではないかと思います。
投稿2021/09/29 04:46
総合スコア36960
回答ありがとうございます！
フレックスレイアウトを覚える前に書いたコードだと思います…。
覚える前まではmarginの力技でモノを移動させていたのですが、
それがHPを崩す原因になっていたのかもしれません。
＞モバイルサイズですと400pxぐらいですから、左右の余白で計700pxも取ってしまうと、それだけでコンテンツを入れる場所がなくなります。
参考になります。これからこういったコードを書かないように気を付けたいと思います。
とても分かりやすい説明ありがとうございます！動画で学んだことはあったのですが完全に理解できていなかったようです。一回やってみます。
あなたの回答
tips
プレビュー
