【CSS】いろいろなチェックマークの作り方【トンガリ･角丸･アニメ】

2021年11月17日

「チェックマークを画像で作るのメンドウ！」

「アニメーションでチェックをつけてるかんじにしたい！」

CSSでチェックボックスのチェックマークを作成する方法を紹介します。四角・トンガリ･角丸のチェックマークとそれぞれアニメーションにしたバージョン、さらにチェックボックスをチェックマークにする方法も解説します。

ソースそのままコピペでも大丈夫ですが、デザインや文字の大きさによっては合わないかもしれません。

そのときはチェックマークの大きさや位置を1px単位で調整してみてください。

チェックマークの調整が難しいときは文字のほうを調整してみてください。

文字サイズは16pxで作っています。

基本の四角チェックマーク
- アニメーションの四角チェックマーク
トンガリチェックマーク
- アニメーションのトンガリチェックマーク
角丸チェックマーク
- アニメーションの角丸チェックマーク
チェックボックスをチェックマークにする方法
- inputとlabelが兄弟要素のとき
- inputがlabelの子要素のとき
【まとめ】CSSでチェックマーク作成方法

基本の四角チェックマーク

<style>
.example{
    border: 1px solid #999;
    padding: 20px;
}
.example::before{
    content: "";
    display: block;
    height: 5px;
    width: 10px;
    border-bottom: 3px solid #40a9e0;
    border-left: 3px solid #40a9e0;
    transform: rotate(-45deg);
}
</style>
<div class="example"></div>

チェックマークは長方形を作り、左と下だけに線をつけます。

それを傾けると完成です。

アニメーションの四角チェックマーク

↓クリックするとアニメーションしながらチェックマークが出現します。

<style>
.example2 label{
    cursor: pointer;
    display: block;
    position: relative;
}
.example2 label::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #CCC;
    border-radius: 3px;
    margin: 2px 5px -2px 2px;
}
.example2 input{
    display: none;
}
.example2 span{
    display: inline-block;
    position: relative;
}
.example2 input:checked+span::before{
    content: "";
    display: block;
    height: 5px;
    width: 10px;
    border-bottom: 3px solid #40a9e0;
    border-left: 3px solid #40a9e0;
    position: absolute;
    transform: rotate(-45deg);
    left: -20px;
    top: 0;
    bottom: 6px;
    margin: auto;
}
.example2 input:checked+span::before{
    animation: 0.5s example2;
}
@keyframes example2{
    0%{
        height: 0;
        width: 0;
        top: 5px;
        left: -20px;
    }
    30%{
        height: 5px;
        width: 0;
        top: 7px;
        left: -19px;
    }
    100%{
        height: 5px;
        width: 10px;
        top: 0px;
        left: -20px;
    }
}
</style>
<form class="example2">
    <label><input type="checkbox" checked><span>選択肢1</span></label>
    <label><input type="checkbox"><span>選択肢2</span></label>
</form>

アニメーションにするには、まず高さと横幅を0にします。高さを伸ばしたあと横幅を伸ばします。

これだけだと位置が変動するのでposition: absoluteで浮かし、topやleftで調整します。

位置調整が必要なため実用性のあるチェックボックスとセットで作りました。

チェックボックスをチェックマークにする方法は後述します。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

トンガリチェックマーク

<style>
.example3{
    border: 1px solid #999;
    padding: 20px;
}
.example3::before{
    content: "";
    display: block;
    height: 5px;
    width: 100px;
    border-bottom: 4px solid #40a9e0;
    border-left: 8px solid #40a9e0;
    transform: rotate(-45deg) perspective(30px) rotateY(60deg);
    transform-origin: 0 50%;
}
</style>
<div class="example3"></div>

基本は先述の四角チェックマークです。これを3DのようにY軸を軸にして傾けます。

車の横面を見つつ正面も見ようとするイメージです。

このように傾けると奥行ができます。遠近法により遠いほうは小さく、近いほうは大きく見えます。

これを利用してチェックマークの右端を小さく、左端を大きくしています。

transform:rotateY(60deg)を指定するとY軸を軸にして傾けることができます。

ただしこれだけでは遠近法のようにならないためtransform:perspective(30px)で奥行を追加しています。

またtransform-origin: 0 50%で軸の基準を左真ん中にしています。

アニメーションのトンガリチェックマーク

↓クリックするとアニメーションしながらチェックマークが出現します。

<style>
.example4 label{
    cursor: pointer;
    display: block;
    position: relative;
}
.example4 label::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #CCC;
    border-radius: 3px;
    margin: 2px 5px -2px 2px;
}
.example4 input{
    display: none;
}
.example4 span{
    display: inline-block;
    position: relative;
}
.example4 input:checked+span::before{
    content: "";
    display: block;
    height: 5px;
    width: 100px;
    border-bottom: 4px solid #40a9e0;
    border-left: 8px solid #40a9e0;
    transform: rotate(-45deg) perspective(30px) rotateY(60deg);
    transform-origin: 0 50%;
    position: absolute;
    left: -17px;
    top: 3px;
    bottom: 0;
    margin: auto;
}
.example4 input:checked+span::before{
    animation: 0.5s example4;
}
@keyframes example4{
    0%{
        height: 0;
        width: 0;
        top: 0px;
        left: -18px;
    }
    30%{
        height: 5px;
        width: 0;
        top: 2px;
        left: -17px;
    }
    100%{
        height: 5px;
        width: 100px;
        top: 3px;
        left: -17px;
    }
}
</style>
<form class="example4">
    <label><input type="checkbox" checked><span>選択肢1</span></label>
    <label><input type="checkbox"><span>選択肢2</span></label>
