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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

2回答

2254閲覧

正方形のdivの中に9つのdivを作る

super

総合スコア33

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

1クリップ

投稿2017/08/13 03:56

ご覧いただきありがとうございます。

下のサンプルのよう、正方形のdivの中に9つのdivを作りたいのですが、なかなか揃えません。
・欲しいデザイン
イメージ説明

・要件
サンプルイメージの1,3,7,9は5emで、5は15emのサイズにしたいと思います。
内部のdivの文字の位置は以下の揃えたいです。
.inner-div1 -> vertical-align: bottom; text-align: right;
.inner-div3 -> vertical-align: bottom; text-align: left;
.inner-div5 -> vertical-align: middle; text-align: center;
.inner-div7 -> vertical-align: top; text-align: right;
.inner-div9 -> vertical-align: top; text-align: left;
.inner-div2, .inner-div4, .inner-div6, .inner-div8は非表示したいです。

・問題点
下のサンプルコードをご覧いただくとご存知ですが、デザインが崩れます。
(センターのフォントのサイズが大きいのが崩れの原因だと思いますが、外側のdivがpixel固定ではなくレスポンシブされるので外側divのサイズが変わったりします。最初のフォントサイズか外側divサイズを指定しないとできなかったりするのでしょうか?デザイン初心者ですので、構造的に問題点がありましたら教えてください。)

サンプルコードは以下のリンクにあります。
リンク内容
→Updateボタンでページ更新されるので、ちょっとしたヒントでも頂いたら助かります。

どうか、よろしくお願いいたします。

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

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

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

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

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

kei344

2017/08/13 04:32

ご自身で試されたコードをリンク先だけでなく質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
guest

回答2

0

ベストアンサー

こんな感じ?

HTML

1<div id="box"> 2 <div><p>1</p></div> 3 <div><p>2</p></div> 4 <div><p>3</p></div> 5 <div><p>4</p></div> 6 <div><p>5</p></div> 7</div>

CSS

1#box { 2 display:flex; 3 flex-flow:row wrap; 4 background-color:#eee; 5 width:25em; 6 height:25em; 7} 8#box div { 9 position:relative; 10 width:5em; 11 height:5em; 12 background-color:#fff; 13} 14#box div:nth-child(1),#box div:nth-child(4) { 15 margin-right:15em; 16} 17#box div:nth-child(1) p { 18 position:absolute; 19 right:0; 20 bottom:0; 21} 22#box div:nth-child(2) p { 23 position:absolute; 24 left:0; 25 bottom:0; 26} 27#box div:nth-child(3) { 28 margin:0 auto; 29 width:15em; 30 height:15em; 31} 32#box div:nth-child(3) p { 33 position:absolute; 34 left:50%; 35 top:50%; 36 transform:translate(-50%,-50%); 37} 38#box div:nth-child(4) p { 39 position:absolute; 40 right:0; 41 top:0; 42} 43#box div:nth-child(5) p { 44 position:absolute; 45 left:0; 46 top:0; 47}

投稿2017/08/13 07:05

LibertyBell3

総合スコア1084

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

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

super

2017/08/13 10:47

ご回答ありがとうございます。 教えて頂いたコードを参考に欲しい形になりました。
guest

0

CSSにて「divの箱」に規則性を持たせる方法はいくつかありますが、この場合だと「table」はダメなのでしょうか?

また、divの外側の箱と中の箱のサイズがあってないと思います。個々の必要な横幅や高さ、全体に必要な幅や高さを確認しないと、サンプルの様にズレてはみ出すのは仕方が無いと思います。

投稿2017/08/13 04:29

yoshinavi

総合スコア3521

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

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

yoshinavi

2017/08/13 09:24

質問でスミマセンが、 ①ひょっとして「9つのdiv」と言うのは、薄いグレーの罫線の範囲でなく、黒の罫線で区切られた範囲の事でしょうか? ②元画はエクセルだと思いますが、エクセルでいう「行・列」に当てはまる「50・100・150~500」の部分は要らないのでしょうか? ③(元画はエクセルだと思いますが、エクセルでいう)現在の空白セルには数値は入らないのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問