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

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

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

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

CSS

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

Q&A

解決済

5回答

1989閲覧

width50%で4つの塊を2×2にしたい

morin

総合スコア57

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/09/05 07:51

html css初心者のものです。

質問の通り、パソコンのサイズに画面を広げても、四つの色の塊が2×2の配置になるようにしたいです。

.color{
width: 50%;
}

これで、二つの色で、合計100%になって、2×2になると思ったんですけど、うまくいきませんでした。
box-sizing: border-boxを指定してるので、paddingは関係ないと思いますし、なぜできないのか理由を教えていただけたらありがたいです。

html

1<html> 2<head> 3 <meta charset="utf-8"> 4 <title>lesson_php</title> 5 <link rel="stylesheet" href="stylesheet.css"> 6<head> 7<body> 8 <header> 9 <div class="container"> 10 <h1>画像のレイアウトの練習ページ</h1> 11 </div> 12 </header> 13 14 <div class="top-wrapper"> 15 <div class="container"> 16 <div class="colors"> 17 <div class="color"> 18 <div class="color-red ">aka</div> 19 </div> 20 <div class="color"> 21 <div class="color-black ">black</div> 22 </div> 23 <div class="color"> 24 <div class="color-green">green</div> 25 </div> 26 <div class="color"> 27 <div class="color-yellow">yellow</div> 28 </div> 29 </div> 30 </div> 31 </div> 32 33 34</body> 35</html> 36

css

1body { 2 margin: 0; 3} 4* { 5 box-sizing: border-box; 6} 7.container { 8 margin: 0 auto; 9 width: 100%; 10 background-color: gold; 11 padding: 0 14px; 12} 13 14.top-wrapper { 15 padding: 100px 40px; 16} 17.colors { 18 color:white; 19 background-color: gray; 20 padding: 20px; 21 text-align: center; 22 23} 24.color { 25 display: inline-block; 26 27} 28.color-red { 29 background-color: red; 30 width: 250px; 31 height: 250px; 32} 33 34.color-green { 35 background-color: green; 36 width: 250px; 37 height: 250px; 38} 39 40.color-yellow { 41 background-color: yellow; 42 width: 250px; 43 height: 250px; 44} 45 46.color-black { 47 background-color: black; 48 width: 250px; 49 height: 250px; 50} 51

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

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

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

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

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

Lhankor_Mhy

2019/09/05 07:58

あ、ウィンドウサイズの問題なんですね。わかりました。
guest

回答5

0

インラインブロックを50%で横並びにするなら、HTMLから改行及び空白を削除してください。

【よこ並びのCSS。インライン・ブロックでよこ並び】
https://lopan.jp/inlineblock-layout/


レイアウトはGrid かFlexbox で処理するのがお勧めです。

【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

【これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
https://ics.media/entry/15921/

投稿2019/09/05 08:03

編集2019/09/05 08:04
kei344

総合スコア69364

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

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

morin

2019/09/05 08:15

丁寧な回答ありがとうございました!
kei344

2019/09/05 08:18

レスポンシブデザインとか考えれば「widthを固定」は悪手ですよー。
guest

0

li要素の間の改行が空白として表示されるのが原因です。

html

1 </div><div class="color">

のように.color間の改行をなくしてしまうのが直接的な解決方法ですが、他にもいくつか方法があります。

inline-blockの隙間をなくす方法 - Qiita
Fighting the Space Between Inline Block Elements | CSS-Tricks

投稿2019/09/05 08:23

Lhankor_Mhy

総合スコア35860

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

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

0

ベストアンサー

.color{

width: 50%;
}

そういったCSSになっていないと思いますが?
各.colorは個別に250pxがしていされてて
.colorsがpaddingをもっているので
.containerのwidthをwidth: 600px;とかにすれば
2*2の表示になると思います

投稿2019/09/05 08:04

yambejp

総合スコア114572

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

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

morin

2019/09/05 08:15

できました! 動かないようにwidthを固定すればよかったんですね! ありがとうございました!
guest

0

.color { display: inline-block; }

inline-blockで横並びにされていますが、inline-blockで横並びにすると、謎の半角スペースが勝手に挿入されてカラム落ちしてしまいます。
inline-blockはレイアウトに向いていないので、flexでのレイアウトをオススメします。

.colors { color:white; background-color: gray; padding: 20px; text-align: center; display: flex; flex-flow: row wrap; } .color { flex: 1 1 50%; }

投稿2019/09/05 08:10

uemaSR

総合スコア257

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

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

morin

2019/09/05 08:15

flexを学ぶ価値がありそうですね!ちょうどprogateにflexが出てきたのでやってみます!
guest

0

inline-blockの要素の間には文字間のスペースが取られるので
ちょうど合計100%とかにしても収まってくれません

flexでやるか、昔ながらのfloat:leftでやるか

css

1.colors{display:flex;} 2.color{flex:1 1 50%;}

girdはIE対応がめんどくさい・・・
はやく死なないかなIE

投稿2019/09/05 08:00

編集2019/09/05 08:02
KazuhiroHatano

総合スコア7802

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問