狼読

 
2020/03/12

cssで円を書いてみよう

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

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

htmlの構造紹介

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

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

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

cssの紹介

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

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

.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にすることで、色だけ変えることができるようになりますね。

文字の前に円がつくよ
文字の前に円がつくよ
文字の前に円がつくよ

まとめ

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

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Technology

category

©狼読