こちらは、「スマホ、PC対応サイトが１数時間で作れるようになる」の1回目の記事となり、今回はTwitter Bootstrapの利用準備となります。
「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供
Twitter Bootstrapとは
Twitter Bootstrapとは、米ツイッター社が開発、提供している、スマートフォン、パソコン両方に適応するためのテンプレートです。
無償で提供されていますので、誰でも無料で利用することができます。
特徴
- 簡単
- 広く使われているので、無料、有料テンプレートが多い
- デザイナーが居なくても、それとなくお洒落になる
利用するバージョン
v3.1.1( 2014年4月7日現在のバージョン )
手順
- Bootstrapのページにアクセスし、メニューから「Getting started」をクリックします。
- ダウンロードBootstrapをクリックします。
- Bootstrapのzipファイル（圧縮ファイル）がダウンロードできるので、デスクトップなどに解凍してください。
- 解凍を行うと、「cssフォルダ」「fontsフォルダ」「jsフォルダ」の3つのフォルダがあると思います。
主にはこちらのファイルを読み込んで利用します。 - 次にベーシックなテンプレートをコピーします。
下記のページにアクセスし、ソースコードをコピーしてください。
http://getbootstrap.com/examples/navbar-static-top/
- 手順「4」で解凍したフォルダにコピーしたソースコードを保存してください。
- 何点かソースコードを修正します。
<!--2行目付近-->
<html lang="en">
↓↓↓
<html lang="ja"><!--14行目付近-->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
↓↓↓
<link href="./css/bootstrap.min.css" rel="stylesheet"><!--90行目付近-->
<script src="../../dist/js/bootstrap.min.js"></script>
↓↓↓
<script src="./js/bootstrap.min.js"></script>
- ソースコードを修正し、保存後にブラウザで確認をします。
以上でBootstrapの利用準備が終わりました。
次回は「ナビゲーションメニューにスタイルを適用」します。
関連記事
[初心者向け] スマホ、PC対応サイトが１数時間で作れるようになる（動画説明付き)
