目次
はじめに
今回はサイトコーディングで頻出の矢印（↑,↓,←,→）をHTML・CSSで作成したのでソースコードと一緒にご紹介します。
borderの幅や、色は適宜調整ください。
矢印↑
矢印↑の表示
PR
矢印↑のソースコード
<span class="arrow-up"></span>.arrow-up,
.arrow-down,
.arrow-left,
.arrow-right {
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow-up::before {
content: "";
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(-45deg);
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.arrow-up::after {
content: "";
width: 2px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #191919;
}矢印↓
矢印↓の表示
PR
矢印↓のソースコード
<span class="arrow-down"></span>.arrow-down {
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow-down::before {
content: "";
width: 15px;
height: 15px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(135deg);
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.arrow-down::after {
width: 2px;
height: 50px;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
}矢印←
矢印←の表示
PR
矢印←のソースコード
<span class="arrow-left"></span>.arrow-left {
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow-left::before {
content: "";
width: 15px;
height: 15px;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%) rotate(-135deg);
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.arrow-left::after {
content: "";
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
}矢印→
矢印→の表示
PR
矢印→のソースコード
<span class="arrow-right"></span>.arrow-right {
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow-right::before {
content: "";
width: 15px;
height: 15px;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%) rotate(45deg);
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.arrow-right::after {
content: "";
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
}↑,↓,←,→まとめて使用される場合のCSS
PR
.arrow-up,
.arrow-down,
.arrow-left,
.arrow-right {
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.arrow-up::before,
.arrow-down::before,
.arrow-left::before,
.arrow-right::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.arrow-up::before {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(-45deg);
}
.arrow-down::before {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(135deg);
}
.arrow-left::before {
top: 50%;
left: 0;
transform: translate(0, -50%) rotate(-135deg);
}
.arrow-right::before {
top: 50%;
right: 0;
transform: translate(0, -50%) rotate(45deg);
}
.arrow-up::after,
.arrow-down::after,
.arrow-left::after,
.arrow-right::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
}
.arrow-up::after,
.arrow-down::after {
width: 2px;
height: 50px;
}
.arrow-left::after,
.arrow-right::after {
width: 50px;
height: 2px;
}他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
