はじめに
今回はサイトコーディングで頻出の矢印アイコンをHTML・CSSで作成したのでソースコードと一緒にご紹介します。今回のものは四角形のborderで囲まれているものになります。borderの幅や、色は適宜調整ください。
矢印アイコン（四角形ボーダーあり、背景なし）
上向き矢印アイコン（四角形、ボーダーあり、背景なし）
PR
<span class="icon-square icon-up"></span>.icon-up::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-35%) rotate(-45deg);
}
.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-down"></span>.icon-down::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
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-left"></span>.icon-left::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-35%,-50%) 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-right"></span>.icon-right::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-65%,-50%) rotate(45deg);
}
.icon-square {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #191919;
}矢印アイコン（四角形、背景黒）
上向き矢印アイコン（四角形、背景黒）
<span class="icon-square icon-black icon-up"></span>.icon-up::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-50%,-35%) rotate(-45deg);
}
.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;
}下向き矢印アイコン（四角形、背景黒）
PR
<span class="icon-square icon-black icon-down"></span>.icon-down::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
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;
}左向き矢印アイコン（四角形、背景黒）
PR
<span class="icon-square icon-black icon-left"></span>.icon-left::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-35%,-50%) 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;
}右向き矢印アイコン（四角形、背景黒）
PR
<span class="icon-square icon-black icon-right">.icon-right::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
transform: translate(-65%,-50%) rotate(45deg);
}
.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;
}4方向のcssをまとめたソースコード
.icon-up::before,
.icon-down::before,
.icon-left::before,
.icon-right::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 10px solid currentColor;
border-right: 10px solid currentColor;
}
.icon-up::before {
transform: translate(-50%,-35%) rotate(-45deg);
}
.icon-down::before {
transform: translate(-50%,-65%) rotate(135deg);
}
.icon-left::before {
transform: translate(-35%,-50%) rotate(-135deg);
}
.icon-right::before {
transform: translate(-65%,-50%) rotate(45deg);
}
.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ソースコードを紹介した記事まとめています。
