青みどりの全体の背景の上に薄いグレー色のボックスがあり、さらにそのボックスの上に3つボックスを配置するコードを書いているのですが、3つのボックスが均等に中央配置されず困っています。
一見PCのデバイス幅では中央配置に見えますが、デバイス幅を縮小するにつれて中央配置にならず、それが目立ってしまいます。3つのボックスを中央配置するにはどうしたらよいでしょうか?
●HTMLのコード以下
<div class="zentai">
<div class="box">
<div class="box2">
<div class="title3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ
</div>
</div>
<div class="box1"><div class="title2">入力フォーム内に以下の項目を記載して下さい。</div></div>
<div class="box2">
<div class="title5">テキストテキストテキストテキストテキストテキストテキストテキストテ</div>
</div>
<div class="box3">
</div>
</div><!--div box-->
</div>
●CSSのコード
.zentai{
background-color:#299CA4;
}
.box{
position: relative;
max-width: 1106px;
width: 88%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
margin-bottom: 80px;
padding: 10px 30px 16px 30px;
background-color: #f9f9f9;
color: #006666;
z-index: 1;
}
/*ボックス2*/
.box2{
position: relative;
display: inline-block;/*テキストと背景を同じ長さに*/
width: 94%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #d4ebeb;
border-radius: 0 12px 12px 12px;
z-index: 9999;
}
/*3つ目のボックス*/
.box3{
position: relative;
width: 94%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-bottom: 16px;
padding-right: 20px;
padding-left: 20px;
padding-top: 12px;
padding-bottom: 10px;
background-color: #FFFFFF;
border-radius: 12px 12px 12px 12px;
border: 1.5px solid #ddd;
}
/* ボックス3の中にフォーム */
.auto-style15{
letter-spacing: -0.04em;
width: 90%;
max-width: 600px;
}
No.2ベストアンサー
- 回答日時:
hayosato さん
・・・・3つのボックスが均等に中央配置されず困っています。・・・・・・
原因は、width が content-box を規定しているのを忘れているため、その影響を受けている。↓
https://www.tohoho-web.com/css/prop/box-sizing.htm
.box1, .box2, .box3 に box-sizing: border-box; を指定すれば貴方の混乱の問題は解決するはず。
そういうことを含めて、このようなレイアウトは grid を使うことが便利でおすすめ。
参考↓
https://www.tohoho-web.com/css/prop/grid.htm
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<style>
.zentai{
background-color:#299CA4;
}
.box{
position: relative;
max-width: 1106px;
width: 88%;
height: auto;
margin: 100px auto 80px auto;
padding: 10px 30px 16px 30px;
background-color: #f9f9f9;
color: #006666;
z-index: 1;
display:grid; /* grid レイアウトで配置 */
grid: repeat(4,auto) / 94%; /* 4行と、94% の一列を指定 */
justify-content: center; /* 中央配置 */
}
/*ボックス2*/
.box2{
margin-bottom: 30px;
padding: 5px 20px 10px 20px;
background-color: #d4ebeb;
border-radius: 12px;
z-index: 9999;
}
/*ボックス1 追記 */
.box1{
background-color: #dfc;
}
/*3つ目のボックス */
.box3{
margin-bottom: 16px;
padding: 12px 20px 10px 20px;
background-color: #FFFFFF;
border-radius: 12px;
border: 1.5px solid #ddd;
}
/* ボックス3の中にフォーム */
.auto-style15{
letter-spacing: -0.04em;
width: 90%;
max-width: 600px;
}
</style>
<body>
<div class="zentai">
<div class="box">
<div class="box2">
<div class="title3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ</div>
</div>
<div class="box1">
<div class="title2">入力フォーム内に以下の項目を記載して下さい。</div>
</div>
<div class="box2">
<div class="title5">テキストテキストテキストテキストテキストテキストテキストテキストテ</div>
</div>
<div class="box3">3</div>
</div><!--div box-->
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
CSSで謎の現象
HTML・CSS
-
CSS初心者です。わかる方教えてください。
HTML・CSS
-
プログラマーがHTMLとCSSでウェブデザインをするのは大人の幼稚園なんじゃないかと思い込んでる
その他(プログラミング・Web制作)
-
-
4
Excelの使い方(関数)を教えてください。
Excel(エクセル)
-
5
離れた複数のセルのどこかに文字が入った場合に、⚫が表示されるようにしたいです
Visual Basic(VBA)
-
6
エクセルの数式で教えてください。
Excel(エクセル)
-
7
VBA 毎日取得するデータを反映させる方法 の応用
Visual Basic(VBA)
-
8
ExcelのブックAのシート1を、ブックBに関数を残したまま移動させたいです。 普通に移動をしたらブ
Excel(エクセル)
-
9
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
10
テキストエディタvscodeでプログラミングしているのですが、 コメントアウトだけを折りたたむ、非表
その他(プログラミング・Web制作)
-
11
基本情報技術者の擬似言語プログラム このプログラムの答えは(ウ)です。でも配列に格納されてる順番が良
Visual Basic(VBA)
-
12
C言語などをマスターして、人生に何かメリットありますか???
その他(プログラミング・Web制作)
-
13
教えて下さい!VBAで複数Excelを1つのブックにまとめたいです。
Visual Basic(VBA)
-
14
xlsmファイルで、別名ファイルを保存する方法
Visual Basic(VBA)
-
15
入力した文字を全て自動で全角にしてくれるコード
Visual Basic(VBA)
-
16
ヤフー知恵袋みたいなサイトを作成中です。
XML
-
17
Vba ユーザ定義関数について教えてください
Visual Basic(VBA)
-
18
xmlドキュメントから別拡張子で保存したい
Visual Basic(VBA)
-
19
ホリエモン ひろゆきはプログラマーになればお金が儲かると言いますが嘘で? IT土方というのは正しい
その他(プログラミング・Web制作)
-
20
エクセル2016でfilter関数がないので、、抜き出す関数をおしえてください。
Excel(エクセル)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
Firefoxで見るとli要素レイアウ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
Flexslider2のカーセルスライダ...
-
投稿フォームの整列
-
Firefoxでheight:100%がきかない?
-
初心者html・CSS ウィンドウを...
-
画像の位置指定
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
回り込みについて(間隔が空く)
-
FFにおけるDIVタグ間の隙間につ...
-
html初めてです、教えてください!
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報