border-radiusで◯にした要素を3つ並べた状態で縮小したい時どうすればいいですか？

現状は下記のコードになります。
ページを縮小すると◯の要素が

◯◯
◯

さらにページを縮小していくと
◯
◯
◯
と縦並びになってしまいます。

私のしたいことはどこまで縮小しても
◯◯◯
と等倍率で小さくなってほしいです。
ページにある他の要素はviewportを導入することにより、等倍率で縮小可能になりましたが、この◯の配列だけは解決できません。

どうかお力を貸していただけないでしょうか？

html
1  <div class="boxA">
2    <a rel="leanModal" href="#sample">
3      <div class="navigate">
4          <div class="content1 navi-p">
5            <p>文章</p>
6          </div>
7      </div>
8      <div class="navigate">
9          <div class="content2 navi-p">
10            <p>文章</p>
11          </div>
12      </div>
13      <div class="navigate">
14        <div class="content3 navi-p">
15          <p>文章</p>
16        </div>
17      </div>
18    </a>
19    <div id="sample">
20      <p>ここに内容が表示されます！四角の大きさは自由に指定できます。</p>
21    </div>
22  </div>

css
1.boxA:after {
2  content: "";
3  display: block;
4  clear: both;
5}
6
7.navigate {
8  display: block;
9  float: left;
10  /* サイズ指定 */
11  width:300px;
12  height:300px;
13  /* 背景色 */
14  border: 5px solid #fd0000;
15  /* 角を丸くする */
16  border-radius: 50%;
17  margin-left: 9%;
18  -webkit-border-radius: 50%;
19  -moz-border-radius: 50%;
20}
21
22.navi-p p {
23  font-size:35px;
24}
25
26.content1 {
27  padding-top: 65px;
28  text-align: center; /* 中央寄せ */
29  color: #fd0000; /* 文字を赤色に */
30  font-weight: bold;
31}
32
33.content2 {
34  padding-top: 65px;
35  text-align: center; /* 中央寄せ */
36  color: #fd0000; /* 文字を赤色に */
37  font-weight: bold;
38}
39
40.content3 {
41  padding-top: 90px;
42  text-align: center; /* 中央寄せ */
43  color: #fd0000; /* 文字を赤色に */
44  font-weight: bold;
45}
46

行動規範の内容に同意します

回答2件

floatとclearfixは不要です。

vwという単位は古いブラウザでは使えませんが…一番簡単なのはこれです。

.navigate{
	display: inline-block;
	width: 33vw;
	height: 33vw;
	border-radius: 50%;
	background: #ccc;
}

それからinline-blockにするときに字間が空いてしまうので.navigateの閉じタグのあと改行しないようにして試してください。

投稿2016/08/08 13:49

NatsumiOki

総合スコア1298

退会済みユーザー

2016/08/08 15:43

迅速な回答ありがとうございました。一番シンプルな方法を教えていただき、大変参考になりました。

行動規範の内容に同意します

ベストアンサー

別案。vwはIE9+だから、それ以下用。（「文章」の縦中央を別方法にすればIE8+くらいには持っていけると思います）

HTML
1<div class="boxA">
2    <a id="x" href="#sample" rel="leanModal">
3        <div class="navigate">
4            <p>文章<br>文章文章<br>文章<br>文文章章</p>
5        </div>
6        <div class="navigate">
7            <p>文章</p>
8        </div>
9        <div class="navigate">
10            <p>文章</p>
11        </div>
12    </a>
13    <div id="sample">
14        <p>ここに内容が表示されます！四角の大きさは自由に指定できます。</p>
15    </div>
16</div>

CSS
1#x {
2    display: block;
3    overflow: hidden;
4	position: relative;
5}
6#x::before {
7    content: "";
8    display: block;
9    padding-bottom: 24%;
10    width: 100%;
11}
12
13.navigate {
14    border: 5px solid #fd0000;
15    border-radius: 50%;
16    box-sizing: border-box;
17    display: block;
18    font-size: 35px;
19    height: 100%;
20    margin-left: 9%;
21    overflow: hidden;
22    position: absolute;
23    top: 0;
24    width: 24%;
25}
26.navigate:nth-child(2) {
27    left: 33%;
28}
29.navigate:nth-child(3) {
30    left: 66%;
31}
32
33.navigate > p {
34    color: #fd0000;
35    font-weight: bold;
36    left: 0;
37    margin: 0;
38    position: absolute;
39    text-align: center;
40    top: 50%;
41    transform: translate(0px, -50%); /* IE9+ (-ms-) */
42    width: 100%;
43}
44```**動くサンプル：**[https://jsfiddle.net/f5xyg78n/1/](https://jsfiddle.net/f5xyg78n/1/)
45
46コードの都合上、a要素にid付加＆.navi-pを削除しています。[translate](https://developer.mozilla.org/ja/docs/Web/CSS/transform#Browser_compatibility) は文字を縦中央に配置するために使用、IE9用にはベンダープレフィックスが要るはずです。