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

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

ただいまの
回答率

90.49%

  • HTML

    9230questions

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

  • CSS

    5966questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 441

Tazusa

score 32

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に足してみる

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+5

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 10:53 編集

    あ、そんな前からプレフィックス不要でしたか、無条件でつけておいてました。笑
    2015年というと、自分知った時から不要だったみたいですね…。

    > またborder-boxを指定することにより、意図していないheightになっている可能性もある
    確かにこれはあるので、border-boxとcontent-box;を使い分ける必要はありますね。

    キャンセル

  • 2018/05/31 21:49 編集

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

    キャンセル

checkベストアンサー

+4

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

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/31 21:44

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

    キャンセル

  • 2018/05/31 21:52 編集

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

    キャンセル

  • 2018/05/31 21:58 編集

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

    キャンセル

  • 2018/06/01 09:33

    横からですが補足します。

    ①beforeとafterそれぞれの意味
    これらは疑似要素といって、CSSによって要素を追加したみたいになります。
    参考:https://saruwakakun.com/html-css/basic/before-after

    ②beforeの前に*,*となっている理由
    疑似要素はその性質上、かならず<要素::before>といった記述をします。
    今回は全ての要素(*)の疑似要素に対してborder-sizingを指定するということで
    *, *::before, *::afterとしているわけです。

    キャンセル

  • 2018/06/03 01:31

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

    キャンセル

  • 2018/06/04 08:14

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

    キャンセル

  • 2018/06/04 08:26

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

    キャンセル

  • 2018/06/04 13:08

    beforeについてやっと理解できました。ありがとうございます。

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

    キャンセル

  • 2018/06/04 13:50

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

    キャンセル

  • 2018/06/04 14:52

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

    キャンセル

  • 2018/06/04 17:45

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

    キャンセル

  • 2018/06/04 19:33

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

    キャンセル

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9230questions

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

  • CSS

    5966questions

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