Q&A
画面、左右の余白を消したい。
解決方法を調べると、
css
1{ 2 margin: 0; 3 padding: 0; 4}
で消えると書いていたが消えなかった。
リセットCSSで同じように記述すると、余白は消えるが今まで記述してきた箇所まで適応される。
]
他になにか解決方法はありますでしょうか？
長いですが、コードはこちらです。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>住友商事</title> 8</head> 9<body> 10 <!-- ヘッダ --> 11 <header class="t-header"> 12 <div class="mti-col-md-12"> 13 <div class="globalHeder"> 14 <div class="companyLogo"> 15 <h1> 16 <img src="img/logo.svg" alt="住友商事"> 17 </h1> 18 <span class="japan">日本</span> 19 </div> 20 <div class="Navigation"> 21 <div class="switch"> 22 <div class="switch"> 23 <ul> 24 <li class="weight">日本語</li> 25 <li class="border">English</li> 26 </ul> 27 </div> 28 </div> 29 <div class="wrap"> 30 <div class="selectRegin"> 31 <img src="img/icons/icon-region.png" alt="Regin"> 32 <span class="select">Select Region</span> 33 </div> 34 <div class="searchButton"> 35 <span class="search"> 36 <img src="img/icons/icon-search.png" alt="サイト検索"> 37 </span> 38 </div> 39 </div> 40 </div> 41 </div> 42 </div> 43 <!-- ヘッダーメニュー --> 44 <div class="list"> 45 <ul> 46 <li class="ColumnNone">企業情報<span class="arrow"></span></li> 47 <li class="Column">事業紹介<span class="arrow"></span></li> 48 <li class="Column">ニュース<span class="arrow"></span></li> 49 <li class="Column">サステナビリティ<span class="arrow"></span></li> 50 <li class="Column">投資家情報<span class="arrow"></span></li> 51 <li class="Column">採用情報<span class="arrow"></span></li> 52 <li class="Column">次の100年へ<span class="arrow"></span></li> 53 </ul> 54 </div> 55 </header> 56 <!-- メイン写真 --> 57 <main class="mti-main"> 58 <article class="mti-article"> 59 <img class="photo1" src="img/heroVisual.jpg" alt="メイン写真"> 60 <p class="photo1letter">Enriching lives and the world</p> 61 </article> 62 </main> 63</body> 64</html>
CSS
1.t-header { 2 background-color: #fff; 3 border-top: 4px solid #b5dedb; 4 top: 0; 5 left: 0; 6 width: 100%; 7 position: fixed; 8 z-index: 50; 9} 10 11.globalHeder { 12 display: flex; 13 align-items: flex-start; 14 margin-right: 35px; 15 justify-content: space-between; 16 background-color: #fff; 17} 18 19.companyLogo { 20 display: flex; 21 align-items: center; 22 margin-left: 20px; 23} 24 25img { 26 max-width: 100%; 27 width: auto; 28 box-sizing: border-box; 29 vertical-align: top; 30} 31 32.japan { 33 margin-left: 20px; 34} 35 36.Navigation { 37 padding: 0 7px; 38 display: flex; 39 align-items: center; 40} 41 42.switch { 43 margin: 10px 0 10px 24px; 44} 45 46ul { 47 display: flex; 48 align-items: center; 49 50} 51 52li { 53 list-style: none; 54} 55 56.border { 57 border-left: 1px solid #e5e5e5; 58 margin-left: 15px; 59 padding-left: 15px; 60 opacity: 0.5; 61} 62 63.weight { 64 font-weight: bold; 65} 66 67.select { 68 margin-left: 5px; 69 font-weight: bold; 70} 71 72.wrap { 73 display: flex; 74 margin: 10px 0 10px 24px; 75 border-left: 1px solid #e5e5e5; 76 margin-left: 24px; 77 padding-left: 24px; 78} 79 80.searchButton { 81 border-left: 1px solid #e5e5e5; 82 margin-left: 24px; 83 padding-left: 24px; 84} 85 86.list { 87 background-color: #fff; 88 border-top: 1px solid #e5e5e5; 89 border-bottom: 1px solid #e5e5e5; 90 position: relative; 91 width: 100%; 92} 93 94.ColumnNone { 95 font-weight: bold; 96 display: flex; 97 align-items: center; 98 justify-content: center; 99 flex: 1; 100 padding: 15px 24px; 101} 102 103.Column { 104 border-left: 1px solid #e5e5e5; 105 margin-left: 24px; 106 padding: 15px 24px; 107 font-weight: bold; 108 display: flex; 109 align-items: center; 110 justify-content: center; 111 flex: 1; 112} 113 114.arrow{ 115 margin-left: 10px; 116 width: 5px; 117 height: 5px; 118 border: 1px solid; 119 border-color: transparent transparent black black; 120 transform: rotate(-45deg); 121} 122 123.mti-main { 124 position: relative; 125 margin-top: 183px; 126 z-index: 1; 127 overflow: hidden; 128} 129 130.mti-article { 131 position: relative; 132 z-index: 2; 133} 134 135.photo1 { 136 width: 100%; 137 height: 650px; 138 margin: 0; 139 padding: 0; 140} 141 142.photo1letter { 143 position: absolute; 144 top: 40%; 145 left: 50%; 146 -ms-transform: translate(-50%,-50%); 147 -webkit-transform: translate(-50%,-50%); 148 transform: translate(-50%,-50%); 149 font-size: 60px; 150 color: #ffffff; 151 white-space: nowrap; 152 font-family: 'Superclarendon', sans-serif; 153 154}
ご教授よろしくお願いします！
回答1件
0
ベストアンサー
css
1{ 2 margin: 0; 3 padding: 0; 4}
セレクターがないです。余白を消したいセレクターを指定してください。
たぶん、
css
1.mti-main { 2 margin: 0; 3 padding: 0; 4}
リセットCSSを使うなら、すべての余白が消えるので、それぞれの要素にあった余白を設定するようにします。
リセットCSSを使わないと、ブラウザによって余白の既定値が異なる場合があるので別のブラウザだと異なるレイアウトになる可能性があります。
リセットCSSを使わずにすべての対象ブラウザでレイアウトを確認するか、
リセットCSSを使って、それぞれの要素に希望の余白を設定するか、
どちらがいいかの判断はおまかせします。
サンプル作成して調べたら、bodyの余白のようでした。
css
1body { 2 margin: 0; 3}
投稿2020/10/14 03:50
編集2020/10/14 05:28
総合スコア33782
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/14 05:12
2020/10/14 05:18
2020/10/14 05:24
2020/10/14 06:02