ふりぶろぐ
Web Engineer's Blog
CSS

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

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

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

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

読んでほしい人
  • HTML, CSS, JavaScriptが初めての人
  • HTML, CSS, JavaScriptを復習したい人
  • HTML, CSS, JavaScriptを動かしてみたい人

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

HTMLの基本

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)したファイルを開くと、このように表示されます。

サンプルコード1の表示

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

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

CSSの基本

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を開いてみるとこのように表示されます。

サンプルコード2の表示

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

styleタグの中に記述する

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

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

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

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

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

サンプルコード3の表示

直接タグに指定していたものを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タグに記述されていたものと同じです。

サンプルコード4の表示

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

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

JavaScriptの基本

JavaScriptロゴ

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

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

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

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

属性に記述する

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

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

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

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

サンプルコード5の表示

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

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

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

サンプルコード6の表示

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

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行ずつコメントを入れてみました。
コメントは//を使うことで追加できます。

サンプルコード7の表示

もちろん、挙動は属性に記述した場合と同じです。
これが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属性を使って読み込みます。

サンプルコード8の表示

こちらも同じ挙動になります。

CSSのときと同じですね。
これが別ファイルに記述する方法です。

まとめ

いかがだったでしょうか?
HTML, CSS, JavaScriptについて少しでも興味を持っていただけたなら幸いです。

CSSもJavaScriptも別ファイルに記述する方法が使用されることが多いです。
こちらの方法に慣れておくと良いと思います。

基本がわかったら、次は自分で動かしてみましょう!
さらに理解が深まると思います。

※とりあえずいろいろ動かしてみる実践講座も用意しました!

ABOUT ME
りーふ
たまにブログを書いてるWebエンジニア。 サーバーサイドメインでインフラとフロントエンドもたまにやります。 Javaが得意。 Play Frameworkが好き。 本業は迷惑をかけない程度に手を抜くスタイル。 意識高い系は苦手。