HTMLやcssで丸囲みテキストをつくってみるのでR

丸で囲まれた文字は、かわいいのでR。

例えば、

①、②、③…

はよく使われるが、

㊞、㊜、㊙…

などもよく見るのでR。

ただし、これらはすでに囲み文字としてあるのでR。

これ以外の文字も時に囲みたいのでが、それは囲み文字としてセットされていないのでR。

そこで、囲、の字をHTMLとCSSで丸囲みテキストとしてつくってみるのでR。

それには、ここの方の記事が参考になったのでR。

CSSで

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
}
.size_normal{
  width: 120px;
  height: 120px;
}
.letter3 {
  font-size: 3em;
  line-height: 1.5em;
}
.pink1 {
  color: pink;
  border: 4px solid pink;
}

として、出すHTMLに、

1
2
3
4
5
<div class="maru size_normal pink1">
     
<div class="letter3">囲</div>
 
</div>

と記述するだけでよいようなのでR。

HTMLのみで実現するには、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="maru size_normal pink1">
<div class="letter3">囲</div>
</div>
<style>
.maru {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  vertical-align: top;
}
.size_normal{
  width: 120px;
  height: 120px;
}
.letter3 {
  font-size: 3em;
  line-height: 1.5em;
}
.pink1 {
  color: pink;
  border: 4px solid pink;
}
</style>

と記述すればよいのでR。

すると、

囲

となるのでR。


（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。