準備不要！超初心者向けHTML, CSS, JavaScript入門講座！

HTML, CSS, JavaScriptの基本を知りたい！
基本的なことを解説してほしいな。
あと、いろいろ動かしてみたい！

このようなご希望にお答えします。

今回は簡単なサンプルを用意して１つずつ解説していきます。
動作確認のために自分でサンプルコードをコピペする必要もありません。

読んでほしい人

HTML, CSS, JavaScriptが初めての人
HTML, CSS, JavaScriptを復習したい人
HTML, CSS, JavaScriptを動かしてみたい人

ざっくりとHTML, CSS, JavaScriptの基本を解説していきます。
概念というより、書き方を意識して解説していきます。

HTMLの基本

HTMLはウェブページの土台となるものです。
CSSとJavaScriptはHTMLの上に乗せるイメージです。

HTMLには基本形があります。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

HTMLの基本形はこんな感じ。
あとはheadタグとbodyタグの中にコンテンツを追加していきます。
タグとは<>で囲まれたものです。

headタグにはページ情報のコンテンツを、bodyタグには表示させたいコンテンツを配置します。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <p>画面に表示したいテキスト</p>
  </body>
</html>

実際にこのコードをコピペして、名前を付けて保存（拡張子はhtml）したファイルを開くと、このように表示されます。

titleタグで設定したテキストはタブ（タイトル名）に、pタグで設定したテキストは画面上に表示されていますよね。

このようにしてコンテンツを追加していきます。

CSSの基本

CSSはHTMLコンテンツを装飾します。
文字の色や大きさを変えたい、背景色を変更したい、そんなときに使用します。

CSSには3つの書き方があります。

style属性として記述する
styleタグの中に記述する
別ファイルに記述する

1つずつ見ていきましょう。

style属性として記述する

HTMLのタグに直接、CSSを設定します。
こちらは非常にわかりやすいです。

先ほどのサンプルHTMLで表示させた「画面に表示したいテキスト」というテキストを赤いテキストに変更してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <p style="color: red;">画面に表示したいテキスト</p>
  </body>
</html>

pタグの中にstyle="color: red;"というコードを追加してみました。
これは”このタグで囲まれているテキストを赤にしてください”という記述です。
このstyle=のようなものをstyle属性といいます。

実際にこちらのHTMLを開いてみるとこのように表示されます。

ちゃんと赤くなりましたね。
これがstyle属性として記述する方法です。

styleタグの中に記述する

今度はstyleタグというものを追加して、その中で指定してみます。

まずはサンプルコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>画面に表示したいテキスト</p>
  </body>
</html>

headタグ内にstyleタグを設定しました。
その中で”pタグのテキストは赤に設定しください”という記述をしています。

実際に表示されるのはstyle属性で設定した場合と同じです。

直接タグに指定していたものをhead内でまとめて定義するのが、styleタグの中に記述する方法です。

別ファイルに記述する

こちらはstyleタグの中に記述する方法と似ています。
styleタグを別ファイルとして保存して、そのファイルをHTMLから読み込みます。

今回はHTMLファイル、CSSファイルを使用します。
どちらも同じディレクトリに配置しています。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <link href="sample.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <p>画面に表示したいテキスト</p>
  </body>
</html>

p {
    color: red;
}

先ほどstyleタグを設定していた箇所にlinkタグを設定しています。
このlinkタグで別ファイルとして保存されているCSSファイルを読み込みます。（今回の場合はsample.css）
CSSファイルの中身はsyleタグに記述されていたものと同じです。

表示はこちらも同様で、このようになります。

styleタグに記述していたものを別ファイルに記述します。
これが別ファイルに記述する方法です。

JavaScriptの基本

JavaScriptはウェブページを動的にします。
ボタンをクリックしたらアラートを表示したい、マウスカーソルが上に乗ったら文字の色を変えたい、そんなときに使用します。

JavaScriptもCSSと同じで3つの書き方があります。
使い方はCSSとほとんど同じです。

属性に記述する
scriptタグの中に記述する
別ファイルに記述する

ではまた1つずつ見ていきましょう。

属性に記述する

HTMLのタグに直接、JavaScriptを設定します。

ボタンをクリックしたときにアラートを表示するページを作ってみましょう。
まずはHTMLでボタンを表示してみます。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <button>ボタン</button>
  </body>
</html>

buttonタグを使うことでボタンを表示できます。
今の状態ではクリックしても何も起こりません。

次に、このボタンをクリックしたときの処理を書いてみます。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
  </head>
  <body>
    <button onclick="alert('クリック！')">ボタン</button>
  </body>
</html>

ボタンをクリックしたときの処理を追加するにはonclick属性を指定します。
その中にアラートを表示するための処理を追加しました。

実際にクリックしてみるとこのようにアラートが表示されます。
これが属性に記述する方法です。

scriptタグの中に記述する

styleタグのときのように、今度はscriptタグを作って、その中に記述してみます。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <script>
        // HTMLを読み込んだ後に処理をする
        window.onload = function() {
            // 画面に表示されているボタンを取得する
            var button = document.getElementsByTagName('button')[0];
            // ボタンが押されたときの処理を追加
            button.onclick = function(){
                // アラートを表示する
                alert('クリック！')
            };
        }
    </script>
  </head>
  <body>
    <button>ボタン</button>
  </body>
</html>

少し記述が難しくなってしまったので、1行ずつコメントを入れてみました。
コメントは//を使うことで追加できます。

もちろん、挙動は属性に記述した場合と同じです。
これがscriptタグの中に記述する方法です。

別ファイルに記述する

最後に別ファイルに記述する方法です。
こちらはCSSのときとまったく同じです。

scriptタグの情報を別ファイルに定義してみます。

<!DOCTYPE html>
<html>
  <head>
    <title>ページタイトル</title>
    <script src="sample.js"></script>
  </head>
  <body>
    <button>ボタン</button>
  </body>
</html>

// HTMLを読み込んだ後に処理をする
window.onload = function() {
    // 画面に表示されているボタンを取得する
    var button = document.getElementsByTagName('button')[0];
    // ボタンが押されたときの処理を追加
    button.onclick = function(){
        // アラートを表示する
        alert('クリック！')
    };
}

CSSのときと同様にHTMLからファイルを読み込みます。
JavaScriptの場合はscriptタグのsrc属性を使って読み込みます。