【CSS】円(丸)を重たり二重丸にする方法（レスポンシブ対応）

「丸をちょっと重ねて、ちゃんとレスポンシブ対応もしたい！」

円(丸)を重ねる方法を紹介します。レスポンシブ対応もしますよ！

丸の作り方はこちら↓

二重丸（◎）のようにする

<style>
.example{
    border-radius: 50%;
    border: 1px solid #333;
    width: 200px;
    height: 200px;
    padding: 50px;
    box-sizing: border-box;
    background: #a1ccff;
}
.example>div{
    border-radius: 50%;
    border: 1px solid #333;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ebe276;
}
@media(max-width:750px){
    .example{
        width: 30vw;
        height: 30vw;
        padding: 6vw;
    }
}
</style>
<div class="example">
    <div></div>
</div>

親要素の丸の内側に子要素を置きます。

子要素の高さと幅を100%にすることで親に合わせた大きさの丸になります。

子要素のheightは親要素にauto以外のheightが指定されている必要があるので注意しましょう。

親要素と子要素の大きさの差は親要素のpaddingで調整しましょう。

レシポンシブ対応としてメディアクエリを使います。

スマホ・タブレットサイズになったらvw単位を使って幅と高さを指定します。

vwはブラウザの横幅を基準とする単位です。100vwがブラウザの横幅いっぱいで、30vwだとブラウザ幅の30/100（約3分の1）になります。

パソコン版で30vwを指定すると親の幅を超えることがあるため、タブレット以下で切り替わるようにしています。

marginでずらす（重ねる）

子要素にmarginを指定することで位置をずらすことができます。

二重丸ベース

上記の二重丸のように重なった状態からずらした例です。

<style>
.example2{
    border-radius: 50%;
    border: 1px solid #333;
    width: 200px;
    height: 200px;
    padding: 50px;
    box-sizing: border-box;
    background: #a1ccff;
}
.example2>div{
    /*コレ*/margin: 50px 0 0 100px;
    border-radius: 50%;
    border: 1px solid #333;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #ebe276;
}
@media(max-width:750px){
    .example2{
        width: 30vw;
        height: 30vw;
        padding: 6vw;
    }
    .example2>div{
    /*コレ*/margin: 6vw 0 0 15vw;
    }
}
</style>
<div class="example2">
    <div></div>
</div>

縦に並べて

丸を縦に並べた状態からマイナスmarginを使って重ねた例です。

<style>
.example2-1{
    border-radius: 50%;
    border: 1px solid #333;
    width: 30%;
    padding-top: 30%;
    background: #a1ccff;
}
.example2-2{
    /*コレ*/margin: -15% 0 0 20%;
    border-radius: 50%;
    border: 1px solid #333;
    width: 15%;
    padding-top: 15%;
    background: #ebe276;
}
</style>
<div class="example2-1"></div>
<div class="example2-2"></div>

レスポンシブ対応するためにpadding-topで高さを%指定しています。

paddingは横幅を基準とするため、widthと同じ値を指定すると縦横が同じ大きさになります。

paddingで高さを作る場合線の幅分ずれるため「box-sizing:border-box」は外しましょう。

position:absoluteで重ねる

<style>
.example3{
    /*コレ*/position: relative;
    border-radius: 50%;
    border: 1px solid #333;
    width: 30%;
    padding-top: 30%;
    background: #a1ccff;
}
.example3>div{
    /*コレ*/position: absolute;
    /*コレ*/bottom: 0;
    /*コレ*/left: 70%;
    border-radius: 50%;
    border: 1px solid #333;
    width: 50%;
    height: 50%;
    background: #ebe276;
}
</style>
<div class="example3">
    <div></div>
</div>

position:absoluteは要素を重ねるCSSです。

親要素の丸を基準として子要素の丸の位置を調整します。