目次
はじめに
今回はブログ記事やLPでよく見るチェックマークのアイコンを作成しました。コピペで使用できるように紹介はしますが、cssの数値などは適宜ご調整ください。
シンプルなチェックマークアイコン
シンプルなチェックマークアイコンレイアウト
シンプルなチェックマークアイコンソースコード
PR
<span class="icon-check"></span>.icon-check {
width: 100px;
height: 100px;
}
.icon-check::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 30px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-65%) rotate(135deg);
}シンプルなチェックマークアイコン（円形）
シンプルなチェックマークアイコン（円形・背景なし）レイアウト
シンプルなチェックマークアイコン（円形・背景なし）ソースコード
PR
<span class="icon-circle icon-check"></span>.icon-check {
width: 100px;
height: 100px;
}
.icon-check::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 30px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-65%) rotate(135deg);
}
.icon-circle {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #191919;
border-radius: 50%;
}シンプルなチェックマークアイコン（円形・背景）レイアウト
シンプルなチェックマークアイコン（円形・背景）ソースコード
PR
<span class="icon-circle icon-black icon-check"></span>.icon-check {
width: 100px;
height: 100px;
}
.icon-check::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 30px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-65%) rotate(135deg);
}
.icon-circle {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #191919;
border-radius: 50%;
}
.icon-black {
color: #fff;
background-color: #191919;
}シンプルなチェックマークアイコン（四角形）
シンプルなチェックマークアイコン（四角形・背景なし）レイアウト
シンプルなチェックマークアイコン（四角形・背景なし）ソースコード
PR
<span class="icon-square icon-check"></span>.icon-check {
width: 100px;
height: 100px;
}
.icon-check::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 30px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-65%) rotate(135deg);
}
.icon-square {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #191919;
}シンプルなチェックマークアイコン（四角形・背景）レイアウト
シンプルなチェックマークアイコン（四角形・背景）ソースコード
PR
<span class="icon-square icon-black icon-check"></span>.icon-check {
width: 100px;
height: 100px;
}
.icon-check::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 30px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-65%) rotate(135deg);
}
.icon-square {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #191919;
}
.icon-black {
color: #fff;
background-color: #191919;
}他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
