T.Takahashi CSSの疑似要素beforeとafterで肉球をつくる 2017-06-23T04:38:19Z
０；ゼロからはじめる！

【最終更新日：2017/06/23】 HTML5 ブログカスタマイズ

CSSの疑似要素beforeとafterで肉球をつくる

はじめに

オリジナルなhタグ（要素）が作りたくて、肉球をつくってみたお話です。

まず最初にCSS擬似要素のbeforeとafterを使用する。

作るにあたっての考え方

まずは簡単な装飾から作り最後に肉球の形を作ることにする。。

1.１つ表示する方法

ここでは、h1要素「こんにちは」に対して左側に青丸を１つ表示する。

?
HTML例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.circle01 {
  position: relative;
  padding-left: 20px;
}
.circle01::before {
/* ブラウザで正常に表示されない場合は、
::beforeを:before(コロン１つ)にする */
  content:'';
  height: 15px;         /* 縦幅 */
  width: 15px;          /* 横幅 */
  display:block;
  border-radius: 50%;   /* まん丸に表示 */
  background: blue;  /* 色指定 */
  position:absolute;
  top: 15px;            /* 縦位置調整 */
  left: 0px;            /* 横位置調整 */
}
</style>
 
<h1 class="circle01">こんにちは</h1>

と結果として表示される。

解説
  1. .circle01 に対して擬似要素:beforeを使用
  2. <h1 class="circle01">こんにちは</h1>を表示する
  3. 次に擬似要素::beforeによって左側に青丸を表示させる

2.box-shadowを使い２つ表示する

次に、CSS擬似要素を用いてh1要素「こんにちは」に対しての左側に 青丸と黒丸を２つ表示する。黒丸はbox-shadowを用いて表示する。

?
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
26
<style>
.circle02 {
  position: relative;
  padding-left: 20px;
}
.circle02:before {
  content:'';
  height: 15px;
  width: 15px;
  display:block;
  border-radius: 50%;
  background: blue;
  position:absolute;
  top: 15px;
  left: 0px;
  box-shadow:0px -0px black;
    -webkit-box-shadow:0px -20px black;
}.circle02 {
  position: relative;
  padding-left: 20px;
}
</style>
 
<h1 class="circle02">こんにちは</h1>

と結果として表示される。

解説
  1. .circle02 に対して擬似要素:beforeを使用
  2. <h1 class="circle01">こんにちは</h1>を表示する
  3. 次に擬似要素::beforeによって左側に青丸と、box-shadowを使い黒丸を表示させる

3.box-shadowと擬似要素::before、::afterを使い４つ表示する

次に、CSS擬似要素を用いてh1要素「こんにちは」に対しての左側に 青丸と黒丸を２つ表示する。黒丸はbox-shadowを用いて表示する。

?
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
26
27
28
29
30
31
32
33
34
35
36
<style>
.circle03 {
  position: relative;
  padding-left: 20px;
}
.circle03:before {
  content:'';
  height: 15px;
  width: 15px;
  display:block;
  border-radius: 50%;
  background: blue;
  position:absolute;
  top: 15px;
  left: 0px;
  box-shadow:0px -0px black;
    -webkit-box-shadow:0px -20px black;
}
.circle03:after {
  content:'';
  height: 15px;
  width: 15px;
  display:block;
  border-radius: 0%;
  background: red;
  position:absolute;
  top: 15px;
  left: 20px;
  box-shadow:0px -0px #000;
    -webkit-box-shadow:0px -20px white;
}
</style>
 
<h1 class="circle02">こんにちは</h1>

と結果として表示される。

解説
  1. .circle03 に対して擬似要素::before、::afterを使用
  2. <h1 class="circle01">こんにちは</h1>を表示する
  3. 次に擬似要素::beforeによって左側に青丸と、box-shadowを使い黒丸を表示させる
  4. 最後に擬似要素::afterによって左側に赤四角と、box-shadowを使い白四角を表示させる

4.お待ちかねの肉球の表示

CSS擬似要素::before、::after、box-shadowを用いて肉球表示する。

?
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
26
27
28
29
30
31
32
33
34
<style>
.demo {
position: relative;
padding-left: 50px;
}
.demo:before{
  content:'';
  height: 8px;
  width: 8px;
  display:block;
  border-radius: 50%;
  background: #008ec2;
  box-shadow:10px -8px #008ec2, -2px 13px #008ec2;
    -webkit-box-shadow:10px -8px #008ec2, -2px 13px #008ec2;
  position:absolute;
  top: 10px;
  left: 5px;
}
.demo:after{
  content:'';
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 50%;
  background: #008ec2;
  position:absolute;
  top: 13px;
  left: 15px;
}
</style>
 
<h1 class="circle02">こんにちは</h1>

と結果として表示される。

解説
  1. .demo に対して擬似要素::before、::afterを使用
  2. <h1 class="demo">こんにちは</h1>を表示する
  3. 次に擬似要素::beforeによって左側に青丸を中心に、box-shadowを使い黄丸と赤丸を表示させる
  4. 最後に擬似要素::afterによって左側に白丸を表示させる

最後に

わかりやすくするために別々の色を使ったが、実際には同じ色をつかうので肉球に見えるはずだ。今回は使用しなかったがtransformを使えば回転も使える。例えば■（四角）を回転させて◆（ひし形）にもできる。これをつかっていろいろなものを作成してみよう！（これを使えばグラフィックアイコンも作れるよ！）

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