1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Bootstrap
  6. »
  7. Bootstrap3でサイト制作するための、準備と初期設定。

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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress

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

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

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。

FC2 blog customize

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

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

WordPress テーマ自作!投稿ページ、固定ページの作り方。

サンタは何故お爺さんなんでしょうか。@It_is_Rです。 今年からサンタのギャルにしましょう。 WordPress テーマ自作シリーズ第7回目です。 今回は、投稿ページと固定ページを作って

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのプログラミング入門、第5弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割ったり、か

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのプログラミング入門、第6弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……[/s

コメントをどうぞ!

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




オリジナルゲーム.com