Twitter Bootstrapの利用準備

こちらは、「スマホ、PC対応サイトが1数時間で作れるようになる」の1回目の記事となり、今回はTwitter Bootstrapの利用準備となります。

 

 

Twitter Bootstrapとは

 

Twitter Bootstrapとは、米ツイッター社が開発、提供している、スマートフォン、パソコン両方に適応するためのテンプレートです。
無償で提供されていますので、誰でも無料で利用することができます。

特徴

  • 簡単
  • 広く使われているので、無料、有料テンプレートが多い
  • デザイナーが居なくても、それとなくお洒落になる

 

利用するバージョン

 

v3.1.1( 2014年4月7日現在のバージョン )

 

手順

 

  1. Bootstrapのページにアクセスし、メニューから「Getting started」をクリックします。
  2. ダウンロードBootstrapをクリックします。
  3. Bootstrapのzipファイル(圧縮ファイル)がダウンロードできるので、デスクトップなどに解凍してください。
  4. 解凍を行うと、「cssフォルダ」「fontsフォルダ」「jsフォルダ」の3つのフォルダがあると思います。
    主にはこちらのファイルを読み込んで利用します。
  5. 次にベーシックなテンプレートをコピーします。

    下記のページにアクセスし、ソースコードをコピーしてください。
    http://getbootstrap.com/examples/navbar-static-top/
     

  6. 手順「4」で解凍したフォルダにコピーしたソースコードを保存してください。
  7. 何点かソースコードを修正します。

    <!--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>
     

  8. ソースコードを修正し、保存後にブラウザで確認をします。

 

以上でBootstrapの利用準備が終わりました。
次回は「ナビゲーションメニューにスタイルを適用」します。

 

関連記事

 

[初心者向け] スマホ、PC対応サイトが1数時間で作れるようになる(動画説明付き)

Bootstrapナビゲーションメニューを設定

Bootstrapメインビジュアルを追加する

Bootstrapメインコンテンツを追加する

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。