BootstrapでWeb初心者でも簡単におしゃれなWebサイトが作れる

Bootstrapとは？

Twitter社で開発されたHTMLやCSSの知識が多少あればWebデザインの知識がなくてもデザイン性の高いWebサイトが作れるCSSフレームワークです。

レスポンシブデザインにも対応しているので、デスクトップPC、スマホ、タブレットでも画面に合わせて自動的に表示できます。

ライセンスはMIT Licenseのオープンソースで商用利用することができます。

Bootstrapの基本的な使い方

1. Bootstrapを開いて、「Download Bootstrap」をクリックして必要なファイルをダウンロードします。
   
   
   


2. Download Bootstrapをクリックします。「css」、「fonts」、「js」のフォルダで構成されたファイルがダウンロードされます。
   
   
   


3. この状態ではHTMLファイルがないので以下からサンプルのテンプレートをコピーします。「copy」をクリックするとコピーできますので「index.html」というファイル名で保存します。
   
   
   


4. 先ほどダウンロードしたcssと同じ場所にindex.htmlファイルを配置します。
   
   
   


5. 「Hello,world!」が表示できました。
   
   

今回はサンプルのテンプレートでしたが、次に紹介するようなテンプレートを利用することでデザイン性の高いサイトも構築することができます。

Bootstrap公式テンプレート

Bootstrap公式テンプレート

Bootstrapでは公式のテンプレートが配布されています。このテンプレートをダウンロードして利用することで、多少HTMLやCSSの知識があればカスタマイズを簡単にすることができます。

おすすめBootstrapテンプレート

Agency

HTML5のシンプルなデザインなので使い勝手が良いです。無料の会員登録でダウンロード可能です。

Gumba

シンプルですがスタイリッシュなテンプレートです。HTML5、CSS3で無料で利用可能です。

Honoka

日本語を美しく表示することにこだわったテンプレートです。

Start Bootstrap

ブログやランディングページなどさまざまテンプレートが公開されています。

種類が豊富なので必要なテンプレートが見つかるかと思います。全て無料で利用できます。

Designstub

ミニマルなデザインのテンプレートです。洗練されたデザインばかりです。無料で利用することができます。

Bootstrapを使ったWordPressテーマ（テンプレート）

Lightning

Lightning

無料で商用利用可能な日本語のテーマです。シンプルで簡単に設定でき、サイト訪問者にもユーザーにも優しいテーマになっています。企業や店舗などのホームページに必要な要素・仕様・構成設定できます。

有料拡張デザインスキンを使うことで無料テーマの設定をそのままに異なったデザインのものも作れます。100%GPLライセンスです。

有料拡張デザイン:Lightning Variety

Copyrightを外すことができる：Lightning Copyright Customizer

LIQUID PRESS

最新のBootstrap4対応。簡単に構築できる日本語のテーマです。

オウンドメディア・マガジンサイトやコーポレートサイト、コーポレートサイトなどいろんな種類の向けのテーマ（テンプレート）があります。レスポンシブ対応で、管理画面のカスタマイザーから簡単にカスタマイズができます。

有料テーマで商用利用可能、人気記事表示、無限スクロール対応です。100%GPLライセンスです。

Habakiri

Bootstrapベースのシンプルで無料の公式WordPressテーマ。Lightning同様、有料拡張デザインスキンなどで異なったデザインを作ることができます。100%GPLライセンスです。

いかがでしたか。Bootstrapはテンプレートを使うことで簡単にデザイン性の高いWebサイトを構築できますので、デザインに注力する時間や予算がないときなどに便利に使うことができるようになります。

Web制作テンプレート関連記事

• WordPressテーマの選び方：ライセンス・著作権【日本語テンプレート】比較まとめ
• WordPressテーマ：オウンドメディア向けテンプレートまとめ6選
• WordPressテーマ：オウンドメディア・マガジン向け！本格的デザイン・機能テンプレートまとめ11選
• WordPressテーマ:ビジネスサイト向けテンプレートまとめ6選
• WordPressテーマ：企業サイト向け国産テンプレートまとめ
• WordPressテーマ：簡単！きれいなポートフォリオテンプレートまとめ6選
• WordPressの使い方