Q&A
実機ではどうでしょうか
レスポンシブのコーディングをしています 画面をスマホ幅にしてlessonを縦並べにした際、少し右寄りになります スマホ幅の際のlessonにmargin:0px;を指定すると直ります
デベロッパーツールを確認したところ、画像のようにmarginの右だけ細くなっていました
なぜこのようなことが起こるのかmarginについても調べてみましたが解決できずじまいです
CSS
1@charset "utf-8"; 2*,*::before,*::after{box-sizing:border-box;} 3.lessons{ padding:90px 50px 0px; text-align:center; background-color:#F7F7F7;} 4 .heading{font-weight:normal; font-size:1.6rem; color:#5F5D60;} 5 .lesson-wrapper{display:flex; justify-content:center; margin-top:60px; width:100%;} 6 .lesson-p{font-size:0.85rem; line-height:1.5; color:#B3AEB5; padding-top:25px; 7} 8 .lesson{height:350px; width:25%; margin:0px 30px 0px; position:relative; } 9 .lesson-icon{width:120px; height:120px; display:inline-block; transform:rotate(45deg); 10 border-radius: 20%; 11 } 12 .lesson-name{position:absolute; top:50px; width:100%; color:#fff;} 13 .lesson:nth-of-type(1) .lesson-icon{background-color:#33CC99;} 14 .lesson:nth-of-type(2) .lesson-icon{background-color:#FFCC33;} 15 .lesson:nth-of-type(3) .lesson-icon{background-color:#CC3333;} 16 .lesson:nth-of-type(4) .lesson-icon{background-color:#330099;} 17 18@media(max-width:768px){ 19.heading{font-size:1.3rem} 20 21.lesson{width:100%; } 22.lesson-wrapper{flex-direction: column;} 23}
HTML
1<!DOCTYPE html> 2<html lang="ja" > 3 <head> 4 <meta charset="utf-8"> 5 <title>progate上級 模写</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 </head> 8 <body> 9 10 11 <div class="lessons"> 12 <h3 class="heading">Learn Where to Get Started!</h3> 13 <div class="lesson-wrapper"> 14 <div class="lesson"> 15 <span class="lesson-icon"></span> 16 <p class="lesson-name">HTML & CSS</p> 17 <p class="lesson-p">ウェブページの作成に使用される言語です。 18 HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 19 </div> 20 <div class="lesson"> 21 <span class="lesson-icon"></span> 22 <p class="lesson-name">jQuery</p> 23 <p class="lesson-p">素敵な動きを手軽に実装できるJavaScriptライブラリです。 24 アニメーション効果をつけたり、 25 Ajax（エイジャックス）を使って外部ファイルを 26 読み込んだりと色々なことができます。</p> 27 </div> 28 <div class="lesson"> 29 <span class="lesson-icon"></span> 30 <p class="lesson-name">Ruby</p> 31 <p class="lesson-p">オープンソースの動的なプログラミング言語で、 32 シンプルさと高い生産性を備えています。大きなWebアプリケーションから 33 小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 34 </div> 35 <div class="lesson"> 36 <span class="lesson-icon"></span> 37 <p class="lesson-name">PHP</p> 38 <p class="lesson-p">HTMLだけではページの内容を変えることはできません。 39 PHPはHTMLにプログラムを埋め込み、 40 それを可能にします。</p> 41 </div> 42 </div> 43 44 </div> 45 </body> 46</html> 47
回答1件
0
ベストアンサー
こんにちは。
overflowに何も設定せず、親要素の幅を子要素の幅が上回ると、子要素は親要素からはみ出てしまいます。
visible
内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
overflow - CSS: カスケーディングスタイルシート | MDN
解決方法ですが、幅を調整してみてはいかがでしょうか。
css
1.lesson { 2 width: calc(100% - 30px*2); 3}
投稿2021/01/28 07:27
総合スコア36104
あなたの回答
tips
プレビュー
