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

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

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

画面を狭めるとマージンを設定していても、要素がくっついてしまいます

niconic73027793
niconic73027793

総合スコア179

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0評価

0クリップ

163閲覧

投稿2022/01/21 05:24

模写コーディングの勉強をしています。

マージンを設定していても、ウィンドウの幅を狭めると、画像の要素がマージンを設定しているのにもかかわらず
くっついてしまいます。

どうすれば、くっつかないようにできるのでしょうか?

下記がくっいてしまうコードのURLです。

リンク内容

@charset "UTF-8"; html { font-size: 100%; } body { font-family:"Arial","Hiragino Sans", "Hiragino Kaku Gothiic ProN", "Meiryo",sans-serif; color: #2a2a2a; font-size: 0.875rem; /*16px*/ } ul{ list-style:none; } img { max-width: 100%; vertical-align:bottom; } .wrapper{ max-width:1200px; margin:0 auto; padding:0 5%; } .section-title{ font-size:1.5rem; /*24rem*/ font-weight:bold; text-align:center; margin-bottom:20px; } .head-text{ width:590px; margin:0 auto; } .section-text{ font-family: Meiryo; font-weight: normal; font-size: 0.875rem; text-align: center; color: #24292e; margin-bottom:40px; } .flex-container{ display:flex; } .flex-container img{ width:510px; margin-right:20px; } .flex-container img:last-child{ margin-right:0; } /*------------------------------------------- ヘッダー -------------------------------------------*/ #header{ margin-bottom:80px; } /* h1タグ line-height にh1タグの高さよりも小さい値「1px」を指定することで、 h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う 「line-height: 0;」を指定してもOKです */ #header .site-title{ width:120px; line-height:1px; } /* aタグのリンク範囲を親要素のサイズに広げる */ #header.site-title a{ display:block; } /*------------------------------------------- Mainvisual -------------------------------------------*/ #mainvisual{ width:100%; height:auto; margin-bottom:80px; } h1 img{ position:absolute; margin:30px; top:0; right:0; } /*------------------------------------------- magazine -------------------------------------------*/ #magazine{ background-color:#fff; margin-bottom:80px; }
<header id="header"> <div class="mainvisual"> <img src="/images/mainvisual.jpg" alt=""> <h1 class="site-title"><img src="/images/logo.svg" alt="Mag88"></h1><!-- /.site-title --> </div><!-- /.mainvisual --> </header><!-- /#header --> <main> <section id="magazine" class="wrapper"> <div class="head-text"> <h2 class="section-title"> A special, long article in a newspaper or magazine </h2><!-- /.section-title --> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </p><!-- /.section-text --> </div><!-- /.head-text --> <div class="section-content"> <ul class="flex-container"> <li class="archive-image"> <img src="/images/magazine-archive.jpg" alt="Archive"> <div class="mask"> <h3>Archive</h3> <p>テキストテキストテキストテキスト<br> テキストテキストテキスト</p> </div><!-- /.mask --> </li><!-- /.archive-image --> <li class="new-image"> <img src="/images/magazine-new.jpg" alt="New"> <div class="mask"> <h3>New</h3> <p>テキストテキストテキストテキスト<br> テキストテキストテキスト</p> </div><!-- /.mask --> </li><!-- /.new-image --> </ul><!-- /.flex-container --> </div><!-- /.section-content --> </section><!-- /#magazine.wrapper --> <section id="fashion" class="wrapper"> <h2 class="section-title"> Fashion & Style </h2><!-- /.section-title --> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト </p><!-- /.section-text --> </section> <section class="catalog-antique"> <div class="flex-item wrapper"> <div class="img-item"> <img src="/images/catalog.jpg" alt="Catalog"> </div> <div class="text-item"> <h2 class="section-title">Catalog</h2><!-- /.section-title --> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </div> </div><!-- /.flex-item wrapper --> </section> <section class="catalog-antique"> <div class="flex-item wrapper"> <div class="text-item"> <h2 class="section-title">Antique</h2><!-- /.section-title --> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <p class="section-text"> テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <div class="btn">Read More</div><!-- /.btn --> </div> <div class="img-item"> <img src="/images/antique.jpg" alt="Catalog"> </div> </div><!-- /.flex-item wrapper --> </section> </main>

下記がお手本のサイトです

リンク内容

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yambejp

2022/01/21 06:11

具体的には1000*1000の画像がマージンを保ったままサイズを小さくしたいということですか

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。