% で左右のpaddingを指定して意図する数値にしたい。

画面幅が1280pxの時、文字の左側に390px、右側に389pxの余白を設定したいのですが、なぜか%を利用して指定すると、以下の画像のように、微妙に数字がちょっとずれてしまって、意図した数字にならず困っています（ちなみにレスポンシブ対応で%を利用しています）。

ちなみに左右の余白は、

css
1.footer .container {
2padding-left: calc( 390/ 1280 * 100%);
3padding-right: calc( 389/ 1280 * 100%);
4}
5

このように指定しています。

また重ねてで大変恐縮なのですが、画面幅を狭めていくと、以下の画像のように、文字の対象領域が変化していき、対象幅が実際の文字よりも狭くなってしまうことも解決したいです。

以下、記述しているコードになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12  <footer class="footer">
13    <div class="container">
14      <p>LOGOLOGo</p>
15    </div>
16  </footer>
17  
18</body>
19</html>

css
1body {
2  margin: 0;
3  padding: 0;
4}
5.footer {
6  background: rgb(42, 1, 117);
7  border: 1px solid #1e0030;
8 }
9  
10 .footer .container {
11  max-width: 501px;
12  margin: 0 auto;
13  padding-top: 76px;
14  padding-bottom: 89px;
15  padding-left: calc( 390/ 1280 * 100%);
16  padding-right: calc( 389/ 1280 * 100%);
17 }
18  
19 .footer .container p {
20  font-size:min(calc( 100 / 1280 * 80vw),80px);
21  color: #FFFFFF;
22  font-family: 'Montserrat', sans-serif;
23  font-weight: bold;
24  letter-spacing: 4px;
25  line-height: 1.2125;
26 }
27
28

お手数おかけしますが、どなたか以上2点の解決方法を教えていただけますと幸いです。
恐れ入りますが、どうぞよろしくお願いしますm m

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

回答1件

ベストアンサー

css
1.footer {
2  background: rgb(42, 1, 117);
3  border: 1px solid #1e0030;
4}

となっていますから、画面幅 1280px の時の .footer のコンテンツボックス辺は 1278px です。
width: autoは、この場合は100%と同じ意味ですから、1278pxになります。
calcを計算してみると、390/1280*1278 = 389.391ですから、これが原因でしょう。

親となる**包含ブロックの幅に対するパーセント値**で定義します。

width - CSS: カスケーディングスタイルシート | MDN

position プロパティが static, relative, sticky のいずれかの場合、包含ブロックはブロックコンテナー (inline-block, block, list-item などの要素) または整形コンテキストを確立する要素 (表コンテナー、フレックスコンテナー、グリッドコンテナー、ブロックコンテナー自身など) である直近の祖先要素のコンテンツボックスの辺によって構成されます。

レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN

文字があふれる件については、大きなものを小さな場所に入れることはできないです。
文字を小さくするか、折り返すか、などの対処が考えられますが、デザインの問題です。

投稿2021/12/22 01:45

編集2021/12/22 02:03

Lhankor_Mhy

総合スコア36960

juke-footwork

2021/12/22 03:37

ご解答いただき、ありがとうございます! 教えていただいたように、コンテンツボックス辺を1278pxとして計算した所、しっかり意図する数値になりました、ありがとうございますm m また文字があふれる件に関しても教えていただきありがとうございます。フォントサイズをvwにすることで、対応出来るのかと思っていたのですが、サイズによっては無理ということが分かりました。また今回「包含ブロック」というものに関しても知ることが出来ました。リンクを貼って頂き、本当にありがとうございますm m 重ねてで大変恐縮なのですが、2つ目に記載して頂いた内容に関して「包含ブロックは直近の祖先要素のコンテンツボックスの辺によって構成されます。」とあるのですが、今回の場合であれば、以下のようにコードを記載しているので、containerの祖先要素はfooter、よってコンテンツボックスの辺は1278pxではなく、1280pxという形になるのでは？と疑問に思ったのですが、理解の仕方が違っていますでしょうか..？？ <footer class="footer"> <div class="container"> <p>LOGOLOGo</p> </div> </footer>

Lhankor_Mhy

2021/12/22 03:59

> containerの祖先要素はfooter はい、ご理解の通りです。 --- > よってコンテンツボックスの辺は1278pxではなく、1280pxという形になるのでは？いいえ、footerのボーダーボックスの辺は 1280px ですが、コンテンツボックスの辺は 1280-1-1 = 1278px です。 https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box

juke-footwork

2021/12/22 04:56

追加でしっかりと説明いただき、本当にありがとうございますm m 説明がわかりやすく的確で、しっかりと理解することが出来ました!! ボーダーボックスとコンテンツボックスそれぞれの違いを教えていただいたおかげですんなり理解できました。本当にありがとうございます、感謝ですm m

Lhankor_Mhy

2021/12/22 05:11

お役に立てたようで何よりです

juke-footwork

2021/12/22 05:24

ありがとうございます!!

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