Pukuri

demo document download

OFUSEでメッセージを送る

特徴
1. サンプルページ
2. 実装要素
お借りしたもの
1. アイコン
カラーセット
スタートアップガイド
更新履歴

特徴

まるみと余白を大きくとった、柔らかいシルエット
動きのあるアイテム

サンプルページ

実装要素

お借りしたもの

アイコン

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...

カラーセット

カラーセットの使い方

style.css内の:root内でカスタムプロパティによる色設定を行っています。
:rootを書き換えるとカラーセットが反映されます。

#a08fd5
#ccc3e8
#f3f1f1
#f8f6f6
#c7b928
#f5e866
#edc7c7

:root {
    --white: #fff;
    --text-color: #494340;
    --text-point-color: #ccc3e8;
    --menu-color: #f5e866;
    --bg-color1: var(--theme-color1-light);
    --bg-color2: var(--theme-color1-more-light);
    --theme-color1-more-light: #f8f6f6;
    --theme-color1-light: #f3f1f1;
    --theme-color1-default: #a08fd5;
    --theme-color2-default: #c7b928;
    --theme-color3-default: #edc7c7;
}

スタートアップガイド

Get Started

テンプレートの使い方。スタートアップガイド。

更新履歴

2022.11.22
公開・配布開始
2022.12.22
要素・サンプルの追加
- 枠線ブロック(.box)追加
- スクロール可能ブロック(.scrollbox)追加
- 一行表示ブロック(.onlyrow)追加
- 各種コンテンツサンプル追加
2023.02.07
SNS Iconのリンクが正常に表示されない問題の修正
2023.02.13
下部固定リンクが正常に表示されない問題の修正