Bootstrap3でサイト制作するための、準備と初期設定。

公開 : → 更新 :

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。

さて、今回はBootstrap3によるサイト制作の入門講座です。
このBootstrap3を使えば、かなりめんどくさいサイトのレイアウトを揃える作業が、かなり楽になります。

この記事では、まずサイト制作の為の準備を行いたいと思います。

Bootstrap3をダウンロードする。

Bootstrap3のダウンロードはこちらからできます。
bootstrap3

「Download Bootstrap」をクリックすると、「Getting started」というページに移動します。
Downloadの枠に、「Bootstrap」、「Source code」、「Sass」の3つがありますが、今回は「Bootstrap」のみを使いますので、Bootstrapのなかの、「Download Bootstrap」をクリックします。

bootstrap3

「bootstrap-xxxxxx-dist」がダウンロードされました。
とりあえず、解答が終わったら、フォルダ名を変更しておきましょう。

「bootstrap」でも良いし、作りたいサイト名でもいいと思います。とりあえずRは「bootstrap」に変更しました。

フォルダの階層は、次の様になっています。
 icon-folder bootstrap
  icon-folder-o css
  icon-folder-o fonts
  icon-folder-o js

フォルダのなかにはいくつかのファイルもありますが、今のところは気にせずに進めていきましょう。

Bootstrap3によるサイト制作。

では、このbootstrapフォルダのなかに、index.htmlファイルを作りましょう。
まだ何も記述しなくても良いので、とりあえず作ってみます。

対応していれば、使い慣れているテキストエディタで良いと思うので、index.htmlという名前にして、これをbootstrapフォルダに保存します。
 icon-folder bootstrap
  icon-folder-o css
  icon-folder-o fonts
  icon-folder-o js
  icon-file-o index.html

では、index.htmlに記述していきましょう。
先ほどのBootstrapのページから、Getting startedのページを見ると、その記述方法が書いてあります。

Basic templateという部分を探し、これをコピペして作りましょう。
bootstrap3

ただ、1つ問題があります。
HTMLの言語がenになってしまっています。
これをjaなおしましょう。

enは英語、jaは日本語です。もしも作っているサイトが英語サイトならば、直す必要はありません。
なので、index.htmlには次の様に記述することになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

index.htmlをブラウザで開いて確認する。

では、index.htmlをブラウザで開いてみてください。
次の様にHello, world!と表示されればBootstrap3を使ったサイト制作の準備完了です。
bootstrap3

スポンサードリンク

関連コンテンツ

コメントをどうぞ!

メールアドレスが公開されることはありません。




オススメ記事

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

Webページを作るのは結構好きな@It_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼っている人、今すぐ写真を@It_is_Rに送り付けて下さい。

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで