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

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

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

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

CSS

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

Q&A

解決済

1回答

2982閲覧

flexプロパティ使用時の真円の作り方

Reem

総合スコア27

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/23 06:03

編集2019/07/23 09:06

実現したいこと

flexプロパティ使用時にp要素と横並びのdiv要素(正方形)を作り、真円を作りたいです。

発生している問題

下記のコードを実行すると写真左の様になりますが、ウィンドウサイズを小さくすると写真右の様に円が潰れてしまいます。
下記をコード実行したキャプチャ

最終形のイメージとしては円は変形せず、文章のみ変形させたいです。
(画像編集ソフトで加工した物なので実際にこうなるかは分かりません)
イメージ説明

ご存知の方がいらっしゃいましたら宜しくお願い致します。

補足

最新のGoogle Chromeを使用しています。

html

1<ul> 2 <li> 3 <div></div> 4 <p>このテキストは見本です。このテキストは見本です。</p> 5 </li> 6 <li> 7 <div></div> 8 <p>このテキストは見本です。このテキストは見本です。</p> 9 </li> 10</ul>

css

1ul { 2 list-style: none; 3} 4 5li { 6 display: flex; 7} 8 9div { 10 height: 300px; 11 width: 300px; 12 background-color: #f00; 13 border-radius: 50%; 14}

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

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

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

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

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

m.ts10806

2019/07/23 06:09

現在のコードの表示を画面キャプチャとって質問本文にご提示ください
youhey5488

2019/07/23 06:11

正直、最終形がどうなって欲しいのかよくわからないのでキャプチャで教えてください
yambejp

2019/07/23 06:11

結果としてどういう配置の表示を希望するのか 手書きでいいので図示してください
m.ts10806

2019/07/23 06:33

いきなり >display: flex;を外すと<div>要素は潰れなくなるので と出てきているので困惑させてしまっていると思います。 「こういう風にすると潰れてしまう」と再現手順を記載してください(私が勝手に確認した手順はありますが、やはり質問者さんの手元で確認した手順を提示すべきと思います)
Reem

2019/07/23 08:17

分かりづい質問をしてしまい、すみませんでした。 まだ不明確な点があればご指摘お願いします。
guest

回答1

0

ベストアンサー

ちょっと何が疑問なのかわからないですが、想定どおりに表示されると思います

css

1<style> 2ul {list-style: none;} 3li:nth-child(1){background-Color:yellow} 4li:nth-child(2){background-Color:lime} 5li{display: flex;} 6div { 7 height: 50px; 8 width: 50px; 9 background-color: #f00; 10 border-radius: 50px; 11} 12</style> 13<ul> 14<li> 15<div></div> 16<p>このテキストは見本です。</p> 17</li> 18<li> 19<div></div> 20<p>このテキストは見本です。</p> 21</li> 22</ul>

追記

追記分windowの幅が狭くても丸くしたいなら

CSS

1div { 2 height: 300px; 3 min-width: 300px; 4 background-color: #f00; 5 border-radius: 300px; 6}

投稿2019/07/23 06:33

編集2019/07/23 08:20
yambejp

総合スコア114572

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

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

Reem

2019/07/23 08:21

ご回答ありがとうございます。 説明が不十分で私がイメージしていた物が伝わっていなかった様なので、質問内容を修正致しました。 よろしければ、またご回答お願いします。
yambejp

2019/07/23 08:22

追記してあります
Reem

2019/07/23 08:31

min-widthで最小サイズを指定すれば想像通りの状態になりました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問