HTML/CSS入門編3: HTML要素を学ぼう



##01:Webページの仕組みを知ろう 
このレッスンでは、Webページの基礎となる、HTMLとCSSについて学んでいきます。
ここでは、このレッスンの目的や対象者・進め方を確認します。
また、Webページを作成するために必要となる、HTMLとCSS、Bootstrapの概略を説明します。

 用語解説
HTML：Hyper Text Markup Languageの略で、Webページの内容と構成を指定します。

CSS：Cascading Style Sheetsの略で、Webページのスタイル(サイズ・色・フォント・レイアウトなど)を指定します。複数のCSSを組み合わせたり、複数のHTMLから共通のCSSを利用したりできます。

HTMLフレームワーク：あらかじめデザインされたHTML/CSSをセットにしたもの。CSSフレームワークと呼ばれることもあります。

Bootstrap：ツイッター社が開発した高機能なHTMLフレームワーク。Webページ用の便利な部品を多数装備。
レスポンシブデザインに対応。



##02:Webページを作ってみよう 
ここでは、htmlの初歩的な機能を使って、簡単なWebページを作ります。そして、htmlの基本的な書き方を学んでいきます。

 タグの書式
タグは、不等号で両端をはさんで記述します。
そして、基本的にスラッシュなしのタグとスラッシュありのタグを2つセットで使います
例：

```html:sample.html
<html></html>

<h1></h1>
```

主なタグの役割
・htmlタグ
<html>と</html>にはさまれた部分が、Webページになります。

・hタグ

```html:sample.html
<h1>と</h1>にはさまれた部分が、見出しになります。
```

コメント
コメントとは、HTMLの中に記述するメモのことを言います。
Webページを表示する時、コメントはブラウザから無視されます。
でも、人間がHTMLを読み直すとき、その内容を理解するメモや注釈として利用できます。
また、HTMLの一部を一時的に無効にしたり、特別な指示をあたえたりする場合にも使います。

HTMLのコメントは、次のように記述します。

インデント
インデントを使うと、セットになったタグの関係が一目でわかるようになり、コードが読みやすくなります。

インデントを入力するには、半角スペースかタブキーを入力します。
以下の例では、htmlタグにはさまれた部分をインデントしています。


```html:1.html
<html>
  <h1> hello world </h1>
  <p>吾輩は猫である。名前はまだない。</p>
</html>
```


##03:テキストを表示してみよう 
ここでは、簡単なWebページに文字を表示してみたいと思います。先ほどは、見出しだけを表示したので、そこに文章を追加してみましょう。そして、htmlで文字を扱う方法や間違いやすいポイントを学んでいきます。

```html:sample.html
 主なタグの役割
・pタグ
　<p>と</p>ではさまれた部分が、段落になります。

・brタグ
　<br>単独で使用するタグです。この位置で改行します。

・strongタグ
　<strong>と</strong>ではさまれた部分を、強調します。

間違いやすいポイント
・タグの閉じ忘れ


```html:1.html
<html>
  <h1> hello world
</html>


・つづりの間違いや、不等号の入力忘れ
<html>
  <h1> hello world /h1>
</html>


・全角文字で入力
<html>
  <h1> hello world ＜h1>
</html>


・タグの対応ずれ
<html>
  <h1> hello world <h1>
  <p>吾輩は猫である。<strong>名前はまだない。</p>
  <p>どこで生れたかとんと見当がつかぬ。</strong></p>
</html>
```





##04:Bootstrapを使ってみよう 
ここでは、もう少ししっかりとしたWebページを作ります。
先ほど作成したWebページは、HTMLの基本を説明するために、
本来必要なタグをかなり省略していました。
今回は、Webページを作るために、
HTML5という最新の規格とBootstrapというHTMLフレームワークを使います。

 HTML5のひな型


```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Project Nyaan</title>
</head>

<body>
  <h1>吾輩は猫である。</h1>
</body>
```



Bootstrapを導入したページ


```html:1.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>Project Nyaan</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

<body>
<h1>吾輩は猫である。</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```


ここでは省略していますが、本来は、古いブラウザ(IE8など)に対応するためのコードを追加します。


```html:1.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>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!-- 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>
	<p class="lead">Project Nyaan web page</p>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```

-----------------------------------------------------------------------------------------------------------
##01:CSSの基本形を理解しよう 
このレッスンでは、HTMLの見た目を定義するCSSについて、学習します。また、HTMLフレームワークのBootstrapを使って、スマホやタブレットでもカッコよくWebページを表示できる、レスポンシブデザインとグリッドについても解説します。

 CSSの書式
CSSでは、各スタイルを次のように記述します。
まず、スタイルの適用対象があります(例 body)。それから波カッコの中に、プロパティと設定値をコロンで区切って記述します。各プロパティの行の末尾にセミコロンを書きます。

```html:1.html
body {
	padding-top: 50px;
	background-color: lightgray;
}

