🎍

お正月だからCSSで門松作った

2023/12/30に公開

CSS

皆様、あけましておめでとうございます。(ちょっと気が早い)

お正月なのでCSSで門松を作りました。
個人的にも良くできたと思うので、こだわりポイントとかを書いていきます。

完成形

↓実際の門松
https://pocopota.github.io/kadomatsu/

↓コード(github)
https://github.com/PocoPota/kadomatsu

こだわりポイント

なんか丸いやつ

background-image:
    radial-gradient(#d42c32 30%, #ffffff00 30%),
    radial-gradient(#d42c32 30%, #ffffff00 30%);
background-size: 34px 34px;
background-position: 8px 9px, 27px 26px;

background-imageの中にradial-gradientを用いて水玉を作り、はみ出す部分をoverflow: hidden;で非表示にしました。
radial-gradientは元々円形のグラデーションを作るプロパティですが、分かれ目をはっきりさせることで水玉を再現しています。
工夫しなければ、玉の数だけHTMLでdivを用意しなければいけませんが、こうすることでdivを1つに、疑似要素を追加するだけでの実装が可能になりました。

https://www.esz.co.jp/blog/2766.html

扇

$ougi-space-deg: 20deg; // $ougi-space-deg <= 90deg
$ougi-div-num: 9;
$ougi-c1: #c9ae37;
$ougi-c2: #aa8003;
$ougi-div-deg: calc((180deg - $ougi-space-deg * 2) / $ougi-div-num);
transform: rotate(-90deg);
border-radius: 50%;
background: conic-gradient(#ffffff00 $ougi-space-deg,
        $ougi-c1 $ougi-space-deg calc($ougi-space-deg + $ougi-div-deg * 1),
        $ougi-c2 calc($ougi-space-deg + $ougi-div-deg * 1) calc($ougi-space-deg + $ougi-div-deg * 2),
        $ougi-c1 calc($ougi-space-deg + $ougi-div-deg * 2) calc($ougi-space-deg + $ougi-div-deg * 3),
        $ougi-c2 calc($ougi-space-deg + $ougi-div-deg * 3) calc($ougi-space-deg + $ougi-div-deg * 4),
        $ougi-c1 calc($ougi-space-deg + $ougi-div-deg * 4) calc($ougi-space-deg + $ougi-div-deg * 5),
        $ougi-c2 calc($ougi-space-deg + $ougi-div-deg * 5) calc($ougi-space-deg + $ougi-div-deg * 6),
        $ougi-c1 calc($ougi-space-deg + $ougi-div-deg * 6) calc($ougi-space-deg + $ougi-div-deg * 7),
        $ougi-c2 calc($ougi-space-deg + $ougi-div-deg * 7) calc($ougi-space-deg + $ougi-div-deg * 8),
        $ougi-c1 calc($ougi-space-deg + $ougi-div-deg * 8) calc($ougi-space-deg + $ougi-div-deg * 9),
        #ffffff00 calc($ougi-space-deg + $ougi-div-deg * 9));

これもさっきと同じようにグラーデーション用のプロパティを使用しています。
conic-gradientも円形グラデですが、さっきの中心から広がるものではなく、中心点の周りを回りながら色が変化させるものです。
角度をちょっと計算して、扇のパーツ分だけゴリ押しで書いてます。

土台

<div id="dodai"></div>
<script>
    const dodai = document.querySelector('#dodai');
    const dodai_width = 150;
    const line_width = 3;
    const num = Math.ceil(dodai_width / line_width);
    for(let i = 0; i <= num; i++){
        dodai.insertAdjacentElement('beforeend', document.createElement('div'));
    }
</script>

ここだけJavaScriptを使用しました。流石に50個のdivは手動で追加する気にはなりませんでした。
50本の細い長方形の要素を追加しました。少し黒っぽくするために、上に灰色の水玉模様を追加しました。ちなみに二重線はborderで太めのdoubleを指定してます。

https://chiiweb.net/media/dot-noise/

葉

border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;

border-radiusって円作る時以外にも活躍するよって話です。

後ろの草

&::before {
    content: '------------------------------------------------------------------------';
    display: block;
    color: #009900;
    transform: scale(4, 1) skewY(-80deg);
    line-height: 3px;
}

ここの部分のアイデアが思い浮かんだ時、少し自分で感動しました。
疑似要素で「-----------------------------------」を追加しました。そしてその横棒の文字列をtransformのscaleで横に4倍伸ばして、skewYで歪ませました。
この細かい線を一つずつ要素追加するのは大変なので、このアイデアを思いついてよかったです。今考えれば土台の線部分もこうすれば楽だったのかなーと思います。

魚の骨を作る時とかにも使えると思うので、是非ご活用くださいませ。

竹の節

この絶妙な孤の表現、説明が難しく拙文になりそうですが。
まず普通のdiv要素に大きめのborder付き円を作ります。その後、疑似要素を上に被せ、疑似要素のサイズを任意のサイズにします。そして疑似要素に対してoverflow: hidden;を付けて完成です。
これをすることで円孤の一部分だけを表示させることができます。