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

  • 316
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

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ということ)

<!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ファイルには必ずheadbodyがあるよ!ってこと。

2-2. 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をあてる方法。
記述例は以下の通り。

<!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を記述する方法。
記述例は以下の通り。

<!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。記述例は以下の通り。

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

  <body>
    <p>Hello World:D</p>
  </body>
</html>
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要素として記述する方法。
記述例は以下の通り。

<!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。記述例は以下の通り。

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

  <body>
    <p>Hello World:D</p>
  </body>
</html>
alert("Hello JavaScript:D");
  • HTMLファイル内ではscriptタグで外部CSSファイルを呼び出す。
  • src="test.js"と書くことで、呼び出すファイル名を記述。この場合、呼び出すJavaScriptファイルの名前はtest.js
  • type="text/javascript"と書くことで、scriptタグで呼び出すファイルがJavaScriptファイルであることを明記。

4-2. JavaScript記述例

<!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