2023 卯

画面いっぱいに配置したトップ画像が印象的なテンプレート。

demo document download

OFUSEでメッセージを送る

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

特徴

背景に画像を使用した、存在感あるタイトルエリア
縦書きを取り入れた見出しデザイン

サンプルページ

実装要素

お借りしたもの

素材

Photo by Lily Li on Unsplash

Download this photo by Lily Li on Unsplash

アイコン

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を書き換えるとカラーセットが反映されます。

#ecece4
#909391
#9c7450

:root {
    --text-color: #333;
    --bg-color: var(--theme-color1-light);
    --required-color: var(--theme-color2-default);
    --white: #fff;
    --white-op: rgba(255, 255, 255, 0.25);
    --theme-color1-light: #ecece4;
    --theme-color1-default: #909391;
    --theme-color1-default-op: rgba(144, 147, 145, 0.25);
    --theme-color2-default: #9c7450;
    --theme-color2-default-op: rgba(156, 116, 80, 0.25);
}

サンプル使用画像

#98a7b2
#3c7c84
#b36029

:root {
    --text-color: #333;
    --bg-color: var(--theme-color1-light);
    --required-color: var(--theme-color2-default);
    --white: #fff;
    --white-op: rgba(255, 255, 255, 0.25);
    --theme-color1-light: #98a7b2;
    --theme-color1-default: #3c7c84;
    --theme-color1-default-op: rgba(60, 124, 132, 0.25);
    --theme-color2-default: #b36029;
    --theme-color2-default-op: rgba(179, 96, 41, 0.25);
}

サンプル使用画像