インターネット・アカデミー オフィシャルブログ
About

テンプレートを活用して、Bootstrapを使いこなそう!

2016年10月28日

テンプレートを活用して、Bootstrapを使いこなそう!

Twitter社が開発したCSSフレームワーク「Bootstrap」を使えば、素早くカンタンに、レスポンシブデザインのWebサイトを作ることができます。
無料でダウンロードできるテンプレートを使って、より自由にWebデザインを楽しんでみませんか。

Bootstrapのテンプレートを活用してみよう

Bootstrapの魅力の1つが、ナビゲーションメニューやフォームなどのUI(ユーザーインターフェース)の要素が既に定義されていて、手軽に使える点にあります。
また、世界的に人気があり、無料のテンプレートも数多く出回っています。 たとえば、以下のようなサイトがあります。

Start Bootstrap

Start Bootstrap とは

https://startbootstrap.com/

Start Bootstrap」は、都会や自然の風景といった大きなテーマから、デスクやコーヒーなど身近なデザインまで、ビジネスに使いやすいハイセンスなテンプレートです。

Day

Day とは

https://bootstraptaste.com/day-multipurpose-html-template-for-free/

Day」は、ポートフォリオやプロモーションに適した、洗練されたデザインのテンプレートです。$9で購入することができます。

Honoka

Honoka とは

http://honokak.osaka/

このテンプレートは、Bootstrapで日本語をより美しく表示するためにさまざまな工夫がなされています。Bootstrapは日本語表示が最適化されているわけではありませんので、重宝したいテンプレートサイトです。

他にも多くのテンプレートサイトがありますので、テンプレート選びの参考にしてみてください。

テンプレートをダウンロードしてみよう

それでは、各サイトを回ってみて、お気に入りのものを実際にダウンロードしてみましょう。 今回は「Start Bootstrap」のページからテンプレートをダウンロードします。 「Start Bootstrap」のページをスクロールしていくと、「VIEW ALL THEMES & TEMPLATES」というボタンがあるので、クリックします。

すると、「All Templates」という、すべてのテンプレートが見られるページが表示されます。

Start Bootstrap

今回は「Business Casual」というテンプレートをダウンロードしてみます。
まず、一覧の中からコーヒーの画像をクリックし、プレビュー画面に移動します。

テンプレートのプレビュー表示の下部中央、「DOWNLOAD」のボタンがあるのでクリックしましょう。

Zipファイルがダウンロードされますので、ファイルを開きたい場所に移動します。右クリックで「すべて展開」を選択し、次の画面で「展開」を選択します。

無事に解凍されると、ファイルの中身を見ることができます。

トップページに使う「index.html」、会社紹介やプロフィール用の「about.html」、お問い合わせページに用いる「contact.html」、記事の更新に使う「blog.html」の四つのページがあります。 他にもCSSや画像、フォントなどがまとめられたファイルも入っています。
HTMLのファイルにはすでにサンプルのテキストが入っていますので、自分のページに合わせてテキストを書き換えましょう。
これで、すぐにでもアップできる自分だけのサイトが完成しました。

テンプレートのカスタマイズ

ダウンロードしたそのままでは少しつまらないので、手を加えたいという場合の変更方法をご紹介します。

画像の変更をしたい場合

画像はimgフォルダに格納されています。画像を差し替える際には、以下の二つの方法があります。

  • 新しい画像をテンプレートに表示されていた画像のファイル名と同じにして、imgフォルダに追加して上書きする方法。
  • CSS・HTMLの中のリンクファイル名を書き換える方法

レイアウト崩れを防ぐために、サイズは前の画像と揃えておきましょう。

デザインの変更

CSSフォルダ内のファイルを修正することで、デザインの変更も行うことができます。 「Bootstrap Editor」のような、初心者向けのカスタマイズツールを利用してみるのもおススメです。

まとめ

いかがでしたか?
難しい知識なしで、すぐにおしゃれなデザインのホームページが作れるBootstrap。テンプレートを活用して、趣味やビジネスのサイトを作ってみましょう。

インターネット・アカデミーでは、2016年11月25日(金)から、特別講座の「Bootstrap基礎講座」を開講します。「Bootstrap」について、現場で活躍する講師からプロの技を学ぶことができます。
Bootstrapに興味がある方は、ぜひお問い合わせください。

関連リンク

関連ブログ記事

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。

  • このエントリーをはてなブックマークに追加

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

海外支店責任者として、アメリカとインド、日本を行き来する。5年間、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発と普及活動を行ってきた経歴を持つ。

日本の新宿校、渋谷校インストラクター。主にWebマー ケティングとクリエイティブ系の授業を担当。

バンガロール校インストラクター。デジタルマーケティング が専門分野。

Google認定Webマーケティング講座の企画・開発に携わる。「PHPカンファレンス2011」で講演。「PHP公式資格教科書」の執筆など

バンガロール校支店長。Webプロデューサー、インストラクター、エリアマネージャを経て、現在はグローバル展開のビジネスディベロップメントを担当。

「W3C"HTML5 Tour"」での講演や、インド校にてWebデザイナーおよびチーフインストラクターを勤めた経歴を持つ、人気キャリアプロデューサー。

フランスにあるW3CのEUホスト、ERCIM(欧州情報処理数学研究コンソーシアム)に常駐し、Webの研究を行うインド人インストラクター。Webマーケティングに精通している。

テーマテーマ

最新の記事最新の記事

スタッフ別ブログスタッフ別ブログ