ISSEN 
はじめに
この記事の概要
みなさん、こんにちは！
サイトのデザインやコーディングを行う上で、あしらいに悩むことはありませんか？
文字や余白、レイアウトなどである程度のデザインを作ることはできるけど、
それだけだと何か物足りない感がある、、
そんなときには、ちょっとしたあしらいが便利ですよね！
ただ、サイトの雰囲気にあったあしらいが分からない、、ということは多いかと思います！
そこで、今回は使えそうなあしらいを紹介します！
この記事では特に和風テイストに合ったものを紹介するので、
和風サイトや上品なサイトを制作される方はぜひ御覧ください！
対象読者
- 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;
}
&::after {
margin-left: 1rem;
}
}
margin-leftをmargin-rightに変えることで、左端に線をつけることも可能です。
付箋のような見出しを作る
数種類の幅の線を組み合わせることで和風な付箋を作ることもできます。
<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;
}
}
線の幅を変えることで、様々な付箋を作ることが可能です。
◯を使う
◯はやわかい雰囲気になりがちですが、少し工夫することで和風の雰囲気に合ったあしらいを作ることができます。
二重丸の中にテキストを入れる
完成形はこちらです。
ポイントは内側の丸の幅を外側よりも太くすることです。
コードは以下になります。
<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="hisigata">
</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:.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;
}
おわりに
今回は、和風のあしらについて紹介しました！
コードはどれもコピペで実装できると思いますので、ぜひ和風のあしらいでお悩みの際はご使用ください。
最後に、HTMLやCSSについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方にもわかり易い言葉で丁寧に説明がされているので、とても参考になります！