</form>

四角チェックマーク同様、アニメーションにするには、まず高さと横幅を0にします。高さを伸ばしたあと横幅を伸ばします。

これだけだと位置が変動するのでposition: absoluteで浮かし、topやleftで調整します。

角丸チェックマーク

<style>
.example5{
    border: 1px solid #999;
    padding: 20px;
    position: relative;
}
.example5::before,.example5::after{
    content: "";
    display: block;
    height: 5px;
    width: 9px;
    background: #40a9e0;
    border-radius: 10px;
    transform: rotate(45deg);
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 1px;
    margin: auto;
}
.example5::after{
    transform: rotate(-45deg);
    width: 14px;
    left: 14px;
    bottom: 2px;
}
</style>
<div class="example5"></div>

角丸にするにはborderではできません。border-radiusを使い角丸にするため要素全体を線のように表現する必要があります。

よって要素を2つ使い、一つを左側に、もう一つを右側にし、両方が下で重なるように配置し傾けます。

時計の10時5分を作るイメージです。

ちなみに細すぎると角丸がわかりにくいため太めの線にしています。

アニメーションの角丸チェックマーク

↓クリックするとアニメーションしながらチェックマークが出現します。

<style>
.example6 label{
    cursor: pointer;
    display: block;
    position: relative;
}
.example6 label::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #CCC;
    border-radius: 3px;
    margin: 2px 5px -2px 2px;
}
.example6 input{
    display: none;
}
.example6 span{
    display: inline-block;
    position: relative;
}
.example6 input:checked+span::before,.example6 input:checked+span::after{
    content: "";
    display: block;
    height: 5px;
    width: 9px;
    background: #40a9e0;
    border-radius: 10px;
    transform: rotate(45deg);
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 1px;
    margin: auto;
}
.example6 input:checked+span::after{
    transform: rotate(-45deg);
    width: 14px;
    left: -19px;
    bottom: 2px;
}
.example6 input:checked+span::before{
    animation: 0.5s example6;
}
.example6 input:checked+span::after{
    animation: 0.5s example6-2;
}
@keyframes example6{
    0%{
        width: 5px;
        left: -23px;
    }
    30%{
        width: 9px;
        left: -22px;
    }
}
@keyframes example6-2{
    0%{
        width: 0px;
        left: -18px;
        bottom: 0px;
    }
    30%{
        width: 5px;
        left: -18px;
        bottom: 0px;
    }
    100%{
        width: 14px;
        left: -19px;
        bottom: 3px;
    }
}
</style>
<form class="example6">
    <label><input type="checkbox" checked><span>選択肢1</span></label>
    <label><input type="checkbox"><span>選択肢2</span></label>
</form>

四角チェックマークのときと違い、2つの要素を使っているためそれぞれにアニメーションを指定する必要があります。

それ以外の基本は四角チェックマークと同様です。

チェックボックスをチェックマークにする方法

inputとlabelが兄弟要素のとき

<style>
.example7 label{
    cursor: pointer;
    display: block;
    position: relative;
}
.example7 label::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #CCC;
    border-radius: 3px;
    margin: 2px 5px -2px 2px;
}
.example7 input{
    display: none;
}
.example7 input:checked+label::after{
    content: "";
    display: block;
    height: 5px;
    width: 10px;
    border-bottom: 3px solid #40a9e0;
    border-left: 3px solid #40a9e0;
    position: absolute;
    transform: rotate(-45deg);
    left: 5px;
    top: 0;
    bottom: 6px;
    margin: auto;
}
</style>
<form class="example7">
    <input type="checkbox" id="example7-1" checked><label for="example7-1">選択肢1</label>
    <input type="checkbox" id="example7-2"><label for="example7-2">選択肢2</label>
</form>

外部から導入したフォームだとinputとlabelが兄弟要素になっているかもしれません。

input type="checkbox"はCSSで調整できないためdisplay: noneで見えなくします。

ただし、存在しないとチェックができないためhtml上は残しています。

labelのbeforeやafterを使い、チェックマークとボックスを表現します。

ただ、チェックをつけたときだけチェックマークがでていてほしいですよね？

まず、チェックがつくとhtml側のinputに「checked」がつきます。

このときCSS上は「input:checked」と指定することができます。

ラベルはinputの直近の兄弟要素となっているため「input:checked+label」と指定できます。

これでチェックがついたときにチェックマークを表示することができます。

inputがlabelの子要素のとき

<style>
.example8 label{
    cursor: pointer;
    display: block;
    position: relative;
}
.example8 label::before{
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #CCC;
    border-radius: 3px;
    margin: 2px 5px -2px 2px;
}
.example8 input{
    display: none;
}
.example8 span{
    display: inline-block;
    position: relative;
}
.example8 input:checked+span::before{
    content: "";
    display: block;
    height: 5px;
    width: 10px;
    border-bottom: 3px solid #40a9e0;
    border-left: 3px solid #40a9e0;
    position: absolute;
    transform: rotate(-45deg);
    left: -20px;
    top: 0;
    bottom: 6px;
    margin: auto;
}
</style>
<form class="example8">
    <label><input type="checkbox" checked><span>選択肢1</span></label>
    <label><input type="checkbox"><span>選択肢2</span></label>
</form>

labelの中にinputを置くとidやforの指定が不要ですのでオリジナルフォームを作るならこちらがおすすめです。

inputがlabelの子要素のとき「input:checked+label」が使えません。

またCSSでは「子要素○○を含む親要素」という指定ができません。

よってinputの兄弟要素にspanを用意し、それをチェックマークにします。

これなら「input:checked+span」という形でCSSを指定できます。