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

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

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

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

Q&A

解決済

1回答

1045閲覧

flex-boxのレスポンシブでの表示

cherry8866

総合スコア15

CSS3

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

0グッド

0クリップ

投稿2020/07/07 04:30

編集2020/07/07 04:45

flex-boxを使って、スマホで表示したときに
円で囲ったテキスト要素を縦に表示させたいのですが
上手く表示されません。
ご教示下さい
参考サイト: https://parashuto.com/rriver/development/responsive-layout-with-css-grid-and-flexbox#flexbox-responsive-layout

html

1<nav class="intro-section__nav"> 2 <div class="inr"> 3 <ol> 4 <li><a href="#content1">1.テキストテキストテキスト</a></li> 5 <li><a href="#content2">2.テキストテキストテキスト</a></li> 6 <li><a href="#content3">3.テキストテキストテキスト</a></li> 7 </ol> 8 </div> 9 </nav>

css

1.inr { 2 width: 960px; 3 margin: 0 auto; 4} 5.intro-section__nav{ 6 padding: 88px 0 80px; 7} 8.intro-section__nav ol{ 9 display: flex; 10 justify-content: space-between; 11 width: 810px; 12 margin: 0 auto; 13 flex-wrap: wrap; 14} 15.intro-section__nav ol li { 16 position: relative; 17 background: #ddd; 18} 19.intro-section__nav ol > * { 20 flex: 0 0 230px; 21 margin: 10px; 22} 23/* ナビゲーション内の矢印 */ 24.intro-section__nav ol li:after { 25 position: absolute; 26 bottom: 20px; 27 left: 50%; 28 width: 20px; 29 height: 20px; 30 border-right: 2px solid black; 31 border-bottom: 2px solid black; 32 transform: translateX(-50%) rotate(45deg); 33 content: ""; 34} 35.intro-section__nav ol li a { 36 display: flex; 37 align-items: center; 38 justify-content: center; 39 box-sizing: border-box; 40 width: 230px; 41 height: 230px; 42 padding: 0 25px; 43 color: #000; 44 font-size: 25px; 45 line-height: 1.2; 46 border: 2px solid #000; 47 border-radius: 50%; 48}

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

html

1<nav class="intro-section__nav"> 2 <div class="inr"> 3 <ol> 4 <li><a href="#content1">1.テキストテキストテキスト</a></li> 5 <li><a href="#content2">2.テキストテキストテキスト</a></li> 6 <li><a href="#content3">3.テキストテキストテキスト</a></li> 7 </ol> 8 </div> 9</nav> 10

css

1.intro-section__nav ol{ 2 position: relative; 3 width: 100%; 4 display: flex; 5 flex-wrap:wrap; 6 justify-content: space-around; 7 align-items: center; 8} 9.intro-section__nav ol li{ 10 position: relative; 11 display: block; 12 width: calc(100% - 2rem); 13 max-width: 300px; //任意のサイズ 14} 15

.intro-section__navのwidthに合わせてliの任意のサイズを調節してください。
のパソコン画面での.intro-section__navのwidthが1000pxなら、liは300pxくらいがちょうど良いと思います。
liのwidthをぎゅうぎゅうにしないで少し小さめにすれば、justify-content: space-around;でliとliの間にちょうどよくmarginを作ってくれます。

投稿2020/07/07 04:48

Rihael4

総合スコア18

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

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

Rihael4

2020/07/07 05:04

.inr { width: 960px;} なのですね。そしたらliのmax-widthは 260px~300pxの間が良いと思います。しかしこれだとiPadでは横2つ並びます...。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問