プログラミングで人生を豊かに楽しく

SCSS+BEMのHTMLテンプレートを公開しました【無料配布】

みやしも WEB制作

こんにちは、みやしもです!突然ですが、今回ぼくは次のような「HTMLテンプレート」を制作し、公開をしました。



▼HTMLテンプレート

  1. WEB DESIGN ・・・ WEB制作をテーマにしたHTMLテンプレート
  2. CORPORATE ・・・ 企業サイト(コーポレートサイト)向きのHTMLテンプレート
HTMLテンプレートのイメージ_1
HTMLテンプレート①「WEB DESIGN」
HTMLテンプレートのイメージ_2
HTMLテンプレート②「CORPORATE」

上記のHTMLテンプレートは、いずれも次のサイトからダウンロードできます。



▼配布サイトはこちら

RAKUDA TEMPLATE

※クリックすると別タブで開きます



▼HTMLテンプレートの特徴

  1. 『SCSS+BEM設計』でコーディングしています
  2. テンプレートには『3つのエディション』を用意しました
  3. WEBサイトの『下層ページ』まで作り込んでいます
HTMLテンプレートはいずれも無料でダウンロードできますよ!

そこで今回は、上記の「HTMLテンプレート」の特徴や、開発言語・ツールなどの技術的な要素を解説。このほか制作した理由や苦労したポイントなど、背景的なことも紹介してゆきます。



▼この記事はこんな方向け

  • SCSSで書かれた「HTMLテンプレート」を探している方
  • HTML&CSSなどのフロントエンド技術に興味がある方
  • サイト制作や個人開発について興味がある方



▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスのみやしもです。WEB制作・システム開発などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

HTMLテンプレートの特徴を紹介する

配布サイトやHTMLテンプレートの内容について

HTMLテンプレートとはWEBサイトに使用するHTML・CSSファイルをあらかじめまとめた「ひな形」のことですが、今回制作したHTMLテンプレートには次のような特徴があります。



▼テンプレートの特徴

  1. 『SCSS+BEM設計』でコーディングしています
  2. テンプレートには『3つのエディション』を用意しました
  3. WEBサイトの『下層ページ』まで作り込んでいます
それぞれ順番に解説してゆきます!

特徴①:『SCSS+BEM設計』でコーディングしています

HTMLテンプレートは、Sass(SCSS)+BEM設計にもとづいてコーディングをしています。



テンプレートに含まれるHTML・CSSのコードは、いずれもWEB制作で標準的になりつつあるメタ言語の『Sass(SCSS)』を、コードの可読性・メンテナンス性に役立つ『BEM設計』を前提にコーディングしています。

もちろん各HTMLテンプレートには『Sassのコード一式』も含まれています。
SCSSのコード一式
SCSSのコード一式
これからSassを学習する・SCSSの書き方が知りたい。といった方にもおススメできるHTMLテンプレートです!

特徴②:テンプレートには『3つのエディション』を用意しました

各HTMLテンプレートには構成やページ数の異なる3つのエディションを用意しました。たとえば、冒頭でも紹介した「WEB DESIGN」のテーマでは、次のエディションが選べる様になっています。



▼「WEB DESIGN」のエディション3つ

エディション①

ページ数:1P(シングルページ)
ページ構成:トップページ

デモサイト:WEB DESIGN - Edition.1

エディション②

ページ数:8P
ページ構成:トップページ/制作実績一覧・詳細/ブログ一覧・詳細/自己紹介/お問い合わせ
デモサイト:WEB DESIGN - Edition.2

エディション③

ページ数:10P

ページ構成:トップページ/新着情報一覧・詳細/制作実績一覧・詳細/制作料金/ブログ一覧・詳細/自己紹介/お問い合わせ

デモサイト:WEB DESIGN - Edition.3

このためにも各テンプレートをダウンロードする際には、サイト制作の用途・規模感に合わせた好きな構成から選択することが可能です。
配布サイトには「プレビュー」もあります。ぜひ目的に合ったテンプレートを探してみて下さいね!

特徴③:WEBサイトの『下層ページ』まで作り込んでいます

本HTMLテンプレートの内容は、例えば『サービス』や『制作実績』といったWEBサイトの「下層ページ」の部分までしっかり作り込んであります。

WEBサイトの『下層ページ』まで作り込んでいます
下層ページの内容は”ブロック単位”でコーディングしています。このためにも『テンプレートのこの部分だけ欲しい!』といった、部品取りのような使い方も出来ます。
今後もバリエーションを増やしてゆきたいと思っています!

どうやって作ったの?技術的なポイントを解説する

どうやって作ったの?技術的なポイントを解説する

ここからは「HTMLテンプレート」の開発で採用した技術やツールについて、詳しく解説をしてゆきます。

HTMLテンプレートやWEBサイトはどうやって作ったの?と気になる方には参考にして頂きたい内容です。

