【CSS】和風のあしらい一覧
寺田拓真約5分で読めます
はじめに
この記事の概要
みなさん、こんにちは！
サイトのデザインやコーディングを行う上で、あしらいに悩むことはありませんか？
文字や余白、レイアウトなどである程度のデザインを作ることはできるけど、
それだけだと何か物足りない感がある、、
そんなときには、ちょっとしたあしらいが便利ですよね！
ただ、サイトの雰囲気にあったあしらいが分からない、、ということは多いかと思います！
そこで、今回は使えそうなあしらいを紹介します！
この記事では特に和風テイストに合ったものを紹介するので、
和風サイトや上品なサイトを制作される方はぜひ御覧ください！
対象読者
- CSS初学者の方
- あしらいにお悩みの方
- 和風テイストのサイトを制作されている方
線を使う
線を使ったあしらいは、容易にコーディングが可能でありながら、洗練された印象を与えるため重宝します。
見出しにも使えるし、線単体でも使うことができるので、ぜひお試しください。
テキストの両端に線をつける
完成形はこちらです。
コードは以下になります。
<h2 class="heading">あしらい</h2>.heading {
display: flex;
align-items: center;
font-size: 20px;
color: #000;
&::before,
&::after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #000;
}
&::before {
margin-right: 1rem;
}
&::after {
margin-left: 1rem;
}
}ポイントは、flex-grow: 1と設定することで横線を幅いっぱいにまで広げることができます。
線を短くしたい場合は、flex-grow: 0.2など数字を小さくすることで可能です。
テキストの右端（左端）に線をつける
完成形はこちらです。
上記の両端に線をつける見出しと同じ要領で作っていきます。
コードは以下になります。
<h2 class="heading">あしらい</h2>.heading {
display: flex;
align-items: center;
&::after {
border-top: 1px solid;
content: "";
flex-grow: 1;
display: block;
height: 1px;
margin-left: 1rem;
}
}margin-leftをmargin-rightに変えることで、左端に線をつけることも可能です。
◯を使う
◯はやわらかい雰囲気になりがちですが、少し工夫することで和風の雰囲気に合ったあしらいを作ることができます。
二重丸の中にテキストを入れる
完成形はこちらです。
ポイントは内側の丸の幅を外側よりも太くすることです。
コードは以下になります。
<div class="c-double-circle">
<p class="c-double-circle__text">あしらい</p>
</div>.c-double-circle {
width: 70px;
height: 70px;
position: relative;
border: solid #000 1px;
border-radius: 50%;
box-sizing: border-box;
margin: 8px auto 0;
}
.c-double-circle::before {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 4px;
left: 4px;
border: solid #000 1.5px;
border-radius: 50%;
box-sizing: border-box;
}
.c-double-circle__text {
font-size: 12px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}疑似要素で内側の丸を作っています。
青海波を使う
青海波（せいがいは）は名前は知らなくても見たことは多いかと思います。
見出しにワンポイントで付けるのもいいですし、ループさせて大胆に背景にするのもいいかもしれません。
<div class="seigaiha"></div>.seigaiha {
width: 300px;
height: 300px;
background-color: #c44e37;
background-image:
radial-gradient(circle at 100% 150%, #c44e37 24%, #fff 24%, #fff 28%, #c44e37 28%, #c44e37 36%, #fff 36%, #fff 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #c44e37 24%, #fff 24%, #fff 28%, #c44e37 28%, #c44e37 36%, #fff 36%, #fff 40%, transparent 40%, transparent),
radial-gradient(circle at 50% 100%, #fff 10%, #c44e37 10%, #c44e37 23%, #fff 23%, #fff 30%, #c44e37 30%, #c44e37 43%, #fff 43%, #fff 50%, #c44e37 50%, #c44e37 63%, #fff 63%, #fff 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, #fff 5%, #c44e37 5%, #c44e37 15%, #fff 15%, #fff 20%, #c44e37 20%, #c44e37 29%, #fff 29%, #fff 34%, #c44e37 34%, #c44e37 44%, #fff 44%, #fff 49%, transparent 49%, transparent),
radial-gradient(circle at 0 50%, #fff 5%, #c44e37 5%, #c44e37 15%, #fff 15%, #fff 20%, #c44e37 20%, #c44e37 29%, #fff 29%, #fff 34%, #c44e37 34%, #c44e37 44%, #fff 44%, #fff 49%, transparent 49%, transparent);
background-size: 50px 25px;
}ひし形を使う
ひし形も見出しに使ったり、ループさせたりでき、かなり使用の幅のあるあしらいです。
<div class="hishigata"></div>.hishigata {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: "Noto Serif JP", serif !important;
font-weight: bold;
margin: 1em auto;
}
.hishigata:before {
content: " ";
display: inline-block;
width: 18px;
height: 18px;
background-color: #ccc;
transform: rotate(45deg);
margin-bottom: 0.3em;
}梅の花を使う
これぞ和風といったあしらいです。
見出しやワンポイントで使うことをおすすめします。
<div class="ume"></div>.ume {
display: inline-block;
width: 50px;
height: 50px;
background-image: radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0), radial-gradient(#e7556a 25%, transparent 0);
background-position:
50% 0,
5% 40%,
95% 40%,
23% 95%,
78% 95%;
background-size: 30px 30px;
background-repeat: no-repeat;
}梅の花を使う 別パターン
和菓子でよく見かけるような梅の花もCSSで作成可能です。
<div class="ume"></div>.ume {
display: inline-block;
width: 40px;
height: 40px;
background-image:
radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)), radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)), radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px)),
radial-gradient(circle, transparent 50%, #e6c619 50%, #e6c619 calc(50% + 2px), transparent calc(50% + 2px));
background-position:
50% 0,
5% 40%,
95% 40%,
23% 95%,
78% 95%;
background-size: 20px 20px;
background-repeat: no-repeat;
margin-bottom: 5px;
}おわりに
今回は、和風のあしらいについて紹介しました！
コードはどれもコピペで実装できると思いますので、ぜひ和風のあしらいでお悩みの際はご使用ください。
この記事を書いた人
