CSSで「×」バツ（閉じる）ボタンの作り方4種【コピペでOK】
CSSで「×」のようなバツボタンの作り方を説明します。
× テキスト型 |
× オンマウス型 |
太さ可変 | クリックで変化 |
カンタンにバツを実装する方法
テキストの「×」を利用しましょう。
太字にしたり、文字を大きくするだけでそれっぽくなります。
html
<div class="batsu">×</div>CSS
.batsu{
font-size: 400%;
font-weight: bold;
}CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
ボタンっぽくバツを実装する方法
↓マウスを乗せるとバツボタンが変化します。
html
<div class="batsu">×</div>CSS
.batsu{
font-size: 100%;/*ボタンの大きさ*/
font-weight: bold;
border: 1px solid #999;
color: #999;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
width: 1.3em;
line-height: 1.3em;
cursor: pointer;
transition: .2s;
}
.batsu:hover{
background: #333;
border-color: #333;
color: #FFF;
}バツを中央寄せするためにdisplay:flexを使っています。
↓具体的な使い方はこちらの記事です。
バツを細かく調整する方法
バツの太さを調節したい場合はこちらをご利用ください。
html
<span class="batsu"></span>CSS
.batsu{
display: block;
width: 50px;/*枠の大きさ*/
height: 50px;/*枠の大きさ*/
background: #CCC;
position: relative;
}
.batsu::before, .batsu::after{
content: "";
display: block;
width: 100%;/*バツ線の長さ*/
height: 10px;/*バツ線の太さ*/
background: #000;
transform: rotate(45deg);
transform-origin:0% 50%;
position: absolute;
top: calc(14% - 5px);
left: 14%;
}
.batsu::after{
transform: rotate(-45deg);
transform-origin:100% 50%;
left: auto;
right: 14%;
}バツ印は多くの場合クリックさせるために使います。そこでクリック範囲の目安として枠を用意しました。
目的によってバツの大きさ・長さ・太さは違うため、これらを変更可能とします。変更した場合少々ずれるため位置調整の計算方法も説明します。
計算方法
.batsuのwidth=.batsuのheight=枠の大きさであり、バツの長さの基準
.batsu::before, .batsu::afterのwidth=バツ線の長さ=a
.batsu::before, .batsu::afterのheight=バツ線の太さ=b
.batsu::beforeのleft=.batsu::afterのright=(140 - a )/4*1.4=c
.batsu::before,.batsu::afterのtop: calc(c - (b/2) );
メニューがバツボタンに変化する方法
スマホによくある「三」のようなハンバーガーメニューが動きをつけながらバツボタンに変化します。クリックすると変化します。
html＆javascript
<span class="menu"><hr><hr><hr></span>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$(".menu").click(function() {
$(this).toggleClass("close");
});
});
</script>CSS
.menu{
display: block;
width: 50px;/*枠の大きさ*/
height: 50px;/*枠の大きさ*/
background: #CCC;
position: relative;
cursor: pointer;
}
.menu hr{
display: block;
margin: 0;
border: none;
width: 50%;/*バツ線の長さ*/
height: 4px;/*バツ線の太さ*/
background: #000;
transform-origin:0% 50%;
position: absolute;
top: 12px;
left: 25%;
transition: .3s;
}
.menu hr:nth-of-type(2){
top: 22px;
}
.menu hr:nth-of-type(3){
top: 32px;
}
.close hr{
left: 30%;
}
.close hr:nth-of-type(1){
transform: rotate(45deg);
width: 55%;
}
.close hr:nth-of-type(2){
opacity: 0;
}
.close hr:nth-of-type(3){
top: 32px;
transform: rotate(-45deg);
width: 55%;
}上記の「バツを細かく調整する方法」を応用していますが、細かい調整は必要でしょう。そのままコピペしてもOKです。
クリックされたらクラスを変える方法はこちらで詳しく紹介します。
まとめ
以上の方法で自分の作りたい「×」バツボタンを作ってしまいましょう。
CSSでバツボタンの作り方の説明でした。
その他CSSアイコン集
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