CSSの設置場所
- CSSファイルに記述し、linkタグで読み込む。


<link rel="stylesheet" href="your_style.css">


- HTMLのheadタグ上に、styleタグで記述する。

<style>
	body {
		padding-top: 50px;
		background-color: lightgray;
	}
</style>
```

CSSの切り替え例
BootstrapのCSSは、下記のURLが利用できます。

・Flat-UI-CSS
https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css


```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>hello world</title>
   <style>body { padding: 30px; }</style>
</head>

<body>
   <h1>hello paiza</h1>
</body>

</html>
```


##02:CSSの色指定を理解しよう 
ここでは、Webページの色を変えてみます。そのために、CSSの色指定について学習します。

 色の指定方法
・色名で指定する


color: white;



・数値で指定する

赤色(00-ff)、緑色(00-ff)、青色(00-ff)の割合を指定します。
数値は、16進数で指定します。

color: #ff0000;
色を指定するプロパティ
・背景色


background-color: white;


・文字色

color: white;

カラーピッカー
調整した色の数値表現(カラーコード)を調べるには、次のカラーピッカーが利用できます。

- カラーピッカー
http://paiza-webapp.s3.amazonaws.com/files/learning/color-slider.html



右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyの背景色(background-color)を灰色(#D3D3D3)にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！



```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        body {
            background-color: #D3D3D3;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```


 演習課題「文字色の変更」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、見出し(h1タグ)の色を赤色(red)にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        body {
            background-color: #D3D3D3;
        }
        /* この下に追記 */
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
    <p>hello html</p>
</body>

</html>
```

##03:CSSのフォント指定を理解しよう 
ここでは、Webページのテキストのサイズや種類をCSSで設定する方法について学習します。

 フォントに関連したプロパティ
・文字色


color: white;


・文字の太さ

font-weight: bold;


・文字のサイズ

font-size: 120%;


・文字の種類

font-family: serif;

演習課題「を太字にする」
右側のコードエリアのhtmlは、見出しとテキストを表示します。
headタグ上のstyleタグにスタイルを追加して、pタグのウェイト(font-weight)をboldにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        p {
            font-weight: bold;
        }
    </style>
</head>

<body>
```

演習課題「見出しのサイズを2倍にする」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのサイズ(font-size)を500%にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        h1 {
            font-size: 500%;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```

演習課題「見出しのフォントをserifにする」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのフォントの種類(font-family)を「serif」にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        h1 {
            font-family: serif;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```



##04:CSSのレイアウト指定を理解しよう 
ここではCSSを使ったパーツのレイアウトに挑戦します。そのために、CSSを使った余白や間隔の指定方法について学習しましょう。

 余白を設定するプロパティ
・要素の枠線を表示

border: dotted;


・要素の内側の余白
padding: 30px;


・要素の内側の余白
margin: 30px;



・Google Chrome
1. 右上の設定ボタンをクリック
2. 「その他ツール」 > デベロッパーツールを選択
3. 「インスペクタ」ボタンをクリック

・Firefox
1. 右上のメニューボタンをクリック
2. 「開発ツール」 > 「インスペクタ」を選択

・Safari
1. 編集 > 設定
2. 環境設定が表示されたら、「詳細」タブの「メニューバーに「開発」メニューを表示」をオン
2. 「開発」メニューで、Webインスペクタを選択

・Microsoft Eage
1. 「F12」キーを押す
2. 「要素の選択」ボタンをクリック

 演習課題「見出しに枠線を付ける」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグの枠線(border)を付けてください。プロパティの設定値は、「solid #00A0A0」とします。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        h1 {
            border: solid #00A0A0;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```

演習課題「bodyの内側に余白を付ける」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyタグの内側の余白(padding)を100ピクセルにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！



```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        body {
            padding: 100px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```


演習課題「見出しの外側に余白を追加する」
右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、h1タグのの外側の余白(margin)を80ピクセルにしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <style>
        h1 {
            margin: 80px;
        }
    </style>
</head>

<body>
    <h1>hello paiza</h1>
</body>

</html>
```
----------------------------------------------------------------------------------------------
##05:レスポンシブデザインにしよう 
ここでは、Bootstrapのコンテナという機能を使って、Webページのデザインを整えていきます。
そして、PCでもスマートフォンでも、レイアウトが崩れにくいレスポンシブデザインを実現します。

 レスポンシブデザインとは
 Bootstrapのコンテナの基本形

```html:1.html
<body>
	<div class="container">
		<div class="starter-template">
			<h1>吾輩は猫である。</h1>
			<p class="lead">名前はまだない。</p>
			<a class="btn btn-primary" href="#">OK</a>
		</div>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
```


演習課題「divタグのクラスにcontainerを追加する」
右側のコードエリアのhtmlのdivタグに「container」というクラスを追加してください。

採点をして、エラーが出なければ、演習課題クリアです！

```html:1.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>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>吾輩は猫である。</h1>
		<p class="lead">名前はまだない。</p>
		<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
		<a class="btn btn-primary" href="#">OK</a>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```





##06:Bootstrapのグリッドシステムを理解しよう 
Webページで柔軟なレイアウトを可能にする、Bootstrapのグリッドシステムを取り上げます。
グリッドは、最近のWebページで主流になっている定番のデザインで、Bootstrapで簡単に実現できます。

 Bootstrapのグリッドの基本形

```html:1.html
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<h1>1行目</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4">
				<h2>2行目のA</h2>
			</div>
			<div class="col-sm-4">
				<h2>2行目のB</h2>
			</div>
			<div class="col-sm-4">
				<h2>2行目のC</h2>
			</div>
		</div>
	</div>
	<!-- /.container -->
```


演習課題「グリッドの割合を変更する」
右側のコードエリアのhtmlは、「hello world」「hello paiza」「hello HTML」という3つの見出しを表示します。
3つの見出しは、Bootstrapのグリッドシステムで、3等分して表示されます。

このレイアウトを、「2:4:6」の割合になるように変更してください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

```html:1.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>Project Nyaan</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }

        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <div class="row">
                <div class="col-sm-2">
                    <h2>hello world</h2>
                </div>
                <div class="col-sm-4">
                    <h2>hello paiza</h2>
                </div>
                <div class="col-sm-6">
                    <h2>hello HTML</h2>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```
----------------------------------------------------------------------------------------------
##01:画像とリンクを載せよう 
ここでは、Webページに画像とリンクを追加します。Bootstrapを使うことで、リンクや画像を便利に表示することができます。

 作成したコード

```html:1.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>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank"><img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg"></a>
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
    			<a class="btn btn-primary" href="http://paiza.jp/" target="_blank">OK</a>
    			<a href="https://ja.wikipedia.org/wiki/%E5%A4%8F%E7%9B%AE%E6%BC%B1%E7%9F%B3" target="_blank">夏目漱石</a>
    		</div>
    	</div>
    	<!-- /.container -->

    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </body>
</html>
```




##02:リストとナビゲーションバーを追加しよう 
ここでは、Webページに箇条書きのリストを追加します。さらに、Bootstrapで箇条書きを使ってナビゲーションバーを作ります。このナビゲーションバーを使って、同じページ内でジャンプする方法も紹介します。

 作成したコード

```html:1.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>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
        		<div class="container">
        			<div class="navbar-header">
        				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        					<span class="sr-only">Toggle navigation</span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        				</button>
        				<a class="navbar-brand" href="#">Project Nyaan</a>
        			</div>
        			<div id="navbar" class="collapse navbar-collapse">
        				<ul class="nav navbar-nav">
        					<li class="active"><a href="#">Home</a></li>
        					<li><a href="#list">List</a></li>
        					<li><a href="">Table</a></li>
        				</ul>
        			</div>
        		</div>
        	</nav>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg">
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
				<h2 id="list">動物リスト</h2>
    			<ul class="list-group">
    				<li class="list-group-item">ねこ</li>
    				<li class="list-group-item">いぬ</li>
    				<li class="list-group-item">うさぎ</li>
    			</ul>
    			<a class="btn btn-primary" href="#">OK</a>
            	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            </div>
        </div>
    </body>
</html>
```





##03:テーブルを表示しよう 
ここでは、Webページに表を追加します。Bootstrapを使うと、見栄えの良い表を簡単に作ることができます。

 作成したコード

```html:1.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>Project Nyaan</title>
    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<style>
    		body {
    			padding-top: 50px;
    			background-color: lightgray;
    		}
    		.starter-template {
    			padding: 40px 15px;
    			background-color: white;
    		}
    	</style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
        		<div class="container">
        			<div class="navbar-header">
        				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        					<span class="sr-only">Toggle navigation</span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        				</button>
        				<a class="navbar-brand" href="#">Project Nyaan</a>
        			</div>
        			<div id="navbar" class="collapse navbar-collapse">
        				<ul class="nav navbar-nav">
        					<li class="active"><a href="#">Home</a></li>
        					<li><a href="#list">List</a></li>
        					<li><a href="#table">Table</a></li>
        				</ul>
        			</div>
        		</div>
        	</nav>
    	<div class="container">
    		<div class="starter-template">
    			<h1>吾輩は猫である。</h1>
    			<p class="lead">名前はまだない。</p>
    			<img class="img-responsive center-block" src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg">
    			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
    			</p>
				<h2 id="list">動物リスト</h2>
    			<ul class="list-group">
    				<li class="list-group-item">ねこ</li>
    				<li class="list-group-item">いぬ</li>
    				<li class="list-group-item">うさぎ</li>
    			</ul>
    			<h2 id="table">猫テーブル</h2>
    			<table class="table table-striped">
    			    <thead>
    			        <tr>
    			            <th>#</th>
    			            <th>名前</th>
    			            <th>特徴</th>
    			            <th>住所</th>
    			        </tr>
    			    </thead>
    			    <tbody>
    			        <tr>
    			            <td>1</td>
    			            <td>たま</td>
    			            <td>くつした</td>
    			            <td>東京都港区青山</td>
    			        </tr>
                    	<tr>
                    		<td>2</td>
                    		<td>ミケ</td>
                    		<td>三毛</td>
                    		<td>東京都千代田区秋葉原駅周辺</td>
                    	</tr>
	                    <tr>
					        <td>3</td>
                    		<td>トラ</td>
                    		<td>シマ</td>
                    		<td>兵庫県西宮市甲子園町</td>
                    	</tr>
                    	<tr>
                    		<td>4</td>
                    		<td>にゃあ</td>
                    		<td>トラの兄弟</td>
                    		<td>兵庫県西宮市甲子園町</td>
                    	</tr>
    			    </tbody>
    			</table>
    			<a class="btn btn-primary" href="#">Topに戻る</a>
            	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            </div>
        </div>
    </body>
</html>
```




 ##04:基本的なフォームを作ろう 
ここでは、会員登録や問い合わせなどに利用できるフォームを作ってみます。フォームを使えば、情報を見せるだけでなく、相手から連絡してもらうことができます。

 作成したコード


```html:1.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>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}

		.starter-template {
			padding: 40px 15px;
			background-color: white;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project Nyaan</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#list">List</a></li>
					<li><a href="#table">Table</a></li>
					<li><a href="#form">Form</a></li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>
	<div class="container">
		<div class="starter-template">
			<h1>吾輩は猫である。</h1>
			<p class="lead">名前はまだない。</p>
			<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block">
			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
			</p>

			<h2 id="list">動物リスト</h2>
			<ul class="list-group">
				<li class="list-group-item">ねこ</li>
				<li class="list-group-item">いぬ</li>
				<li class="list-group-item">うさぎ</li>
			</ul>

			<h2 id="table">猫テーブル</h2>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>名前</th>
						<th>特徴</th>
						<th>住所</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>たま</td>
						<td>くつ下</td>
						<td>東京都港区南青山</td>
					</tr>
					<tr>
						<td>2</td>
						<td>ミケ</td>
						<td>三毛</td>
						<td>東京都千代田区秋葉原駅周辺</td>
					</tr>
					<tr>
						<td>3</td>
						<td>トラ</td>
						<td>シマ</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
					<tr>
						<td>4</td>
						<td>にゃあ</td>
						<td>トラの兄弟</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
				</tbody>
			</table>

			<h2 id="form">猫フォーム</h2>
            <form action="#" method="post">
            	<div class="form-group">
            		<label for="title">タイトル</label>
            		<input type="text" class="form-control" name="title" id="title">
            	</div>
            	<button type="submit">OK</button>
            </form>

			<hr>
			<a class="btn btn-primary" href="#">Topに戻る</a>
		</div>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```


##05:フォームにパーツを追加しよう 
ここでは、複数行のテキストエリアとプルダウンリストといった、いくつかのパーツをフォームに追加してみます。このようなパーツも、Bootstrapを使うことで、カッコいいデザインを簡単に設定できます。

 作成したコード


```html:1.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>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}

		.starter-template {
			padding: 40px 15px;
			background-color: white;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project Nyaan</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#list">List</a></li>
					<li><a href="#table">Table</a></li>
					<li><a href="#form">Form</a></li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>
	<div class="container">
		<div class="starter-template">
			<h1>吾輩は猫である。</h1>
			<p class="lead">名前はまだない。</p>
			<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block">
			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
			</p>

			<h2 id="list">動物リスト</h2>
			<ul class="list-group">
				<li class="list-group-item">ねこ</li>
				<li class="list-group-item">いぬ</li>
				<li class="list-group-item">うさぎ</li>
			</ul>

			<h2 id="table">猫テーブル</h2>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>名前</th>
						<th>特徴</th>
						<th>住所</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>たま</td>
						<td>くつ下</td>
						<td>東京都港区南青山</td>
					</tr>
					<tr>
						<td>2</td>
						<td>ミケ</td>
						<td>三毛</td>
						<td>東京都千代田区秋葉原駅周辺</td>
					</tr>
					<tr>
						<td>3</td>
						<td>トラ</td>
						<td>シマ</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
					<tr>
						<td>4</td>
						<td>にゃあ</td>
						<td>トラの兄弟</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
				</tbody>
			</table>

            <h2 id="form">猫フォーム</h2>
            <form action="#" method="post">
            	<div class="form-group">
            		<label for="title">タイトル</label>
            		<input type="text" class="form-control" name="comment" id="title">
            	</div>
            	<div class="form-group">
            		<label for="message">メッセージ</label>
            		<textarea class="form-control" name="message" id="message" rows="3"></textarea>
            	</div>
            	<div class="form-group">
                	<label for="select">好みのネコ</label>
                	<select class="form-control"name="select" id="select">
                	  <option>タマ</option>
                	  <option>ミケ</option>
                	  <option>トラ</option>
                	</select>
                </div>
            	<button type="submit">送信する</button>
            </form>

			<hr>
			<a class="btn btn-primary" href="#">Topに戻る</a>
		</div>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```


##06:グリッドでフォームを作ろう 
Bootstrapのグリッドシステムを使って、フォームのレイアウトを整えてみましょう。

 作成したコード


```html:1.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>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<style>
		body {
			padding-top: 50px;
			background-color: lightgray;
		}

		.starter-template {
			padding: 40px 15px;
			background-color: white;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project Nyaan</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#list">List</a></li>
					<li><a href="#table">Table</a></li>
					<li><a href="#form">Form</a></li>
				</ul>
			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>
	<div class="container">
		<div class="starter-template">
			<h1>吾輩は猫である。</h1>
			<p class="lead">名前はまだない。</p>
			<img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block">
			<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
			</p>

			<h2 id="list">動物リスト</h2>
			<ul class="list-group">
				<li class="list-group-item">ねこ</li>
				<li class="list-group-item">いぬ</li>
				<li class="list-group-item">うさぎ</li>
			</ul>

			<h2 id="table">猫テーブル</h2>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>#</th>
						<th>名前</th>
						<th>特徴</th>
						<th>住所</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>たま</td>
						<td>くつ下</td>
						<td>東京都港区南青山</td>
					</tr>
					<tr>
						<td>2</td>
						<td>ミケ</td>
						<td>三毛</td>
						<td>東京都千代田区秋葉原駅周辺</td>
					</tr>
					<tr>
						<td>3</td>
						<td>トラ</td>
						<td>シマ</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
					<tr>
						<td>4</td>
						<td>にゃあ</td>
						<td>トラの兄弟</td>
						<td>兵庫県西宮市甲子園町</td>
					</tr>
				</tbody>
			</table>

			<h2 id="form">猫フォーム</h2>
			<form class="form-horizontal" action="#" method="post">
				<div class="form-group">
					<label class="col-sm-2 control-label" for="title">タイトル</label>
					<div class="col-sm-10">
					    <input type="text" class="form-control" name="comment" id="title">
				    </div>
				</div>
            	<div class="form-group">
            		<label class="col-sm-2 control-label" for="message">メッセージ</label>
            		<div class="col-sm-10">
            			<textarea class="form-control" rows="3"></textarea>
            		</div>
            	</div>
				<div class="form-group">
					<label class="col-sm-2 control-label"for="select">好みのネコ</label>
					<div class="col-sm-10">
    					<select class="form-control" name="select" id="select">
    					  <option>タマ</option>
    					  <option>ミケ</option>
    					  <option>トラ</option>
    					</select>
    				</div>
				</div>
				<div class="form-group">
		            <div class="col-sm-offset-2 col-sm-10">
			            <button type="submit">OK</button>
            		</div>
            	</div>
            </form>

			<hr>
			<a class="btn btn-primary" href="#">Topに戻る</a>
		</div>
	</div>
	<!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>
```











----------------------------------------------------------------------------------------------