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

スポンサードリンク

おすすめの記事♪

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

[email protected][email protected]ゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

Ameba customize

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

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

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

Homebrew

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

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

wordpress

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

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

FC2 blog customize

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

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

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近[email protected]_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

FC2 blog customize

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

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

HTML CSS

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

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


コメントをどうぞ!

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




Games