・cssでプラスマイナスを作るにはどう実装するの？
こんな疑問にお答えします。
よく「＋」や「－」のマークがあるデザインやサイトを見ますよね。
あれCSSを使えば簡単に作れちゃいます。
すぐにできるよ！
ということで、この記事では「CSSでプラスとマイナスを作る方法」について解説していきます！
・プラスとマイナスを作る方法
・プラスとマイナスを作る方法【切替アニメーション】
目次
【CSS】プラスとマイナスを作る方法【コピペOK】
CSSのみでプラスとマイナスマークを作ったサンプルがこちらになります。
See the Pen ➀プラスマイナス by jito-coder (@jito-coder) on CodePen.
マイナスのコード。
<div class="minus"></div>.minus {
position: relative;
}
.minus::before {
content: '';
display: inline-block;
position: absolute;
width: 3px;
height: 25px;
background-color: #000066;
transform: rotate(90deg);
}プラスのコード。
<div class="plus"></div>.plus {
position: relative;
}
.plus::before,.plus::after {
content: '';
display: inline-block;
position: absolute;
width: 3px;
height: 25px;
background-color: #000066;
}
.plus::after {
transform: rotate(90deg);
}作成方法の手順がこちら↓
- 要素にposition: relativeを指定
- before,afterを使い線を作成
- afterを-90度傾ける
順に見ていきましょう！
まずプラスマイナスを指定するための要素に対して、position: relative;を指定します。
.plus {
position: relative;
}
.minus {
position: relative;
}次に先ほどの要素に対して疑似要素を作成します。
この疑似要素を使って、プラス・マイナスマークを作成するという仕組みですね。
プラスはbefore,after両方使って、同じ大きさの線を作成します。
.plus::before,.plus::after {
content: '';
display: inline-block;
position: absolute;
width: 3px;
height: 25px;
background-color: #000066;
}マイナスはbeforeのみ使って線を作成。マイナスに関してはこれだけで完成ですね。
.minus::before {
content: '';
display: inline-block;
position: absolute;
width: 3px;
height: 25px;
background-color: #000066;
transform: rotate(90deg);
}最後にプラスマークを作る場合、先ほど作ったafter要素を-90度傾けます。
.plus::after {
transform: rotate(90deg);
}こうすれば同じ大きさの縦向きと横向きの線が、重なる状態になりますよね。
そのためこれでプラスマークを実装することが可能です。
【CSS】プラスとマイナスを作る方法【切替アニメーション】
よくプラスマークからマイナスマークに切り替わるアニメーションがありますよね。
ボタンをクリックしたら「＋」⇒「－」になるやつ。
あれはCSSとjQueryを用いれば、簡単に実装できちゃいます。
そんな切替アニメーションのサンプルがこちら↓
See the Pen ➁：アコーディオン by jito-coder (@jito-coder) on CodePen.
<div class="plus">切替ボタン</div>.plus::before,.plus::after {
content: '';
display: inline-block;
width: 20px;
height: 2px;
background-color: #fff;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: opacity 1s;
}
.plus::after {
transform: translateY(-50%) rotate(90deg);
transition: transform 1s;
}
.plus.show::before {
opacity: 0;
}
.plus.show::after {
transform: translateY(-50%) rotate(180deg);
}$(function(){
$('.plus').click(function(){
$(this).toggleClass("show");
});
});切替方法の手順がこちら↓
- クリックしたらクラス付与
- クラス付与されたらbeforeを非表示に
- クラス付与されたらafterを傾けてマイナスに
順に見ていきましょう！
まず要素をクリックしたら、クラス付与する記述をjQueryにします、
$(function(){
$('.plus').click(function(){
$(this).toggleClass("show");
});
});.plusクラス要素をクリックしたら、.showクラスを付け外しするようになりました。
次に.showクラスが付与されたら、beforeを非表示にする記述をします。
.plus.show::before {
opacity: 0;
}つまり.showクラスがついたら、マイナスマークが見えなくなるということですね。
最後に.showクラスが付与されたら、afterを傾けるような記述をします。
.plus.show::after {
transform: translateY(-50%) rotate(180deg);
}つまり.showクラスがついたら、縦向きの線「｜」が、横向きの線「ー」になるということですね。
これでマイナスマークからプラスマークに切り替わるアニメーションが実装できました！
ちなみにこういったプラスマイナス切替アニメーションは、アコーディオンでよく使われます。
気になる方は下記をどうぞ。
【jQuery】アコーディオンの作り方【クリックで開閉｜プラスマイナス】 【CSS】プラスとマイナスを作る方法【切り替えアニメーションあり】：まとめ
- before,afterを使い線を作成
- どちらかの疑似要素を傾けることでプラスマイナス作成可能
- jQueryを使ってクラス付与する記述をすれば、切替アニメーションも可能
プラスとマイナスマークの実装はよくするので覚えておこう！
