質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2979閲覧

htmlをChromeで実行すると右側が切れる

Tazusa

総合スコア41

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/30 16:13

編集2018/05/30 16:14

cssを使用しヘッダーを作り、その中にさらに枠を作ろうとしています。
しかし、Chromeで実行すると、

  1. 枠の右が切れる
  2. 枠が中央によっておらず、上の余白が小さくなっている

という問題があります。
画像の通りです。

![イメージ説明

この白い枠線をすべて表示させ、端からの長さを揃えたいです。
このコードをどう変えたらよいのでしょうか。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>ヘッダー</title> <style> body{ margin:0; padding:0; width:100%; height:100%; } .all{ top:0; left:0; position:fixed; width:100%; height:140px; } .backColor{ background-color:#E6D5BD; box-shadow: 0 0 3px; padding: 10px 20px 10px; height: 140px; width:100%; margin: auto; } .line{ border: 5px solid #fff; height:120px; width:100%; margin: auto; } </style> </head> <body> <div class="all"> <div class="backColor"> <div class="line"> </div> </div> </div> </body> </html>

試したこと

・box-shadowを消してみる
・min-width:960;をall,backColor,lineに足してみる

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

kszk311さんのおっしゃっている通り、box-sizingを指定してあげるのが一番簡単です。

box-sizingにはプレフィックスは不要でしょう。
(2015年には全ブラウザ対応済み)

またborder-boxを指定することにより、意図していないheightになっている可能性もあるので注意してください。

before:
.lineのheight:120pxの外側に5pxのborderが設定される。

after:
.lineのhegith:120pxの内側に5pxのborderが設定される。
(実際の.lineの高さが110pxになる)

投稿2018/05/31 00:13

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/05/31 01:54 編集

あ、そんな前からプレフィックス不要でしたか、無条件でつけておいてました。笑 2015年というと、自分知った時から不要だったみたいですね…。 > またborder-boxを指定することにより、意図していないheightになっている可能性もある 確かにこれはあるので、border-boxとcontent-box;を使い分ける必要はありますね。
Tazusa

2018/05/31 12:49 編集

補足いただきありがとうございます。 自分で勉強していた時にはあまり注意していなかったところだったので 非常に参考になります。
guest

0

ベストアンサー

box-sizing: border-box;を追加しておくのが一番楽だと思います。

css

1*, *:before, *:after { 2 -webkit-box-sizing: border-box; 3 -moz-box-sizing: border-box; 4 -o-box-sizing: border-box; 5 -ms-box-sizing: border-box; 6 box-sizing: border-box; 7} 8

http://phiary.me/css3-box-sizing/

投稿2018/05/30 17:39

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tazusa

2018/05/31 12:44

ありがとうございます。 無事思った通りなレイアウトにできました。 一つ質問なのですが、*, *:before, *:afterは何を意味するのでしょうか。 調べてみたところ*はすべての要素を意味することは分かったのですが、 ①beforeとafterそれぞれの意味、②beforeの前に*,*となっている理由がわかりませんでした。 よろしくお願いします。
Tazusa

2018/05/31 12:52 編集

*, *:before, *:afterでまとめて設定すると、 3つの要素の中にbox-sizing:border-boxを書くより 高さが高くなったのですが、そちらは関係あるのでしょうか。
Tazusa

2018/05/31 13:01 編集

すみません、0531 21:52編集の上のコメントは無視してください。 誤って間違ったコードで実行していました。
macaron_xxx

2018/06/01 00:33

横からですが補足します。 ①beforeとafterそれぞれの意味 これらは疑似要素といって、CSSによって要素を追加したみたいになります。 参考:https://saruwakakun.com/html-css/basic/before-after ②beforeの前に*,*となっている理由 疑似要素はその性質上、かならず<要素::before>といった記述をします。 今回は全ての要素(*)の疑似要素に対してborder-sizingを指定するということで *, *::before, *::afterとしているわけです。
kszk311

2018/06/02 16:31

iamaimiさんありがとうございます。 まぁ簡潔にいうと、「*」ではなく「*, *:before, *:after」にしている理由は、 beforeとafterの疑似要素にもborder-boxにしておくと、コーディング上楽だからと言ったところです。 before、afterはcontent-box、before、after以外はborder-boxだとすると、要素のサイズの指定方法が違うので、統一しておこうぜみたいな感じです。
Tazusa

2018/06/03 23:14

iamaimiさん、kszk311さん、ありがとうございます。 ご紹介いただいた記事を見てもう一度before, afterについて調べましたが、まだわからないことがあります。 *:beforeならばわかるのですが、なぜ*,*とするのでしょうか。 また、html文全体をそのようにする、html{border-sizing:border-box }にしない理由は何なのでしょうか。 初心者なものでわからないことだらけでしてすみません。
kszk311

2018/06/03 23:26

「*:before」とするだけでは「全ての要素&そのbefore疑似要素」ではなく、「全ての要素のbefore疑似要素」という意味しか持ちません。 「全ての要素&全てのbefore擬似要素&全てのafter擬似要素」という記述をするためには、「*, *:before, *:after」とする必要があるのです。 また、「html{border-sizing:border-box }」では、「HTMLタグのみにborder-boxを適用する」のであって、「HTMLの中の要素全体にborder-boxを適用する」という意味ではありません。
Tazusa

2018/06/04 04:08

beforeについてやっと理解できました。ありがとうございます。 たしかにhtmlタグにつけてはそうなってしまいますね。 bodyではどうでしょうか? body{...}内に書けばbody内全てに適用されるのではないかと思うのですが。
kszk311

2018/06/04 04:50

bodyの場合も同じく、「body{ border-sizing:border-box }」では、body要素にしか適用されません。(bodyの中すべての要素というわけではありません)
dit.

2018/06/04 05:52

既に納得をされているかもしれませんが、区切りを変えて考えるとわかりやすいですよ。 「*,*」ではなく、 「*(全ての要素)」「*::before(全ての要素のbefore)」「*::after(全ての要素のafter)」をカンマで区切って羅列しています。
Tazusa

2018/06/04 08:45

やっと完全に理解できました。 kszk311さん、dit.さん、ありがとうございます。 CSSもhtmlもやってみると奥が深くおもしろいですね。これをきっかけにもっとCSSを勉強していきたいと思います。
kszk311

2018/06/04 10:33

理解できて何よりです。 dit.さん、補足ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問