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

スポンサードリンク

コメントをどうぞ!

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




オススメ記事

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

Homebrew

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

人生をもう一度やり直したいとつくづく思う@It_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

WordPress

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

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

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

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは