画面いっぱいに配置したトップ画像が印象的なテンプレート。
特徴
- 背景に画像を使用した、存在感あるタイトルエリア
- 縦書きを取り入れた見出しデザイン
サンプルページ
実装要素
- スクロール可能ブロック
- タイトルと説明(通常 / ラベル・データ横並び / 枠あり)
- フォームセット(input.type=”text”], textarea, submit, 横並びレイアウト・全幅レイアウト)
- メインメニュー(固定)
- リスト(通常 / 数字 / 横並び)
- 一行表示ブロック
- 共通装飾
- 固定ナビゲーション
- 枠線ありブロック
お借りしたもの
素材
![](https://images.unsplash.com/photo-1583868601569-ef6014be81a0?crop=faces%2Cedges&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjk2MjQ3MTE1fA&ixlib=rb-4.0.3&q=60&w=1200&auto=format&h=630&mark-w=64&mark-align=top%2Cleft&mark-pad=50&blend-mode=normal&blend-alpha=10&blend-w=1&mark=https%3A%2F%2Fimages.unsplash.com%2Fopengraph%2Flogo.png&blend=000000)
Photo by Lily Li on Unsplash
Download this photo by Lily Li on Unsplash
アイコン
![](https://i-ra.site/wp-content/uploads/cocoon-resources/blog-card-cache/9bc552cbac156382646d7c4bc173561a.jpg)
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
を書き換えるとカラーセットが反映されます。
: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);
}
: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のリンクが正常に表示されない問題の修正