WordPressやWebデザインなどに役立つ情報をご紹介

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

Ad

Bootstrapとは?

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

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

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

Bootstrapの基本的な使い方

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

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

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

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

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

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

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

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

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

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

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

Bootstrap公式テンプレート



Bootstrap公式テンプレート

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

おすすめBootstrapテンプレート

Agency

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

Agency

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

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制作テンプレート関連記事

Ad
by

IT企業に勤務を経てフリーに。Web制作やWebサービスに関連した役立つ情報を紹介していきます。わかりやすい記事を書くことを心がけています。Apple,Wintersports(Ski,Snowboard),海外旅行が好き。