インパクトのあるファーストビューが特徴のテンプレート。
特徴
- 大きく配置した写真でインパクトあるファーストビュー
- スクロールでスッキリしたレイアウト
サンプルページ
実装要素
- スクロール可能ブロック
- タイトルと説明(通常 / ラベル・データ横並び / 枠あり)
- フォームセット(input.type=”text”], textarea, submit, 横並びレイアウト・全幅レイアウト)
- メインメニュー(固定)
- リスト(通常 / 数字 / 横並び)
- 一行表示ブロック
- 共通装飾
- 固定ナビゲーション
- 枠線ありブロック
お借りしたもの
素材
![](https://images.unsplash.com/photo-1650075636507-5a12f48d1c29?crop=faces%2Cedges&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjk1ODAyNTY2fA&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 Stephanie Klepacki on Unsplash
Download this photo by Stephanie Klepacki on Unsplash
![](https://images.unsplash.com/photo-1632309543851-acb3446f5669?crop=faces%2Cedges&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjk1ODAyNTY2fA&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 Haitao Dai on Unsplash
Download this photo by Haitao Dai 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: #111;
--bg-color: var(--light-gray);
--required-color: #3700ff;
--white: #fff;
--light-gray: #f1f1f1;
--gray: #e9e7e8;
--gray-op: rgba(233, 231, 232, 0.65);
--theme-color1-light: #f5a404;
--theme-color1-default: #ff6600;
--theme-color1-gray: #dbd1ca;
--theme-color2-gray: #cddbca;
}
スタートアップガイド
更新履歴
- 2023.05.19公開・配布開始