bootstrapのリンクを入れるとh2の画像がずれる

bootstrapのリンクをheadに入れると、h2に入れている画像（いろんなダイエットを試しても、リバウンドの繰り返し…など）が右にずれてしまいます。
http://spiritualcompany.net/website/test/index.html

html
1<head>
2  <!-- Bootstrap CSS -->
3<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+）" crossorigin="anonymous">
4<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
5<meta http-equiv="content-style-type" content="text/css" />
6<title>最新ダイエットメソッド</title>
7<meta name="description" content="リバウンドばかりして、何回もダイエットを繰り返しているあなたへ・・・・
8もう、食事制限・無理なダイエットをする必要はありません!
9日々の生活の中であなたの脂肪を自動的に燃やし続け、自然と
10痩せていく体を作り上げる・・・
11そんな夢のようなダイエット方法を知りたくありませんか?" />
12<meta name="keywords" content="ダイエット,自動的に,リバウンド" />
13<meta name="subject" content="最新ダイエット" />
14<meta name="author" content="仁科゜昭和浩" />
15<meta name="rating" content="general" />
16<meta name="robots" content="index,follow" />
17
18<link href="style.css" rel="stylesheet" type="text/css" media="all" />
19

ずれるのが以下のコードの画像です。

	<h2 class="midashi_01"></h2>

css
1.midashi_01 {
2	background-image: url(img/midashi_01.jpg);
3	background-repeat: no-repeat;
4	height: 130px;
5	width: 920px;
6}

bootstrapのリンクは、ホームページからコピーしたものです。
なぜ、headのリンクを入れると、h2が右にずれてしまうのでしょうか？
bootstrapは、5.0.0betaです。

m.ts10806

2021/03/16 11:43

HTML、cssはなるべく全て提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

あぁ、何を言われているのかやっとわかりました！

bootstrapを入れると、

CSS
1*, ::after, ::before {
2    box-sizing: border-box;
3}

「全ての要素は決めたサイズの中に収めなさい」という記述があってですね、
枠線が5pxあるのですが920pxの内側へ、5px+5pxの合わせて10px食い込むんです。

内側の要素を920pxに設定してあるので、910pxだと10px足らなくなって、
結果としてずれる…となります。

追記このCSSを記述してあげれば枠線を枠内に収めずに外側に引いてくれるので、直るかと思います。

CSS
1*, ::after, ::before {
2    box-sizing: initial !important;
3}

以下蛇足です。

職業としてコーディングしている人は、
寸法がぴったりになるようにbox-sizing: border-box;を有効にしています。
デザイナーさんから受け取ったデザインとずれが生じないようにする為です。
ほぼ必ずと言っていいほど「規定サイズの内側に収める」という条件で作業している為、
内側に収まるように記述していく癖と考え方が身についています。
２つ目の質問をいただくまで気づかなかったのはその為です。

投稿2021/03/16 11:31

編集2021/03/16 11:45

退会済みユーザー

総合スコア0

dobashi

2021/03/16 21:23 編集

ありがとうございます! 普通は、box-sizing: border-box;でやるのですね。Bootstrapと今回のように枠さんの幅があるときは、適してないのですね。 box-sizing: initialというのは、初期値であるのが枠線を外側に指定するという命令なのですか? *, ::after, ::beforeというのは、全てとその前後（つまり枠？）に指定するということでしょうか？ちなみにこれをやるとbootstrapをしているcol-md-6で2列に分けているところが1列になっていました。col-md-5にしたら2列になりましたが。これは、rowの幅以外に枠線があるため2列入りきらず1列になったということでしょうか。理解力が少なくすみません。

退会済みユーザー

2021/03/16 23:50

> 普通は、box-sizing: border-box;でやるのですね。Bootstrapと今回のように枠さんの幅があるときは、適してないのですね。お仕事でやる人は初めから枠分を計算して組むので、中に入れるものの幅を910pxとかで設定してます。だから幅の920pxを外してくださいと言ってみたり、内側の使える幅「100%」ならはみ出ませんよとお伝えしておりました。100%とする方が多いかな。自動で幅が変わりますし。 > box-sizing: initialというのは、初期値であるのが枠線を外側に指定するという命令なのですか? box-sizingが要素の大きさはどう決めますか？の意味で、 initialは初期値です。初期設定では枠を内側に含めていません。 > *, ::after, ::beforeというのは、全てとその前後（つまり枠？）に指定するということでしょうか？ *は全ての要素を指します。すべてのタグを対象にするということです。 ::after, ::beforは要素の前後につけるおまけみたいなもので疑似要素と言います。 teratailだと初心者マークのアイコンは疑似要素になっていました。箇条書きリストの頭にアイコンを疑似要素で付けたりすることが多いです。枠も疑似要素で作ることは出来ますが、もうちょっと基礎が固まってからの方が良いかと思います。 > ちなみにこれをやるとbootstrapをしているcol-md-6で2列に分けているところが1列になっていました。col-md-5にしたら2列になりましたが。これは、rowの幅以外に枠線があるため2列入りきらず1列になったということでしょうか。その認識で合っていますよ。そういったところでも影響が出てしまうので、初めからbox-sizing: border-box;で組んでいきます。枠線を内側に含めるので、col-md-6（半分）の幅の中に枠線もコミコミになり、カラム落ちを防げます（要素が意図せず次の行へ落ちてしまうことをカラム落ちと言います、言うはず）

dobashi

2021/03/17 04:21

詳細にご回答ありがとうございます。本当に感謝です。勉強になります。 >初めからbox-sizing: border-box;で組んでいきます。 >枠線を内側に含めるので、col-md-6（半分）の幅の中に枠線もコミコミになり、 >カラム落ちを防げますそうなのですね。920pxと幅を決めてしまっているので、設計を変えたほうがいいのですね。今回は、既にあるHTMLを頂いて自分が追加していたのですが、一から自分で設計する場合には、 box-sizing:border-boxで組んでいきます。widthも固定にするのではなく、%で指定して。本当にアドバイスありがとうございます。

行動規範の内容に同意します