HTML、Sass、bootstrap、jQueryのテンプレ

khiroWebエンジニア(@khiro14726723)です。

Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。

すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。

今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。(本文から引用)

また、Bootstrapの参考書はこちらがおすすめ。僕は、Bootstrapを使ってWebサイトを作る時に辞書的に使ってます。

Bootstrap 4 フロントエンド開発の教科書

それでは、本題に入ります。

サンプルサイト
ki-hi-ro.com

Git hub(ZIpファイルのダウンロード可)
github.com
不要なファイル、画像は削除してご利用ください。
Code → Download ZIP で、ダウンロードができます。

index.htmlを開くとアラートが表示されます。

これは、assets/js/script.js に以下の記述があるからです。

$(function(){
  alert('You can use jQuery');
})

jQueryがすぐに使えるということを示すためのアラートです。
不要かと思うので、削除してご利用ください。

Font Awesomeが使えるように必要なファイルを読み込んであります。

Bootstrapに必要なファイルも読み込んであります。

こちらは、Bootstrapでスタイリングした例

こちらは、Bootstrapのモーダルです。

以下の箇所では、Sassでビューポートに合わせて、テキストと画像が変わるようにしています。

以上、Sass、jQuery、bootstrap、Font Awesomeが備わっているテンプレートの紹介でした。