Q&A
解決済
総合スコア20
投稿2019/01/24 07:53
編集2019/01/28 16:48ProgateというサイトでHTML、CSSの勉強をしている者です。
ランディングページの作成をしています。
mainのdivision(中央部分)で左右に100pxずつのpaddingを入れると、上手くテキストが左揃えになるのですが、左右にpaddingを与えないと、一行目が字下げのように少し右にズレてしまいます。CSSではどのような処理をしているのでしょうか？
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <div class="header"> 11 <h1>Progate</h1> 12 <ul> 13 <li>プログラミングとは</li> 14 <li>学べるレッスン</li> 15 <li>お問い合わせ</li> 16 </ul> 17 </div> 18 <div class="middle"> 19 <h1>HELLO WORLD<span>.</span></h1> 20 <h2>プログラミングの世界へようこそ</h2> 21 </div> 22 </body> 23</html>
CSS
1html, body, 2ul, ol, li, 3h1, h2, h3, h4, h5, h6, p, 4form, input, div { 5 margin: 0; /*←この部分を消すと直りましたが、影響が分かりません。*/ 6 padding: 0; 7} 8 9li { 10 list-style: none; 11} 12 13/* ここからCSSを記述してください */ 14body{ 15 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 16} 17 .header{ 18 height:90px; 19 background-color:#26d0c9; 20 color:#fff; 21 } 22 .header h1,li{ 23 float:left; 24 } 25 .header h1{ 26 font-size:36px; 27 margin:20px 40px; 28 } 29 .header li{ 30 margin:33px 20px; 31 } 32 .middle{ 33 } 34 .middle h1{ 35 font-size:140px; 36 37 } 38 .middle h2{ 39 font-size:60px; 40 } 41 .middle span{ 42 color:#ff4a4a; 43 } 44
ここに問題に対して試したことを記載してください。
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
floatが解除されていないからです。
CSS
1.middle { 2 clear: both; 3}
動くサンプル：https://jsfiddle.net/td1q5gzj/
【floatを解除する4つの方法（clear:both;、overflow:hidden;、clearfix、height）】
https://web-manabu.com/html-css39/
デベロッパーツールで確認してみてください。
【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
レイアウト全般の組み方の解説がされているのでお勧めです。
【よこ並びのCSS。】
http://lopan.jp/layout/
【段組みのCSS。】
https://lopan.jp/layout2/
投稿2019/01/28 17:05
編集2019/01/28 17:08総合スコア69643
あなたの回答
tips
プレビュー
