画像が内側に入り込んでしまいます。

CSSの練習でiSaraを模写しています。

早速質問です、CSSにbox-sizing: border-box;を記述しても、ブラウザの画面を縮小すれば、画像が内側に入り込んでしまいます。

HTMLには<meta name="viewport" content="width=device-width, initial-scale=1.0">
を一応､記述しています。（これが必要であるかはよく分かりません。）

OSは macOS
ブラウザはChromeです。
エディタはVisual Studio codeを使用しています。

new1ro

2020/04/09 13:45 編集

> CSSにbox-sizing: border-box;を記述しても、どのタグに、どのようなHTMLとCSSのソースコードを書いている状態でしょうか? <div> <img> </div> ----- div { box-sizing: border-box; border: 10px solid #000; padding: 10px; } ↑上記のような形ですか? おそらく違うと思いますが.. 質問を編集して、ソースコードを貼り付けると、回答を得やすくなると思います。 > ブラウザの画面を縮小すれば、画像が内側に入り込んでしまいます。「画像が内側に入り込む」というのが何を指しているのかがわかりませんでした。 borderやpaddingの影響を受けて<img>タグのが小さくなってしまうということですか? キャプチャなどがあると、このあたりの説明は楽になると思います。

退会済みユーザー

2020/04/09 21:23

遅れてすみません。以下の通りです。 HTML <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <;head> CSS @charset "utf-8"; * { box-sizing:border-box; }

new1ro

2020/04/09 22:30

ありがとうございます！ <;head> を </head> に修正してください。あと、<head>だけだと何も表示できないので、画像を表示したいのであれば<img>を使うか、 <div>の背景にbackground-imageで背景画像を指定してください。

退会済みユーザー

2020/04/09 23:15

</head> に修正してください。修正しました。あと、表示した画像は以下の通りです。 HTML <p class="headerContact">お問い合わせ　/　資料請求はこちら</p> CSS .headerContact { display: inline-block; font-size: 14px; font-weight: normal; float:right; background-color: #da6b64; color: White; padding :11px 40px; border-radius: 25px; position: relative; top: -5px; left:-350px; cursor:pointer; この画像が内側に食い込んでしまうのです。

new1ro

2020/04/09 23:40 編集

> <p class="headerContact">お問い合わせ　/　資料請求はこちら</p> 認識合わせとして、まず上記は画像ではないです。 [1] 「画像」が何を指しているか、やはり理解できていないです。「画像」は以下のうちどれですか? A. <img>タグ B. <p class="headerContact">に「background-image: url(./img/xxxx.jpg);」などを指定している C. 背景色「background-color: #da6b64;」のこと D. 「お問い合わせ　/　資料請求はこちら」ボタンのこと E. そのほか [2] 「内側」が何を指しているかが、理解できていないです。 A. ブラウザ全体でボタンの位置が想定より左側に寄ってしまっているなど、画面全体の「内側」という意味 B. ボタンのサイズが小さくなってしまっているなど、ボタンの背景色ピンクのエリアの「内側」という意味

退会済みユーザー

2020/04/10 00:30

ああ、画像が分かっていないのですね。了解。［1]　C,Dによる合成です。　いわゆる、ボタンです。 [2]　A

dit.

2020/04/10 01:13

「画像」といわれるとjpgやpng、svgなどを思い浮かべる方が多いと思います。ボタンと言い換えた方がわかりやすいですね。（<button>タグではないのでボタンと表現するのを嫌がる方もいるかもしれませんが、CSSボタンで通じる場合も多いです） left:-350px;あたりが原因だと思うので、配置に関する部分をもう一度見直してみてください。

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

回答1件

ベストアンサー

こちら、参考になりますか?
画像(img)にbox-sizing:border-boxでサイズ100%+ボーダーでもコンテンツからはみ出さない

追記

コメント内の以下のやりとりから、

ああ、画像が分かっていないのですね。了解。
［1]　C,Dによる合成です。　いわゆる、ボタンです。
[2]　A

「画像が内側に入り込んでしまいます。」

というのは、

画面上部の右側に配置された「お問い合わせ　/　資料請求はこちら」ボタンが、
ブラウザ内で、画面の内側 (左方向) にズレて表示されてしまっているということだと理解しました。

↓↓↓
こちらのように実装してみました

left: -350px;といった指定の仕方をすると画面幅によってズレるので使わず、
例えば以下のような形だと実装できると思います。

HTML
1<header>
2    <div class="container">
3        <div class="left-area">
4            <a href="/"><img src="logo.png" alt="ロゴなど"></a>
5        </div>
6        <div class="right-area">
7            <a class="headerContact">お問い合わせ / 資料請求はこちら</a>
8        </div>
9    </div>
10</header>

CSS
1header {
2    height: 75px; /* ヘッダーの高さ。調整してください。 */
3}
4.container {
5    width: calc(100% - 15px - 15px); /* 15pxは左右の余白。調整してください。 */
6    max-width: 1200px; /* コンテンツエリアの最大幅。左右の余白が均等になります。 */
7    height: 100%;
8    margin: 0 auto;
9    position: relative;
10
11    display: flex; /* 子要素を横並びにする */
12    align-items: center; /* 子要素を上下中央揃えにする */
13}
14
15.left-area {
16
17}
18.right-area {
19    margin-left: auto; /* ヘッダー内で右側に寄せる */
20}
21
22.headerContact {
23    display: inline-block;
24    font-size: 14px;
25    font-weight: normal;
26    /* float:right; */
27    background-color: #da6b64;
28    color: White;
29    padding :11px 40px;
30    border-radius: 25px;
31    /*
32    position: relative;
33    top: -5px;
34    left:-350px;
35    */
36    cursor:pointer;
37}