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

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

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

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

CSS

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

Q&A

解決済

2回答

2565閲覧

HTMLでレスポンシブなピラミッドを作成したい

scoa

総合スコア66

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/23 03:08

いつもお世話になります。

正方形のボックスを積み上げた、ピラミッドを作成しました。
レスポンシブ対応させたいのですが、方法が思いつかず悩んでおります。
(現状、画面幅を狭めると、ピラミッドが崩れる。)

ピラミッドの右側にある「★」ボックスも、
位置を維持したまま、レスポンシブさせたいです。

崩れないようにするには、どのようにすれば良いでしょうか。

また、正方形のサイズを変更すると、
CSSでボックス位置を調整しなければなりません。

もし、位置調整しなくても良い方法があれば、
こちらも併せてご教示頂けますと幸いです。

よろしくお願いいたします。

HTML

1<div class="bottom_wrap cf"> 2 3 <div class="play_block"> 4 5 <ul class="stage_5"> 6 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=15"></li> 7 </ul> 8 <ul class="stage_4"> 9 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=13"></li> 10 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=14"></li> 11 </ul> 12 <ul class="stage_3"> 13 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=10"></li> 14 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=11"></li> 15 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=12"></li> 16 </ul> 17 <ul class="stage_2"> 18 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=6"></li> 19 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=7"></li> 20 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=8"></li> 21 <li><img src="http://placehold.jp/bbbbbb/ffffff/70x70.png?text=9"></li> 22 </ul> 23 24 <ul class="stage_1"> 25 <li><img src="http://placehold.jp/ea7777/ffffff/70x70.png?text=1"></li> 26 <li><img src="http://placehold.jp/6fc0d3/ffffff/70x70.png?text=2"></li> 27 <li><img src="http://placehold.jp/7dc68f/ffffff/70x70.png?text=3"></li> 28 <li><img src="http://placehold.jp/e2bb46/ffffff/70x70.png?text=4"></li> 29 <li><img src="http://placehold.jp/b68cce/ffffff/70x70.png?text=5"></li> 30 </ul> 31 </div> 32 33 <div class="star"> 34 <img src="http://placehold.jp/666666/ffffff/70x70.png?text=★"> 35 </div> 36 37</div>

CSS

1.cf:after { clear: both; content: ''; display: block; } 2 3.bottom_wrap { position:relative; width:100%; max-width:550px; margin:0 auto; } 4.bottom_wrap .play_block { float:left; margin:0 50px 0 0; } 5.bottom_wrap .play_block ul { font-size:0; } 6.bottom_wrap .play_block li { display:inline-block; cursor:pointer; } 7.bottom_wrap .play_block .stage_5 { margin:0 0 0 140px; } 8.bottom_wrap .play_block .stage_4 { margin:0 0 0 105px; } 9.bottom_wrap .play_block .stage_3 { margin:0 0 0 70px; } 10.bottom_wrap .play_block .stage_2 { margin:0 0 0 35px; } 11 12.bottom_wrap .star{ float:left; position:absolute; bottom:0; right:0; cursor:pointer; }

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

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

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

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

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

guest

回答2

0

ベストアンサー

CSS

1/* Add */ 2.bottom_wrap .play_block li { 3 width: 20%; /* ulの幅の20%だから、ulにmarginが有ると上手くいかな無いので後で消す */ 4} 5 6li > img { 7 width: 100%; 8} 9.bottom_wrap .play_block ul { 10 margin: 0 !important; /* 上記コメントの理由からmarginを消しているだけ */ 11 text-align: center; 12} 13/* ↓テスト表示用 */ 14.bottom_wrap .play_block { 15 float: none !important; 16} 17```**動くサンプル:**[https://jsfiddle.net/44bu0p6j/](https://jsfiddle.net/44bu0p6j/)

投稿2017/02/23 10:23

kei344

総合スコア69364

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

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

0

cssのdisplay:flex;を調べると良いと思いますよ。

投稿2017/02/23 04:40

shaak

総合スコア607

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問