HTMLコーディングのテンプレートファイルを使って作業を効率化！！
Contents
こんにちはゆうきです！
今回はHTML / Sass / JavaScriptのテンプレートファイルを作成しました！
今回の記事はこんな方向けです。
・個人でWebサイトのコーディングをしている
・Sassの勉強をしている
・毎回必要なパーツを定義するのが面倒
・ディレクトリ構造を考えるのが大変
・しばらくコーディングしてなくて感覚忘れてしまった
※注. VSCodeを使用しています。
Sassの基本知識とLive Sass Compilerのインストールが必要です。
ファイルのダウンロードはこちら
- Githubの「Code」ボタンをクリックし、“Download ZIP” からファイルをダウンロードしてください。
- zipファイルを解凍し、VSCodeにドラッグしてコーディングを開始できます。
- 「Readme」ファイルにLive Sass Compiler でcssのコンパイル先を指定する方法について記載してあります。
以下のファイル構成になっております
HTML
htmlファイルは以下のようになっています。
- index.html (基本ファイル)
- includeフォルダ
- header.html
- footer.html
index.html内構造
<head>
meta / ogp / favicon / icon / css読み込み
</head>
<body>
container / header / main / footer / JQuery読み込み
</body>
必要最低限なタグとJQueryの読み込みは実装しております。
※注. 見た目を整えるために常にBEMを使用したclass名が付いています。
includeフォルダ
header.html / footer.htmlを格納しております。
ヘッダーとフッターはJavaScriptで共通読み込みしておりますので、リンクやclass名を修正するときにはこちらのファイルだけ修正すれば全ページに適用できます！
共通パーツのインクルード読み込みは「Web Note」さんをご参考にさせていただきました。
CSS
styleフォルダの構成は以下のようになっています。
- cssフォルダ
- style.css（※注. style.cssはいじらないでください！）
- scssフォルダ
- baseフォルダ
- _base.scss
- _reset.scss
- componentフォルダ
サイトで使用するパーツを格納（button / table / blog-cardなど） - configフォルダ
変数や関数、メディアクエリなどの設定パーツを格納- _font.scss
- _function.scss
- _mq.scss（メディアクエリ）
- _variables.scss
- mixinフォルダ
- _animation.scss
- mixin.scss
- moduleフォルダ
構成パーツを格納（sidenavなど）- _header.scss
- _footer.scss
- _global-nav.scss
- pageフォルダ
各ページごとのスタイリングを格納（about / works / contactなど）- _top.scss
- style.scss
各scssのパーツ（_header / _footerなど）はstyle.scss内で読み込みます。
- baseフォルダ
Live Sass Compiler先の指定
Sassの記述にあたってVSCodeのLive Sass Compilerを使用していますので、VSCodeをダウンロードしてください。
Live Sass Compilerの使用方法と設定
①. VSCodeの”拡張機能” から 「Live Sass Compiler」をインストールして有効化
②. 「管理（歯車アイコン）」から「拡張機能の設定」をクリック
③ “Live Sass Compile › Settings: Formats” の 「settings.jsonで編集」をクリック
④. クリックするとScssのコンパイル先のフォーマットが表示されます。この中身のフォーマットを以下のように変更してください。
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css",
"savePathReplacementPairs": null
}
],style.css
Scssでコンパイルされたcssが書き出されます。
※注 style.cssに直接スタイリングを記述しないようにしてください。
Scssファイル
全てのファイルに “@use” による各Scssファイルの読み込みは実装済みです。
新しくScssファイルを作成し、別のファイルにその内容のスタイリングを指定したいときには @use を使用し適宜読み込んでください。
@useに関する詳しい内容に関しましては、こちらの記事を参考にしてください。
style.scss
base / component / config / mixin / module / page の各フォルダのscssは全てここで読み込みますので、新規のscssファイルを作成した際には、こちらにも必ず定義するようにしてください。
baseフォルダ
_base.scss
html / body / img / li / a などの基本CSSを設定済み
※注. mainのcss指定は使用時に削除してください。
.main {
height: 480px;
}_reset.scss
タグに対しブラウザによってデフォルトでついているCSSを解除するリセットCSSです。
今回使用させていただいているリセットcssは「destyle.min.css」を使用しています。
使い慣れているリセットCSSを使う際はこちらのコード内のcssを適宜書き換えてください。
configフォルダ
_font.scss / _function.scss
Font-Familyやサイズなどのフォントの仕様を定義しています。
_fuction.scssにはフォントの変化をvw（ビューポート）単位で変動する指定を@soundweaver(Norihiko Takami)さんの記事をご参考に実装しています。
”responsiveFontSizeClamp(最小フォントサイズ,最大フォントサイズ,最小ウィンドウサイズ,最大ウィンドウサイズ)”
_mq.scss
基本的なメディアクエリとデバイスによる表示・非表示のclassを定義しています。
mixinを使用したメディアクエリの記述方法について「Free Style」様の記事を参考にさせていただいております。
_vairables.scss
カラーなどの変数を定義しています。
- サイト基本カラー（ベース / メイン / アクセントなど）
- 白黒カラー
- ボタンカラー
- 罫線（ボーダー）
mixinフォルダ
上記の基本的なカラー変数は常に定義しておりますので、デザインに合わせて色や変数名を変えてください。
_animation.scss
サイト内で使用するアニメーションの全体的なデフォルトをmixinを使い定義しています。
animationを定義する際の「animation-〇〇」のようなハイフン前の文言(animation)を定義しなくて済むようになっています。
使用方法
事例.フェードイン “fadein”に対するアニメーションを定義
.fadein {
@include fadein {
$name: is-fadein;
$fill-mode: backwards;
$duration: 3s;
$iteration-count: infinite;
$timing-function: ease;
$delay: 0.5s;
$direction: normal;
}
@keyframes is-fadein{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
_mixin.scss
mixinにはページ内で頻繁に使用するパーツを定義し、他のscssファイルで使い回すことができます。
セクションの最大横幅（max-width: 1280px）とコンテンツ内での最大横幅（max-width: 960px）を定義しています。
以下のmixinを使用すると1400pxでコンテンツの可変が止まり、タブレット画面（768px）まで横スクロールになります。当サイトではこちらの横幅を指定しています。
/* ==================================================
画面最大幅（PC画面をレスポンシブ対応させないための横幅）
================================================== */
@mixin minWidth {
min-width: 1400px;
}_module.scss
header / footer / global-nav / side-nav などのページ構成パーツを定義しています。
デフォルトでデザインを指定していますので、デザインに合わせて組み替えてください。
pageフォルダ
top / about / works / blog などの個別ページのスタイリングに使用します。
JavaScript
common.js
JavaScriptのプログラムを記述します。
インクルード読み込みによる共通ヘッダーとフッターの読み込みをあらかじめ定義しています。
まとめ
HTMLコーディングのテンプレートファイルのダウンロードと構成について解説しました。
- 毎回必要なパーツを定義するのが面倒
- ディレクトリ構造を考えるのが大変
- しばらくコーディングしてなくて感覚を忘れてしまった
という方々におすすめのベースコーディングファイルになっておりますので、ぜひ試してみてください。
ファイルは都度更新していく予定なので、より皆様が使用しやすくなるよう改良を加えていきます！
長くなりましたが、最後までご覧いただきありがとうございました！
コーディング時間の短縮で、より充実したWebサイトが作れることを応援しております！
