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

スポンサードリンク

おすすめの記事♪

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

Homebrew

Homebrewを使いこなせ!Macへのインストールや使い方。

[email protected]_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

WordPress

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

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼って[email protected]_is_Rに送り付けて下さい。

FC2 blog customize

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

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

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかし[email protected]_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

HTML CSS

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

[email protected]_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

[email protected]_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって[email protected]_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこ[email protected]_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php


コメントを残す

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


Category

Games