前提・実現したいこと
HTML/CSSでfloatを使ってレイアウトを組んでいます。
作成したカラーボックスを隙間なく並べたいです。
発生している問題・エラーメッセージ
クラスbox-righttop-right(画像#ff9e6b)がうまくbox-righttop-left(画像#dbd400,#0093b7)横に回りこんでくれません。
該当のソースコード
<body>
<div class="wrapper">
<header>
<div class="box-top">
<p>#141f40</p>
</div>
</header>
<main>
<div class="clearfix">
<div class="box-left">
<p>#80bfa8</p>
</div>
<div class="box-right">
<div class="clearfix">
<div class="box-righttop">
<div class="box-righttop-left">
<div class="box-righttop-left-yellow">
<p>#dbd400</p>
</div>
<div class="box-righttop-left-blue">
<p>#0093b7</p>
</div>
</div>
<div class="box-righttop-right">
<p>#ff9e6b</p>
</div>
</div>
</div>
<div class="box-rightbottom">
<p>#8c2727</p>
</div>
</div>
</div>
</main>
<footer>
<div class="box-bottom">
<p>#d98d30</p>
</div>
</footer>
</div>
</body>.wrapper{
width: 400px;
margin: auto;
}
.box-top{
width: 400px;
height: 100px;
background-color: #141f40;
}
.box-left{
width: 150px;
height: 250px;
background-color: #80bfa8;
float: left;
}
.box-right{
width: 250px;
height: 250px;
float: right;
}
.box-righttop-left{
width: 250px;
height: 150px;
float: left;
}
.box-righttop-left-yellow{
width: 150px;
height: 50px;
background-color: #dbd400;
float: left;
}
.box-righttop-left-blue{
width: 150px;
height: 100px;
background-color: #0093b7;
float: left;
}
.box-righttop-right{
width: 100px;
height: 150px;
background-color: #ff9e6b;
float: right;
}
.box-rightbottom{
width: 250px;
height: 100px;
background-color: #8c2727;
}
.box-bottom{
width: 400px;
height: 100px;
background-color: #d98d30;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
p{
color: #fff;
font-size: 3px;
padding: 3px;
}試したこと
- wrapperのwidthを超えないよう数値調整
- clearfixの分割
- overflow: hidden;
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+5
.wrapper{
width: 400px;
margin: auto;
}
.box-top{
width: 400px;
height: 100px;
background-color: #141f40;
}
.box-left{
width: 150px;
height: 250px;
background-color: #80bfa8;
float: left;
}
.box-right{
width: 250px;
height: 250px;
float: right;
}
.box-righttop-left{
width: 100px; /*サイズ変更*/
height: 150px;
float: left;
}
.box-righttop-left-yellow{
width: 150px;
height: 50px;
background-color: #dbd400;
float: left;
}
.box-righttop-left-blue{
width: 150px;
height: 100px;
background-color: #0093b7;
float: left;
}
.box-righttop-right{
width: 100px;
height: 150px;
background-color: #ff9e6b;
float: right;
}
.box-rightbottom{
width: 250px;
height: 100px;
background-color: #8c2727;
}
.box-bottom{
width: 400px;
height: 100px;
background-color: #d98d30;
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
p{
color: #fff;
font-size: 3px;
padding: 3px;
margin:0px; /*隙間削除*/
}Divタグが250pxで横幅いっぱい使っているせいで、
次のDivタグが物理的に入らない状態になっているだけでしたよ。
グーグルのディベロッパーツール（F12を押すとでてくるやつ）を使うと状態の確認が簡単なのでおすすめです
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+3
そういう時は何が邪魔をしているかブラウザ開発ツールで確認しましょう。
気になったのは2箇所。
1個目：
.box-righttop-leftの横幅が長い。
端っこまで突き抜けてますよね。
2個目：
pのmargin
分かりづらいかもしれませんが、特に上ははみ出てます。
pはブロック要素であるため、ちょっとだけpaddingとmarginをデフォルトで持ってます。
個別にmarginを0にしても良いですが、
ブラウザ依存にもよるところにもなるので、リセットCSSを導入したうえで調整した方が良いかもしれません。
適当に調整した結果：
※調整したのは.box-righttop-leftのwidth,pのmarginだけです。
蛇足：
flexBox使えばもっとスッキリ書けるかもしれませんね・・・。私は使いこなせてませんが。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+2
.box-righttop-left{
width: 250px;
height: 150px;
float: left;
}
これは、width: 150px;の間違いではないですか？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
m.ts10806
2019/02/21 13:34
「初心者」というのは質問者さんの状態であって質問そのものの要件ではありませんので質問に「初心者アイコン」をつけるにとどめてください(質問は編集できます)
kurasshi
2019/02/21 13:37
ご指摘ありがとうございます。
初心者アイコンをつけ、内容を変更させていただきました。