超絶初心者のためのフロント入門（HTML、CSS、JavaScript）


# 1. はじめに

## 1-1. 技術の概要
エンジニアの技術は、かなりざっくり言うと、

- フロントエンド　→　見える部分。

　　（例）HTML、CSS、JavaScriptなど

- サーバサイド　→　アプリケーションを動かす中身の部分。

　　（例）Java、PHP、Ruby、C、C++、Perlなど

- インフラ　→　Webアプリケーションを動かすための環境構築など。

　　（例）Webサーバ構築、DBサーバ構築、DNSサーバ構築など

の3つに類別できる。

その中で、プログラミング未経験者が最も手をつけやすいのが、フロント（HTML、CSS、JavaScript）の技術である。

※　上記は、「Webアプリケーション開発」のお話です。
※　「ネイティブ開発」ではObjective-C/Swift/AndroidJava/Cocos2d-x/Unityなどがよく使われる。

## 1-2. フロントの概要
フロントの技術を学ぶために準備すべきなのは、

- webブラウザ　→　IE、Google Chrome、Firefox、Safariなど
- エディタ　→　メモ帳、テキストエディット、サクラエディタ、mi、Sublime Text、vimなど

だけでよい。HTML、CSS、JavaScriptの住み分けは、

- HTML　→　「構造」を記述。マークアップ。Hyper Text Markup Language。
- CSS　→　「装飾」を記述。スタイルシート。Cascading Style Sheet。
- JavaScript　→　「動的な処理」を記述。JSとも言う。

のようになっており、プログレッシブ・エンハンスメントという思想に基づくと、`HTML > CSS > JavaScript`の順に重要であるとされている。（HTMLが1番重要）

# 2. HTML
## 2-1. 最小限の記述
拡張子は`.html`。
（ファイル名が、`test.html`のように最後が`.html`ということ）

```html
<!DOCTYPE html>
<html>
  <head>
    （headタグで囲まれた部分（head要素）には「付加情報」を記述）
  </head>

  <body>
    （bodyタグで囲まれた部分（body要素）には「コンテンツ」を記述）
  </body>
</html>
```

- 1行目　→　文書型宣言。おまじないだと思えばOK。

　　（例）`<!DOCTYPE html>`だと、HTML5を利用するよ！という意味。

- `タグ`とは、`<`と`>`で囲まれたもののこと。

　　（例）`headタグ`とは、`<head>`のこと。

- `要素`とは、開始タグ`<>`と終了タグ`</>`で囲まれた全体を指す。`タグ`と`要素`を混同しないように！

　　（例）`head要素`とは、`<head>　・・・　</head>`のこと。

- htmlタグ`<html>`　→　HTMLファイルの中身は、文書型宣言以外をhtmlタグで囲むべし。

1番大事なのは、HTMLファイルには必ず`head`と`body`があるよ！ってこと。

## 2-2. HTML記述例
```html
<!DOCTYPE html>
<html>
  <head>
    <title>ここにページのタイトル書くよ！</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <h1>1. h1タグの中身は、見出し1だよ！1番大きい見出しだよ！</h1>
    <h2>1-1. h2タグの中身は、見出し2だよ！</h2>
    <p>pタグの中には段落の塊を記述するよ！
      <u>アンダーバーはuタグで囲むよ！</u>
      <i>斜体はiタグで囲むよ！</i>
      改行したいときは<br />って書くよ！
    </p>
    <h3>1-1-1. h3タグは見出し3だよ！</h3>
    <p>見出しタグはh4,h5,h6とかもあるよ！h1タグが存在しないのにh2とかh3を使うのは良くないよ！</p>
    <div>
      <ul>
        <li>りんご</li>
        <li>バナナ</li>
        <li>もも</li>
      </ul>
    </div>
    <p>liタグはリストを書く時使う。liタグはulタグ（またはolタグ）で囲むことで使えるよ！</p>
  </body>
</html>
```
　↑
これをコピペして`test.html`みたいな感じで`.html`という拡張子で保存して、ブラウザで見てみるといいかも！

# 3. CSS
## 3-1. CSSの書き方は3通り
CSSには書き方が3通りある。

- 「style属性」として記述（pタグなど「タグの中」に記述）
- 「styleタグ」の中に記述（HTMLファイルの「headタグの中」に記述）
- 外部ファイルに記述（linkタグで呼び出す）

### 3-1-1. 「style属性」として記述
HTMLファイル内の特定の要素に直接CSSをあてる方法。
記述例は以下の通り。

```html
<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <p style="color: blue;">Hello World:D</p>
  </body>
</html>
```
- `style="color: blue;"`をpタグの中に書くことで、`Hello World:D`の部分が青文字になる。
- 確かめたかったら、コピペして保存して、ブラウザで開いてみよう！保存するときの拡張子は`.html`だよ！

### 3-1-2. 「styleタグ」の中に記述
HTMLファイル内のheadタグの中に、style要素としてCSSを記述する方法。
記述例は以下の通り。

```html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color: yellow;
        background-color: black;
      }
    </style>
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>
```

- `<style type="text/css">`と`</style>`で囲まれた部分にCSSを記述。
- `type="text/css"`と書くことで、scriptタグの中身がCSSファイルであることを明記。

CSS部分の書き方は、

```
タグ名 {
	プロパティ名: 値
}
```
となる。classやidは、

```
.class名 {
	プロパティ名: 値
}
#id名 {
	プロパティ名: 値
}
```
のように、classには`.`、idには`#`をつけることでCSSを記述する。

