HTML／CSS
Noël
ダウンロード数：15回
QRコードをスマートフォンで読み込むと実機でデモサイトを確認できます。
このテンプレートについて
「Noël」はシンプルなWebページテンプレートです。OSHATEN!で公開した初めてのテンプレートなので、ラテン語の「誕生日」を語源とする「ノエル」と名づけました。
無料
対応済み
自由にカスタマイズOKレイアウト
画面中央のメインコンテンツの幅はスマートフォンの幅に近いため、PCでもスマートフォンでのレイアウトのイメージをしながらWebページを作ることができます。
カスタマイズ
テキストや背景色のカスタマイズはroot.cssで行うことができます。使い方はこちら。
※style.css内での値の適用箇所はダウンロード時点のものです。
Default(Pink)
Preview
root.css
:root {
--color-text: #464646;/* フォントの色 */
--color-base: #edb5b5;/* 背景色 */
--color-pale: #e8e0e8;/* tableの背景色など */
--color-accent: #f0616e;/* 強調色1。リンクの色など */
--color-accent2: #a790bf;/* 強調色2。文章内の強調箇所など */
--color-wh: #fff;
--color-grey: #999;
--color-mgrey: #dddddd;
--color-lgrey: #f0f0f0;
--color-frame: #2f2c23;/* 外枠の線の色 */
--icn-marker: url(../_img/icn_star_wh.png);/* マーカーのアイコン画像 */
--icn-marker2: url(../_img/icn_star_grey.png);/* マーカーのアイコン画像 */
}Variation(Green)
Preview
root.css
:root {
--color-text: #464646;/* フォントの色 */
--color-base: #afcec4;/* 背景色 */
--color-pale: #e8f3f1;/* tableの背景色など */
--color-accent: #47a8a6;/* 強調色1。リンクの色など */
--color-accent2: #fd99a2;/* 強調色2。文章内の強調箇所など */
--color-wh: #fff;
--color-grey: #999;
--color-mgrey: #dddddd;
--color-lgrey: #f0f0f0;
--color-frame: #2f2c23;/* 外枠の線の色 */
--icn-marker: url(../_img/icn_star_wh.png);/* マーカーのアイコン画像 */
--icn-marker2: url(../_img/icn_star_grey.png);/* マーカーのアイコン画像 */
}ダウンロードファイルの内容
HTML
トップページ
| index.html | トップページのサンプル |
下層ページ（「subpage」フォルダ内）
| parts.html | このテンプレートで予めCSSの設定をしてある見出しやリストなどのデザインの一覧 |
| work_gallery_01.html | ギャラリーページのサンプル |
| work_text_01.html | テキストページのサンプル |
CSS
「_css」フォルダ内
| root.css | テキストや背景色の設定 |
| style.css | デザイン用のスタイルシート |
JavaScript
「_js」フォルダ内
| script.js | ハンバーガーメニュー、ページ内リンクのスクロールの動作 |
画像
「_img」フォルダ内
継続して利用をする場合は配布元の規約をご確認ください。
| icn_star_grey.png icn_star_wh.png | 自作 色の変更など、加工は自由に行ってください。 他の素材と組み合わせて画像を作成する場合はその素材の規約に従ってください。 |
| img_user.jpg | プロフィールイメージ画像 配布元：Unsplash |
| sns_01.png sns_02.png sns_03.png | 利用しているSNS・サービスアイコンイメージ画像 画像の一部を加工しています。 配布元：MingCute Icon ※各種SNS・サービスの公式アイコンはダウンロードフォルダに同梱していません。取得についてはこちら |
| work_01.jpg work_02.jpg work_03.jpg work_04.jpg work_thumb_01.jpg work_thumb_02.jpg work_thumb_03.jpg work_thumb_04.jpg | 表示サンプル用画像 ご自分の作品とは区別してください。 配布元：Unsplash |
外部ファイルの読み込み
| jQuery CDN | https://releases.jquery.com/ |
| Google Fonts | Montserrat |
ダウンロードファイルの更新履歴
| Version: 1.0.1 | 軽微な修正 | 2024.12.12 |
| Version: 1.0.0 | リリース | 2024.12.10 |