テックアカデミーのWebアプリケーションコース・Bootstrap編を再度やってみた。

こんにちはオドリコ（@acro_y）です！

今日はTechAcademy [テックアカデミー] Lesson2のBootstrap編を再勉強してみます♪

LESSON2/Bootstrap編

f:id:simpledancer:20170411134018p:plain

ドロップダウンリストを追加したりテキストを変更したりアイコンをサンプルと変えてみたりしてみました。

f:id:simpledancer:20170411134124p:plain

テックアカデミーのWebアプリケーションコース・HTML/CSS編を再度やってみた。 - アスリート系ですがプログラミング始めました。

Bootstrapとは？

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書いていく場合は全てのスタイルを自分で作っていく必要があるのですが、このフレームワークにはよく使われるスタイルを予め定義してあるので、それをルールに沿って利用するだけで素早く整ったデザインを作成できます。

LESSON2/Bootstrap編
1.Bootstrapを使う準備
- フォルダとファイルの作成
- グリッドシステム

1.Bootstrapを使う準備

すでにホストされているファイルをインターネット経由で読み込む

という方法でbootstrapとjqueryを読み込みます

フォルダとファイルの作成

cloud9上に新たにフォルダを作成します！

その中にさらにindex.htmlファイルを作成します。

f:id:simpledancer:20170409103528p:plain

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">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

新たに登場しt登場したコードが沢山あります

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IEブラウザではバージョン毎にことなるレンダリング（画像や画面の内容を指示するデータの集まり(数値や数式のパラメータ、描画ルールを記述したものなど)をコンピュータプログラムで処理して、具体的な画素の集合を得ること。）をされてしまっていて崩れる心配があるので互換表示をさせないために設定するmetaタグです。

<meta name="viewport" content="width=device-width, initial-scale=1">

レスポンシブ・ウェブデザインにするために必要なmetaタグです。

<!-- BootstrapのCSS読み込み -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>