開発言語・ツールについて

今回の制作物の開発言語は以下の様になります。



▼開発言語

  • HTML&CSS、JavaScript(ES6)
  • EJS、Sass(SCSS)
  • PHP(※配布サイトの一部に使用)



上記の開発言語を扱うツールとしては、以下の様になっています。



▼開発ツール

  • OS:Windows10
  • エディタ:Visual Studio Code
  • ローカル環境:XAMPP(Apache+PHP)
  • ビルド環境:Gulp(EJS、Sass)
  • その他:GitHub、Adobe XD



Windows10を開発機にして、ローカル環境には「XAMPP」を、エディタには「Visual Studio Code」をそれぞれ使用しています。

HTMLテンプレートをビルドには『Gulp』を前提にして、テンプレートエンジンに「ejs」を、SCSSのコンパイラに「gulp-sass」をそれぞれ利用しています。

HTMLテンプレートの「配布サイト」について

HTMLテンプレートの制作に合わせて「配布サイト」も用意しました。



▼配布サイトはこちら

RAKUDA TEMPLATE

※クリックすると別タブで開きます



配布サイトも「HTMLテンプレート」と同じ水準で制作をしており、部分的にはPHPも使用しています。また、配布サイトの公開場所にはエックスサーバーを利用しています。



デプロイにはGitHub(+Webhook)・シェルスクリプト・シンボリックリンクなど、サーバーに関する仕組みもいくつか利用していますが、いずれもエックスサーバーのようなレンタルサーバー上で出来る範囲の作業でした。このためにも今回は、そのまま自分が契約しているサーバーを利用する形となりました。

結果的にランニングコストを抑えることが出来たと思います。

何でこれ作ったの?制作のきっかけや背景について語る

何でこれ作ったの?制作のきっかけや背景について語る

今回の『HTMLテンプレート』の制作のきっかけ、理由としては次のことがあります。



▼HTMLテンプレート制作の理由

  1. 基礎的なHTML・CSSのコードをまとめたかった
  2. ブログ記事で使用する「サンプル」が必要だったから

理由①:基礎的なHTML・CSSのコードをまとめたかった

ぼくは「WEB制作」や「ブログ運営」をしているフリーランスですが、仕事がらHTML・CSSをさわる機会は多くの場面であります。ほぼ毎日さわっていると思いますし、時には人に教える事もあります。



そんな僕にとって、テンプレには効率化・時短を目的とした一定のニーズがありました。



今回は個人的に、まとめておきたかったこと、仕事が落ち着いたタイミングがあったことから、HTMLテンプレートの制作に着手することとしました。

この上では、どうせなら実用的に...。再利用が可能で...多くの用途に耐え...。とアイデアを重ねてゆき、先にも紹介したテンプレートの仕様となりました。
実用性を考えると、SCSS+BEM設計は外せない条件でもありました。

理由②:ブログ記事で使用する「サンプル」が必要だったから

当ブログではWordPressの「オリジナルテーマ」の作り方に関する発信もしています。



WordPressの記事一覧



各記事では作業内容を解説するための「HTML&CSSサンプル」が必要になりますが、とはいえ記事ごとに用意するのも一苦労でした。そこで、『いっそのこと先に作り込んでしまおう!』という風に思いました。

ブログで使うのだから配布が前提になる...ならば、いっそのこと専用サイトも用意してしまおう!と思い、配布サイトも作りました。
他の発信者の方にも『サンプル』として利用して頂けたら嬉しく思います!

HTMLテンプレートの開発で苦労したところ

このほか、『HTMLテンプレート』の制作にあたって、難しいと感じた事・苦労した所にも触れてゆきます。

ふろしきを広げすぎた!まとめるのが大変に!

ここまで読んで頂いた方であれば感じている方もいると思いますが、ずばり、HTMLテンプレートに色々な要素を盛り込み過ぎました。

結果として、3エディションある各テーマごとの内容・導線について整合性をとる作業のために、沢山の時間を使ってしまいました。
ぶっちゃけコードを書くより、構成する作業全般が大変でした。。

良かれと思ってノリノリで仕様を詰め込みましたが、少なくとも初めはもっとコンパクトにすべきだったと感じています。

苦労もしましたが、最終的にはどのエディションを選択しても整合性のあるテンプレートに出来たとも感じています。

この記事のまとめ

この記事では、当ブログ管理人のみやしもが制作した「HTMLテンプレート」の特徴を紹介。このほか開発言語・ツールなどの技術的な要素についても解説を行いました。



▼配布サイトはこちら

RAKUDA TEMPLATE

※クリックすると別タブで開きます



配布中のテンプレートはすべて無料で利用できますので、「HTMLテンプレート」をお探しの方はこの機会にぜひご利用くださいませ。このほか気になることがあればTwitter、もしくはお問い合わせから、お気軽にお問い合わせ下さい。

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事