画面いっぱいに配置したトップ画像が印象的なテンプレート。
特徴
- 背景に画像を使用した、存在感あるタイトルエリア
- 縦書きを取り入れた見出しデザイン
サンプルページ
実装要素
- スクロール可能ブロック
- タイトルと説明(通常 / ラベル・データ横並び / 枠あり)
- フォームセット(input.type=”text”], textarea, submit, 横並びレイアウト・全幅レイアウト)
- メインメニュー(固定)
- リスト(通常 / 数字 / 横並び)
- 一行表示ブロック
- 共通装飾
- 固定ナビゲーション
- 枠線ありブロック
お借りしたもの
素材
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 ...
カラーセット
- #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公開・配布開始
- 2023.02.07SNS Iconのリンクが正常に表示されない問題の修正