### 3-1-3. 外部ファイルに記述
上記2つの方法では、HTMLファイルの中にCSSを記述していたが、3つ目のこの方法では「外部ファイル」としてCSSを記述する。
拡張子は`.css`。記述例は以下の通り。

```html
<!DOCTYPE html>
<html>
  <head>
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>
```

```css
p {
	color: yellow;
	background-color: black;
}
```

- HTMLファイル内では`linkタグ`で外部CSSファイルを呼び出す。
- `href="test.css"`と書くことで、呼び出すファイル名を記述。この場合、呼び出すCSSファイルの名前は`test.css`。
- `rel="stylesheet" type="text/css"`は、CSSを呼び出す時のおまじないと思えばOK！

# 4. JavaScript
## 4-1. JavaScriptの書き方は2通り
JavaScriptには書き方が2通りある。

- 「scriptタグ」の中に記述
- 外部ファイルに記述（scriptタグで呼び出す）

### 4-1-1. 「scriptタグ」の中に記述
CSSの`3-1-2. 「styleタグ」の中に記述`と似た感じで、HTMLファイルの中にscript要素として記述する方法。
記述例は以下の通り。

```html
<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <p>Hello World:D</p>

    <script type="text/javascript">
      alert("Hello JavaScript:D");
    </script>
  </body>
</html>
```

- `<script type="text/javascript">`と`</script>`で囲まれた部分にJavaScriptを記述。
- `type="text/javascript"`と書くことで、scriptタグの中身がJavaScriptファイルであることを明記。
- `alert("Hello JavaScript:D");`により、`Hello JavaScript:D`と書かれたアラートがポップアップで出てくる。
- `script要素`を書く場所は、`headタグの中`でも`bodyタグの中`でもどちらでも良い。

### 4-1-2. 外部ファイルに記述
「外部ファイル」としてJavaScriptを記述する。
拡張子は`.js`。記述例は以下の通り。

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="test.js"></script>
  </head>

  <body>
    <p>Hello World:D</p>
  </body>
</html>
```

```js
alert("Hello JavaScript:D");
```

- HTMLファイル内では`scriptタグ`で外部CSSファイルを呼び出す。
- `src="test.js"`と書くことで、呼び出すファイル名を記述。この場合、呼び出すJavaScriptファイルの名前は`test.js`。
- `type="text/javascript"`と書くことで、scriptタグで呼び出すファイルがJavaScriptファイルであることを明記。

## 4-2. JavaScript記述例
```html
<!DOCTYPE html>
<html>
  <head>
    <title>ここにページのタイトル書くよ！</title>
    <meta charset="utf-8" />
    <style type="text/css">
	  .foo-before {
	    background-color: white;
		color: black;
	  }
	  .foo-after {
	    background-color: black;
		color: yellow;
	  }
	</style>
  </head>

  <body>
    <p id="id_1">1. JS側にonclick書いてクリックイベント発火。</p>
    <p id="id_2">2. JSでは無名関数も使えるよ！</p>
    <p onclick="pClick()">3. HTMLでonclick属性書いた。クリックしてみて！</p>
    <p id="id_3" class="foo-before">4. クリックするたび色変わるよ！（クラスの入れ替えをjQueryで実装）</p>
    <p id="id_4">5. クリックするとCSS追加されるよ！</p>

    <script type="text/javascript">
      // 変数定義（「//」から始まる行はコメントアウト）
      var id_1 = document.getElementById("id_1");
      var id_2 = document.getElementById("id_2");
      var id_3 = document.getElementById("id_3");
      
      // id_1（id_2）をクリックしたら、functionの中身を実行
      id_1.onclick = function id1Click() {
        alert("id_1クリックしたよ！");
      }
      id_2.onclick = function () {
        alert("id_2クリック！関数名は書いても書かなくてもOK！");
      }

      // HTML側にクリックイベント記述
      function pClick() {
        alert("pタグクリック！HTMLでonclick属性書いたよ！");
      }
    </script>

    <script type="text/javascript">
      var stylesheet = document.styleSheets.item(0);

      // 上で定義したid_4はここでも使えるよ！
      id_4.onclick = function () {
        //第2引数は、「CSSの何番目のルールにするか」。0始まりの番号。
        stylesheet.insertRule("#id_4 {font-size: 20px;}", 0);
        stylesheet.insertRule("#id_4 {background-color: pink;}", stylesheet.cssRules.length);
      }
    </script>

    <!-- これでjQuery使える。ただしネットつながってれば。 -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script type="text/javascript">
      // $関数はjQueryの定番！
	  $('#id_3').click(function() {
        this.className = (this.className === 'foo-before') ? 'foo-after' : 'foo-before';
      });

      document.writeln("<p>6. JSでHTML記述！（リロードするたび少し表示が遅れてるけど、わかるかな？）</p>");
      document.writeln("<p>7. URLは、" + document.URL + "だよ！</p>");
      document.writeln("<p>8. このページのtitleは、「" + document.title + "」だよ！</p>");
	</script>
  </body>
</html>
```
　↑
これをコピペして`test.html`みたいな感じで`.html`という拡張子で保存して、ブラウザで見てみるといいかも！

※おまけ（jQuery）
▼クリック時、非同期でHTTPリクエストを投げる方法
http://qiita.com/shuntaro_tamura/items/d1b52a3a35440daf84ea
▼便利なjQueryメソッドまとめ
http://qiita.com/shuntaro_tamura/items/94fe7e7a7dc797999287