さぁ!検索しよう!

CSS3を利用して横幅の変化に応じて縦横比を維持したまま可変する正円の作り方を解説します。

始めに今回はこのような4つの正円を作ります。ブラウザの横幅を伸縮させると、それに応じて各正円の大きさも変化することが確認できます。

それでは各ソースコードを順番に解説します。

始めにHTMLです。

HTML

<div class="bg"> 
    <div class="wr-left-t"> 
        <div class="circle"></div> 
    </div> 
    <div class="wr-right-t"> 
        <div class="circle"></div> 
    </div> 
</div> 
<div class="bg"> 
    <div class="wr-left-b"> 
        <div class="circle"></div> 
    </div> 
    <div class="wr-right-b"> 
        <div class="circle"></div> 
    </div> 
</div>

各要素の定義付けは下記の通りです。

要素 定義
<div class="bg"><div> 2つの正円を囲う親要素
<div class="wr-left-t"><div class="circle"></div></div> 左上に配置する正円となる要素
<div class="wr-right-t"><div class="circle"></div></div> 右上に配置する正円となる要素
<div class="wr-left-b"><div class="circle"></div></div> 左下に配置する正円となる要素
<div class="wr-right-b"><div class="circle"></div></div> 右下に配置する正円となる要素

<div class="wr-left-*"><div class="circle"></div></div><div class="wr-right-*"><div class="circle"></div></div>の2つの子要素を包んだ<div class="bg"><div>というクラスを持つ親要素を2回定義しています。正円自体は<div class="wr-left-*"><div class="circle"></div></div>,<div class="wr-right-*"><div class="circle"></div></div>とその中にある<div class="circle"></div>となります。

続いて、CSSです。

CSS

*, :before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bg {
    width:100%;
}
.circle {
    border-radius:50%;
    padding:50%;
}
.wr-left-t,
.wr-left-b {
    float:left;
    width:50%;
}
.wr-right-t,
.wr-right-b {
    float:right;
    width:50%;
}
.wr-left-t {
    background:#E9872E;
}
.wr-left-b {
    background:#F27398;
}
.wr-right-t {
    background:#93B8CA;
}
.wr-right-b {
    background:#79D1B0;
}
.wr-left-t .circle {
    background:#FFD464;
}
.wr-left-b .circle {
    background:#fff;
}
.wr-right-t .circle {
    background:#F26964;
}
.wr-right-b .circle {
    background:#A18E5C;
}

各要素のスタイルの定義付けは下記の通りです。

.circle {
    border-radius:50%;
    padding:50%;
}

<div class="circle"></div>を正円にする指定です。border-radius:50%;で円周にし、padding:50%;で要素を正円の形に膨らませています。

.wr-left-t,
.wr-left-b {
    float:left;
    width:50%;
}
.wr-right-t,
.wr-right-b {
    float:right;
    width:50%;
}

左右上下の正円を囲う親要素である<div class="wr-left-t"></div><div class="wr-left-b"></div>,<div class="wr-right-t"></div>,<div class="wr-right-b"></div>に左右に寄せと横幅のスタイルを記述しています。この際、横幅の値次第で正円自体のサイズが決まり、更にパーセントで指定することで可変となります。

以上です。