cssで円を書いてみよう

cssで円の作り方をご紹介したいと思います。
見出しの前にワンポイント入れるなどいろんな使い方ができるようになります。

紹介は内容は以下の通りです。

htmlの構造紹介

今回はdivタグの前に円を入れていくようなサンプルを使ってご紹介したいと思います。サンプルコードは次のようなものを使用します。

<div class="border_radius">文字の前に円がつくよ</div>

上記のようなシンプルなhtmlにcssを当てていくことを考えます。

cssの紹介

cssの作り方をご紹介したいと思います。
まず、先ほど作成したdivタグの前に何か入れれるようにしないといけませんので、まずはこのdivタグのbefore要素を使って背景が黒い四角形を入れてみましょう。それにはposition:relativeとposition:absoluteを使います。

サンプルの１例をご紹介したいと思います。

.border_radius{
 position:relative;
 padding-left:20px;//四角形を入れるためにちょっと文字をずらします。
}
.border_radius:before{
 position:absolute;
 content:"";
 width:10px;
 height:10px;
 background:#000;
 top:2px;
 left:0;
}

サンプル実行例

上記のようにこれで、文字の前に四角形がつきました。
ではここから円にしたいと思います。
円にするのは非常に簡単で、border-radiusを使用します。

.border_radius{
 position:relative;
 padding-left:20px;//四角形を入れるためにちょっと文字をずらします。
}
.border_radius:before{
 position:absolute;
 content:"";
 width:10px;
 height:10px;
 background:#000;
 border-radius:10px;//丸くしてくれます
 top:2px;
 left:0;
}

サンプル実行例

例えば背景のカラーを別のclassにすることで、色だけ変えることができるようになりますね。

まとめ

上記のように、丸を自作するだけでも色を変更できたり円形の大きさを変更できたりするので、ぜひいろんな場面で試してみてください。

上記のように、ベン図のようなものも作ることができます。