Q&A
今ご自身が書かれているコードを記載してください。
前提・実現したいこと
HTMLとCSSでのサイト制作で
ページの両端に空白スペースを作って
見た目のバランスを整えたいのですが
どのようにコードを書けば実現できますでしょうか。
ご教示のほど、よろしくお願いします。
試したこと
paddingやmarginでの調整を試したのですが
いまいち、やり方があっているか不安を抱えています。
参考画像
※赤枠で囲った部分を再現したいです。
> paddingやmarginでの調整を試したのですが
> いまいち、やり方があっているか不安を抱えています。
確認するためにそのコードを掲載してください。
ご確認ありがとうございます。
修正途中のため、一部削除してしまっているのですが
下記に載せます。
■HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel ="stylesheet" href ="style.css" type ="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<title>タイトル</title>
<script src="https://kit.fontawesome.com/4d24fcb10e.js" crossorigin="anonymous"></script>
</head>
<body>
<!-ヘッダー->
<div class="header">
<div class="header-logo">
<img src="logo.png">
</div>
<div class="header-list">
<ul>
<li><a href="#">見出し1</a></li>
<li><a href="#">見出し2</a></li>
<li><a href="#">見出し3</a></li>
</ul>
</div>
</div>
<!-トップ->
<div class="top">
<img src="mv.png">
<P>キャッチコピーがはいります</P>
</div>
<!-タイトルが入ります->
<div class="title">
<h2>タイトルが入ります</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。
<br>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<!-見出し1->
<div class="wrapper-1">
<div class="section-1">
<h2>見出し1</h2>
</div>
<div class="menu-list">
<div class="menu">
<img class="food" src="01.png">
<h3>タイトルが入ります</h3>
<p>テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
</div>
<div class="menu">
<img class="food" src="02.png">
<h3>タイトルが入ります</h3>
<p>テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
</div>
<div class="menu">
<img class="food" src="03.png">
<h3>タイトルが入ります</h3>
<p>テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
</div>
</div>
</div>
<!-見出し2->
<div class="wrapper-2">
<h2>見出し2</h2>
<div class="section-2">
<div class="shop">
<div>
<img src="04.png" alt="04">
</div>
<div>
<h3>タイトルが入ります</h3>
<p>なんとかなんとか</p>
<a href ="#" class = btn btn-outline-Success>詳細</a>
</div>
</div>
<div class="shop">
<div>
<img src="05.png" alt="05">
</div>
<div>
<h3>タイトルが入ります</h3>
<p>なんとかなんとか</p>
<a href ="#" class = btn>詳細</a>
</div>
</div>
</div>
</div>
<!-見出し3->
<div class="wrapper-3">
<div class="section-3">
<h2>見出し3</h2>
</div>
<div class="news">
<p>タイトルが入ります。タイトルが入ります。</p>
<p>タイトルが入ります。タイトルが入ります。</p>
<p>タイトルが入ります。タイトルが入ります。</p>
<p>タイトルが入ります。タイトルが入ります。</p>
</div>
<div class="btn-more">
<a href="#">MORE</a>
</div>
</div>
<!-アクセス->
<div class="wrapper-4">
<div class="access">
<img src="logo.png">
<p>
〒000-0000<br>
東京都××区××●丁目●番●号<br>
TEL : 03-0000-0000 (代表)<br>
FAX : 00-0000-0000
</p>
<img class="sns" src="facebook.png">
<img class="sns" src="twitter.png">
<img class="sns" src="instagram.png">
<img class="sns" src="line.png">
</div>
<div class="map">
<img src="map.png">
</div>
</div>
<footer>
<div class="wrapper">
<p><small>©KURIcafe Co., Ltd.</small></p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
■CSS
.header{
height:100px;
}
.header-logo{
float:left;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
}
.mv.png{
background-size: cover;
}
.header-list{
float:right;
padding-top: 30px;
padding-bottom: 30px;
font-size: 20px;
}
.header-list li{
float:left;
padding-right: 40px;
list-style: none;
}
.top{
position: relative
}
.top p{
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
top: 45%;
left: 10%;
font-size: 30px;
}
.title{
margin-top: 50px;
margin-bottom:50px;
}
.title h2{
text-align: center;
margin-top: 50px;
padding-bottom: 30px;
}
.title p{
text-align: center;
padding-bottom: 30px;
}
.wrapper-1{
background-color: #FEF5EF;
padding-top: 50px;
padding-bottom:50px;
}
.section-1{
text-align: center;
}
.menu-list{
display: flex;
}
.menu{
margin: 0 auto;
}
h2{
text-align:center;
}
.section-2,.shop{
display:flex;
flex-wrap:wrap;
}
.wrapper-2,.shop:nth-child(2n){
flex-direction:row-reverse;
}
.section-2,.shop{
width:100%;
}
.shop > div{
width:50%;
}
.wrapper-3{
background-color: #FEF5EF;
}
.section-3{
text-align: center;
}
.news{
text-align: center;
}
.btn-more{
text-align: center;
font-size: 30px;
}
.wrapper-4{
display:flex;
}
質問は編集できますので
回答1件
0
ベストアンサー
bodyにwidthを設定して、marginの左右の指定をautoにしてやると余白が均等になりますけど…って
bootstrap入れてるっぽいけどそっちの質問じゃなくていいのだろうか。
CSS
1body { 2 width: 1000px; 3 margin: 0 auto; 4}
以下蛇足です。
bootstrap使うつもりであればご提示のコードですと、
bodyにcontainerというクラス名を付けると左右余白の中央寄せになりますよ。
bootstrapはバージョンにより細かい点が異なってくるのでご注意ください。
ご利用されているのは古いバージョンのようですが、模写でしょうか。
投稿2021/03/06 09:21
編集2021/03/06 09:22
退会済みユーザー
総合スコア0
ご丁寧な回答ありがとうございます！
ご教示いただいた、CSSとbootstrapの情報のおかげで
なんとか再現することができました。
>ご利用されているのは古いバージョンのようですが、模写でしょうか。
こちら、模写です。
いえいえ、上手くいったようで何よりです。
もしお仕事にされるようでしたら、bootstrapの4系列を使われた方が良いかもしれません。
バージョンが古いモノを組み込むと移行するときに手間が掛かるので。
もうbootstrapの5というやつが先行で出てるんですけど、
こちらはまだ不安定ということで4系列が主に使われているようです。
ご参考まで。
そうなんですね！
実は丁度、1ヶ月ほど前からコーディングに興味をもち
右も左もわからない状態だったので、とても有益なアドバイスを
いただけて感謝です！
ありがとうございました。
あなたの回答
tips
プレビュー
