Bootstrapを利用してホームページを作ってみよう。

ホームページをゼロから作るのは大変ですよね。
テンプレートを利用するのが一番ですが、
Bootstrapというフレームワークの使い方を紹介します。

Bootstrapとは?

Bootstrapは、元々、「つぶやき」でおなじみのTwitter社が開発したWebアプリケーションフレームワークです。昔は、「Twitter Bootstrap」というようにTwitter社の冠がありましたが、今は外れております。

「Webアプリケーションフレームワーク」なんて聞くと、何のことだかよくわかりませんが、要はHTML/CSSテンプレートです。また、JavaScriptも多用されており、ダイナミックな動きのあるCSSテンプレートを作ることが可能です。

特徴はいかのようなことがあります。

レスポンシブデザイン対応

Bootstrapはモバイルファースト(スマートフォン優先)のデザインで、タブレットやPCにも対応しています。スマートフォン対応が必須の現在、とても助かりますね。

グリッドシステム採用

940ピクセル幅のグリッドレイアウトが標準設計で、それを12分割したボックスを作ることができます。

HTMLコンポーネントの充実

「グローバルナビゲーション(グローバルメニュー)」「タブナビゲーション」「パンくずリスト」「ドロップダウンメニュー」「パネル」などの機能を簡単に設置することができます。

簡単なCSS設置

基本的なHTMLタグのCSSが用意されており、ユーザは追加で自由にCSSを設定することももちろん可能です。
指定されたCSSのクラス名などを理解する必要がありますが、HTMLタグにクラス名を指定するだけで、デザインできるのは魅力的です。

豊富なデザイン

基本的なBootstrapフレームワークを利用して、様々なテンプレートが無料配布されています。主に、海外の物が多いのですが、その分、スタイリッシュなデザインが多いです。

Bootstrapの基本的な使い方

Bootstrap本体をダウンロード

まずは、公式サイトからBootstrap本体をダウンロードします。

2017年7月30日現在、バージョンはv3.3.7です。
バージョンによって、利用できる機能なども変わってきます。可能な限り、最新版を使うようにしてください。

ファイルを解凍

ファイルを解凍すると「css」「font」「js」があります。サンプルのHTMLファイルなどはなく、ご自身が用意する必要があります。

基本的なHTMLの書き方、CSSの指定方法などは、公式サイトに掲載されていますので、そちらを参考にしてください。

Bootstrapのテンプレート(テーマ)を使ってみよう

Bootstrap本体だけでは、味気ないデザインになってしまいがちです。そこで、Bootstrap専用のテンプレート(テーマ)を使ってみましょう。

Bootstrap専用のテンプレート(テーマ)を利用サイトの注意点ですが、カスタマイズが難しいということです。Bootstrapにあまり詳しくない場合は、可能な限り、希望に一番近いテンプレートを選択することが重要です。

テンプレート(テーマ)については、すでにまとめられたサイトがあるので、そちらを参考にしてみてください。無料のものや有料のものもあります。

日本語対応テンプレート(テーマ)

Bootstrapのテンプレートは、どちらかと言えば、モバイル向けの1カラムが多く、動きがユニークなものが多い印象です。 また、Bootstrapは海外製なので、日本語を表示させるとなぜかダサくなるという欠点が...。そこで、日本語に対応したテンプレート(テーマ)を利用するのも手です。

日本製エディタ

Bootstrap用のオンラインのエディタがあるようです。日本語なので安心ですね。勉強がてらにはよさそうです。

DreamweaverでのBootstrapの利用

DreamweaverはBootstrap対応になっています。使い方などは、以下のページが参考になります。

最後に

私がBootstrapのテンプレート(テーマ)を作ったページです。ほぼ、デザインは変えておりません。若干、不具合があったところを修正したくらいです。

投稿日:2017年7月30日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー