2023 卯

set

特徴

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

サンプルページ

実装要素

お借りしたもの

素材

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 variants.

カラーセット

カラーセットの使い方

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);
}

スタートアップガイド

更新履歴

  • 2023.01.01
    公開・配布開始
タイトルとURLをコピーしました