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

2017年3月9日 Web, webサービス, Web制作メモ, デザイン

Bootstrapとは？

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

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

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

Bootstrapの基本的な使い方

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

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

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

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

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

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

Bootstrap公式テンプレート

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

Gumba

Webデザイン初心者でもスタイリッシュなWebサイトが作れるBootstrap

Gumba

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

Honoka

Webデザイン初心者でもスタイリッシュなWebサイトが作れるBootstrap

Honoka

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

Start Bootstrap

Webデザイン初心者でもスタイリッシュなWebサイトが作れるBootstrap

Start Bootstrap

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

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

Designstub

Webデザイン初心者でもスタイリッシュなWebサイトが作れるBootstrap

Designstub

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

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

Lightning

lightning

Lightning

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

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

有料拡張プラグインとして、有料拡張デザインからCopyrightを削除する拡張プラグインなどがあります。

有料拡張デザイン:Lightning Variety

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

LIQUID PRESS

コンテンツマーケティングを重視したオウンドメディアマガジン向けWordPressテーマ

LIQUID PRESS

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

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

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

Habakiri

habakiri

Habakiri

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

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

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

この記事を書いた人

getocadweb

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

Bootstrapとは？

Bootstrapの基本的な使い方

Bootstrap公式テンプレート

おすすめBootstrapテンプレート

Agency