Bootstrapのテンプレート「Canvas」の使い方【爆速コーディング可能】

CODE

Twitter社が開発したCSSフレームワーク「Bootstrap」のテンプレートを使ったLP制作の解説記事です。

今回は「Canvas」というテンプレートを使ってみました。
ただ、英語のサイトなので試行錯誤しましたが、使い方がわかれば便利すぎるテンプレートなので、初心者におすすめです。

本記事の内容
  • 事前に知っておくべきこと
  • 「Canvas」の使い方
  • 制作中のLPを紹介

この記事を書いている私は、「30DAYSトライアル」がきっかけでコーディングの勉強を始めました。

30DAYSトライアルの課題で、Bootstrapのテンプレートを使用したLP制作があります。
そこで、私はおすすめされていた「Canvas」のテンプレートを使ってみました。

「30DAYSトライアルって何?」って方はこちらからどうぞ。

30DAYSトライアルの始め方!
この記事では、30日でプログラミングスキルが身に付く「30DAYSトライアル」の始め方を紹介していきます。 目次 1. 30DAYSトライアルの概要2. 副業で月5万円稼げるようになりたい3. プログ

個人で稼ぐ力を身に付けたい方は、ぜひチェックしてみてください。

スポンサーリンク

事前に知っておくべきこと

事前に知っておくべきこと

実際にテンプレートを使用する前に、事前に知っておくべきことをいくつか解説します。

 

「Canvas」とは?

実際にサイトを見てもらった方が早いと思います。

「Canvas」のサイトを見てみる

「Live Preview」で見てもらうとわかりますが、かなりたくさんのテンプレートがあります。

そして、すべてのテンプレートが16$で買えるので、かなりお得です。
多すぎて、逆に迷ってしまうほど。

無料のテンプレートを配布しているサイトもありますが、質が全然違います。

私自身、ケチって一度は無料のテンプレートを使いました。
あとからCanvasを購入して、なぜ早く買わなかったのかと後悔するほどでした。

 

「Canvas」を使用するための基礎知識

最低限のコーディングの知識は必要です。

  • HTML
  • CSS
  • Bootstrap

以上の知識があればOKです。

これは先ほど紹介した「30DAYSトライアル」で1か月もかからずに習得できますよ。

 

「Canvas」を使用するための注意点

1サイトにつき、1ライセンス必要です。
つまり、テンプレートを使ってサイト制作する場合は、毎回買う必要があるということです。

ただ、LP制作の案件を受注できれば元を取れるので、ここは問題なしですね。

 

「Canvas」の使い方

「Canvas」の使い方

では、実際の使い方を解説していきます。

 

購入 → ダウンロード

Canvasのサイトから「Buy Now」をクリック。

購入手続きが終了したら、ダウンロードできるようになります。
そして、ダンロードしたZipファイルを解凍すれば完了です。

ファイルを開いてみると、かなりの量のテンプレートが入っています。

詳しくは、「Package-HTML」→「Documentation」→「index.html」を開くと使い方がわかります。
※英語で書かれていますが、日本語翻訳すれば問題なく使えます。

 

コーディング

ダウンロードが完了したら、コーディングに入っていきます。

テンプレートをそのまま使う場合

テキストエディタで、

  • テキストの書き換え
  • 画像の変更

をすれば、あっという間にLPの完成です。コーディングの知識があれば簡単ですよね。

ただ、注意点があります。

  • CSSの読み込み
  • JavaScriptの読み込み

以上を忘れないようにしましょう。
CSSが効かなかったり、動きのないサイトになってしまいます。

何のファイルが必要かは、実際にHTMLのコードを見ればわかります。

CSSの場合は、headタグ内を見てください。

この写真の場合は、四角で囲んだファイルをcssフォルダに入れておけばOKです。

JavaScriptの場合は、bodyの閉じタグの直前を見てください。

四角で囲んだファイルがjsフォルダに入っていればOKですね。

テンプレートによって読み込むファイルが違うので、気をつけてください。

テンプレートを探す際のヒント

HTMLファイルが多すぎて、Canvasのサイトで見たテンプレートを探すのが大変に感じるかもしれません。
そんな時は、デモページのURLにヒントがあります。

例えば、下記のページ。

このHTMLを使いたいと思ったら、「index-portfolio.html」を探せばOKということです。

これをエディタにドラッグ&ドロップで完了です。簡単ですよね。
この方法に気づくまで、htmlを開いては閉じて、という無駄な作業をしていました…

複数のテンプレートを組み合わせて使うことも可能

  • ヘッダーはこのテンプレートを
  • メインはこっちのテンプレートを
  • フッターはまた別のテンプレートを

という具合に、複数のテンプレートの組み合わせも可能です。
いろいろ試してみると楽しいですよ。

これで完成です\(^o^)/

 

制作中のLPを紹介

独学半年で、Canvasのテンプレートを使って、こんな感じのLPができました。
※未完成なので、出来上がったらまた載せますm(_ _)m

 

まとめ

以上が、Bootstrapのテンプレート「Canvas」の使い方でした。

慣れてしまえば爆速でコーディングできるようになるので、とても便利です。

また、初心者でもそれなりのWebサイトを作れるので自信になりますよ。

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

コメント

  1. sym より:

    Canvasの使い方がググっても中々見つからなかったので、
    大変参考になりました。

    • わや より:

      なんとも嬉しいお言葉、ありがとうございます。
      私もCanvasを購入した後に使い方がわからなくて苦戦したので、記事にしてみました。

タイトルとURLをコピーしました