Q&A
ご提示のコードを試してみましたが、問題が再現しませんでした。
また、CSSで使われている .service__main が、HTMLには存在しないようでした。
おそらく、ご提示のコードは実際のコードと異なるのではないでしょうか。
問題が再現するコードのご提示をお願いします。
前提・実現したいこと
左側の余白を消したい
発生している問題・エラーメッセージ
widthで横幅を設定すると謎の余白ができる。
### 該当のソースコード ```ここに言語名を入力 HTML,CSS HTML ```ここに言語を入力html コード<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="reconnect" href="https://fonts.gstatic.com"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> <title>NaotoPortfolio</title> </head> <body> <header class="header"> <ul class="header__nav"> <li class="header__nav--item">Concept</li> <li class="header__nav--item">Service</li> <li class="header__nav--item">Work </li> <li class="header__nav--item">About</li> <li class="header__nav--item">Contact</li> </ul> </div> <div class="header__main"> <h1>Portfolio</h1> <h2>Web engineer</h2> </div> </div> </header> <div class="consept"> <h4 class="consept__title">PRINCIPLE</h4> <h4 class="consept__sub-title">方針・コンセプト</h4> </div> <div class="consept__article"> <h5>HTML&CSS・WordPress・JavaScriptなどを使用してWebサイトの設計からコーディングまで対応しているWebエンジニアです。 レスポンシブ対応(スマートフォン)も対応しております。お客様がお持ちの大切な思いを閲覧者様にわかりやすく伝えることお客様の意図を理解しようと努力し、閲覧者様に納得していただけるものを作ることをコンセプトとしており、出会った全てのお客様に幸せになってもらうことを第一にしています。私はいままで、たくさんの人に助けてもらいながら生きてきました。なんの見返りもないのに助けてくれた人も居ました。だからこそ、「人の役に立ちたい」「お客様、利用者様両方を幸せになって頂きたい」<br> <pre> この幸せの連鎖をつなぐため、私はこの仕事をしています。</pre> </h5> <div class="consept__guide"> <h6>Webに関するご相談であれば、お気軽にご連絡ください。</h6> </div> <div class="btn"> <a href="#" class="btn-animation-02"><span>お問い合わせ<span></a> </div> <div class="service"> <div class="service__main"> <h4 class="service__title"></h4> <h4 class="service__sub-title"></h4> <div class="service__inner"> <div class="service__box"> <div class="service__logo"></div> <div class="service__articel"></div> </div> </div> </div> </div> </body> </html>
コード* { margin: 0; padding: 0; } //img img { max-width: 100%; height: auto; } //title section { &__title { display: inline-block; text-align: center; font-size: 50px; font-weight: bold; margin-top: 95px; margin-left: auto; margin-right: auto; font-family: "游ゴシック体", sans-serif; @media screen and(min-width:375px) { margin-top: 48px; font-size: 18px; } } &__sub--title { display: block; text-align: center; font-size: 27px; margin-right: auto; margin-left: auto; margin-top: 155px; font-family: "游ゴシック体", sans-serif; @media screen and(min-width:375px) { margin: 79px; font-size: 12px; } } } //コーディング .header { background: url(../img/moss-5803607_1920.jpg); background-size: cover; height: 890px; &__nav { display: flex; justify-content: flex-end; padding-right: 98px; &--item { padding-top: 50px; color: #FFFFFF; font-size: 16px; margin-right: 30px; font-weight: bold; font-family: "源ノ角ゴシック JP", sans-serif; } } &__main { h1 { font-size: 139px; font-family: "Bradley Hand", sans-serif; color: #FFFFFF; text-align: center; margin-top: 180px; } h2 { font-size: 44px; font-family: "Bradley Hand", sans-serif; color: #FFFFFF; text-align: center; padding-top: 30px; } } } .consept { text-align: center; margin: 0auto; &__title { display: inline-block; text-align: center; font-size: 50px; font-weight: bold; margin-top: 76px; color: #292424; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif; } &__sub-title { display: block; text-align: center; font-size: 25px; margin-top: 10px; font-weight: bold; color: #292424; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif; } &__article { font-size: 24px; line-height: 60px; text-align: left; margin-left: auto; margin-right: auto; color: #292424; width: 1180px; padding-top: 40px; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif; } &__guide { font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif; font-weight: bold; font-size: 35px; text-align: left; color: #292424; text-align: center; margin-right: auto; margin-top: 100px; margin-bottom: 86px; } } .btn { text-align: center; .btn-animation-02 { display: inline-block; width: 227px; text-align: center; background-color: #fff; border: 2px solid #87D3C7; font-size: 21px; color: #fff; text-decoration: none; padding: 10px 24px; border-radius: 4px; position: relative; line-height: 50px; font-family: "Hiragino Maru Gothic ProN"; } .btn-animation-02 span { position: relative; z-index: 1; } .btn-animation-02::before, .btn-animation-02::after { content: ""; display: block; background-color: #87D3C7; width: 50%; height: 100%; position: absolute; top: 0; transition: .2s; } .btn-animation-02::before { left: 0; } .btn-animation-02::after { right: 0; } .btn-animation-02:hover:before, .btn-animation-02:hover:after { width: 0; background-color: #87D3C7; } .btn-animation-02:hover { color: #87D3C7; } } .service { background: #87D3C7; &__main { background-color: #87D3C7; width: 1500px; height: 880px; } }
試したこと
ここに問題に対して試したことを記載してください。
margin:0;
padding:0;
margin:0auto;
padding:0auto;
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
ありがとうございます。もう一度全文を送りますね。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="reconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<title>NaotoPortfolio</title>
</head>
<body>
<header class="header">
<ul class="header__nav">
<li class="header__nav--item">Concept</li>
<li class="header__nav--item">Service</li>
<li class="header__nav--item">Work </li>
<li class="header__nav--item">About</li>
<li class="header__nav--item">Contact</li>
</ul>
</div>
<div class="header__main">
<h1>Portfolio</h1>
<h2>Web engineer</h2>
</div>
</div>
</header>
<div class="consept">
<h4 class="consept__title">PRINCIPLE</h4>
<h4 class="consept__sub-title">方針・コンセプト</h4>
</div>
<div class="consept__article">
<h5>HTML&CSS・WordPress・JavaScriptなどを使用してWebサイトの設計からコーディングまで対応しているWebエンジニアです。
レスポンシブ対応(スマートフォン)も対応しております。お客様がお持ちの大切な思いを閲覧者様にわかりやすく伝えることお客様の意図を理解しようと努力し、閲覧者様に納得していただけるものを作ることをコンセプトとしており、出会った全てのお客様に幸せになってもらうことを第一にしています。私はいままで、たくさんの人に助けてもらいながら生きてきました。なんの見返りもないのに助けてくれた人も居ました。だからこそ、「人の役に立ちたい」「お客様、利用者様両方を幸せになって頂きたい」<br>
<pre> この幸せの連鎖をつなぐため、私はこの仕事をしています。</pre>
</h5>
<div class="consept__guide">
<h6>Webに関するご相談であれば、お気軽にご連絡ください。</h6>
</div>
<div class="btn">
<a href="#" class="btn-animation-02"><span>お問い合わせ<span></a>
</div>
<div class="service">
<div class="service__main">
<h4 class="service__title"></h4>
<h4 class="service__sub-title"></h4>
<div class="service__inner">
<div class="service__box">
<div class="service__logo"></div>
<div class="service__articel"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
//img
img {
max-width: 100%;
height: auto;
}
body {
max-width: 1500px;
}
//title
section {
&__title {
display: inline-block;
text-align: center;
font-size: 50px;
font-weight: bold;
margin-top: 95px;
margin-left: auto;
margin-right: auto;
font-family: "游ゴシック体", sans-serif;
@media screen and(min-width:375px) {
margin-top: 48px;
font-size: 18px;
}
}
&__sub--title {
display: block;
text-align: center;
font-size: 27px;
margin-right: auto;
margin-left: auto;
margin-top: 155px;
font-family: "游ゴシック体", sans-serif;
@media screen and(min-width:375px) {
margin: 79px;
font-size: 12px;
}
}
}
//コーディング
.header {
background: url(../img/moss-5803607_1920.jpg);
background-size: cover;
height: 890px;
&__nav {
display: flex;
justify-content: flex-end;
padding-right: 98px;
&--item {
padding-top: 50px;
color: #FFFFFF;
font-size: 16px;
margin-right: 30px;
font-weight: bold;
font-family: "源ノ角ゴシック JP", sans-serif;
}
}
&__main {
h1 {
font-size: 139px;
font-family: "Bradley Hand", sans-serif;
color: #FFFFFF;
text-align: center;
margin-top: 180px;
}
h2 {
font-size: 44px;
font-family: "Bradley Hand",
sans-serif;
color: #FFFFFF;
text-align: center;
padding-top: 30px;
}
}
}
.consept {
text-align: center;
margin: 0auto;
&__title {
display: inline-block;
text-align: center;
font-size: 50px;
font-weight: bold;
margin-top: 76px;
color: #292424;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", sans-serif;
}
&__sub-title {
display: block;
text-align: center;
font-size: 25px;
margin-top: 10px;
font-weight: bold;
color: #292424;
font-family: "游ゴシック Medium",
"Yu Gothic Medium",
"游ゴシック体",
"YuGothic",
sans-serif;
}
&__article {
font-size: 24px;
line-height: 60px;
text-align: left;
margin-left: auto;
margin-right: auto;
color: #292424;
width: 1180px;
padding-top: 40px;
font-family: "游ゴシック Medium",
"Yu Gothic Medium",
"游ゴシック体",
"YuGothic",
sans-serif;
}
&__guide {
font-family: "游ゴシック Medium",
"Yu Gothic Medium",
"游ゴシック体",
"YuGothic",
sans-serif;
font-weight: bold;
font-size: 35px;
text-align: left;
color: #292424;
text-align: center;
margin-right: auto;
margin-top: 100px;
margin-bottom: 86px;
}
}
.btn {
text-align: center;
.btn-animation-02 {
display: inline-block;
width: 227px;
text-align: center;
background-color: #fff;
border: 2px solid #87D3C7;
font-size: 21px;
color: #fff;
text-decoration: none;
padding: 10px 24px;
border-radius: 4px;
position: relative;
line-height: 50px;
font-family: "Hiragino Maru Gothic ProN";
}
.btn-animation-02 span {
position: relative;
z-index: 1;
}
.btn-animation-02::before,
.btn-animation-02::after {
content: "";
display: block;
background-color: #87D3C7;
width: 50%;
height: 100%;
position: absolute;
top: 0;
transition: .2s;
}
.btn-animation-02::before {
left: 0;
}
.btn-animation-02::after {
right: 0;
}
.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
width: 0;
background-color: #87D3C7;
}
.btn-animation-02:hover {
color: #87D3C7;
}
}
.service {
background: #87D3C7;
&__main {
@media screen and(max-width:1500px) {
width: 100%;
height: 980px;
}
}
}
質問文のHTMLファイルの内容を、「```HTML」と「```」で囲んでいないために、「__」が斜体の指定に使われてしまい、本来の内容とは異なる表示になっています。
やはり問題が再現しませんでした。その要素はセンタリングされていて、両側に余白が出ています。
ご提示いただいていない部分のコードが原因かもしれません。
スタイルシート以前にHTMLファイルの構造がめちゃくちゃなので、「開始タグのないdiv要素の終了タグ」とか、「終了タグのつもりで開始タグを書いているspan要素」とか、ご自分でチェックしてください。
あと、「CSS」と称して提示されている内容はSassのSCSSで書かれており、CSSではありません。
質問の変更拝読。
問題を確認しました。
できれば、後出しはやめてほしいです。
回答1件
0
ベストアンサー
css
1 &__main { 2 background-color: #87D3C7; 3 width: 1500px; 4 height: 880px; 5 position: absolute; // 追加 6 left: 0; // 追加 7 }
投稿2020/12/25 08:33
総合スコア36960
あなたの回答
tips
プレビュー
