【プログラミング初心者向け】HTML、CSS、JavaScriptの基礎

1 【プログラミング初心者向け】HTML、CSS、JavaScriptの基礎

【プログラミング初心者向け】HTML、CSS、JavaScriptの基礎

「Web系のプログラミングでどの言語から始めたらいいですか？」
最近、こんな質問をよく受けます。

普段はサーバサイドをメインにやってますが、
Webプログラミングを始めようと思ったら、
フロントエンド（HTML、CSS、JavaScript）が断然始めやすい！

ということで、HTML、CSS、JavaScriptのほんとに基礎、概要を
ご紹介します。

これを機に少しでもWebプログラミングに興味を持ってもらえれば幸いです。

HTML、CSS、JavaScript とは何ぞや？

簡単に言うと、Webサイトのデザイン、動きを構成するものです！
それぞれもちろん役割が違って、ざくっと下のような感じです。

デザイン： HTML + CSS
動き： JavaScript

少し詳細に記載します。

HTML (Hyper Text Markup Language)

ウェブページの要素を決めます。
ボタン、チェックボックス、入力欄などを設置できます。

CSS（Cascading Style Sheets）

ウェブページを装飾します。
色、配置、大きさなどを設定できます。

JavaScript

ウェブページに動きや効果を与えます。
クリックやタップ時の挙動の制御、アニメーションの実行などできます。
※Javaという言語もありますが、使用用途も異なっていて、全く別物と認識しておいてください。

簡単なコードで実際に動かしてみよう

実は、テキストエディタとブラウザさえあればすぐに開発可能です！
これが冒頭にお伝えしたフロントエンドが断然始めやすい理由です！

サーバサイドだとちゃんと一からやりたい場合は、
サーバ構築からとかなったりして・・・
こだわらなければそこまでやる必要はないですが。

では、実際に書いていきましょう。

HTML (Hyper Text Markup Language)

以下のコードをテキストエディタにコピーして
test_code.htmlで保存してください。
どんなブラウザでもいいので、そのファイルをブラウザで開くと
ボタンが置かれたページが開くと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<title>TEST SITE For HTML_BASE</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
	<button type="button">Send Button</button>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<button type="button">Send Button</button>

</body>

</html>

・HTMLは、< >で囲まれたタグで構成されます。
・必ず以下の構成になります。

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

<!DOCTYPE html>

<html>

<head>

〜

</head>

<body>

〜

</body>

</html>

・先頭にDOCTYPEを宣言します。<!DOCTYPE html>でブラウザにHTML5で書かれていることを宣言します。
・headタグの間にページのタイトル、文字コードなど見た目の要素に関係しないものを書きます。
・bodyタグの間に見た目の要素（コンテンツ部分）を書きます。ここでは、ボタンを設置しています。

CSS（Cascading Style Sheets）

コンテンツの色、大きさ、配置などおもいっきりデザイン部分を記述します。

書き方としては、3つあります。
・style属性に記述
・styleタグで記述
・外部ファイルに記述して、linkタグで呼び出す

styleタグで記述するパターンをご紹介します。
以下のコードを先程のファイルにコピぺしてみて下さい。
ボタンの色と大きさが変化したと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<title>TEST SITE For HTML_BASE</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
	button {
		font-size: 20px;
		padding: 10px 30px;
		background-color: #248;
		color: #fff;
	}
</style>
</head>
<body>
	<button type="button">Send Button</button>
</body>
</html>

<!DOCTYPE html>

<head>

button {

font-size: 20px;

padding: 10px 30px;

background-color: #248;

color: #fff;

}

</style>

</head>

<body>

<button type="button">Send Button</button>

</body>

</html>

・<style type=”text/css”>と</style>の間にCSSを書きます。
・CSSセレクタと呼ばれる方法で要素を選択して、その要素にCSSを効かせます。

JavaScript

コンテンツ部分のクリックやタップ時の挙動の制御、
アニメーションの実行などできます。

書き方としては、2つあります。
・scriptタグで記述
・外部ファイルに記述して、scriptタグで呼び出す

scriptタグで記述するパターンをご紹介します。
以下のコードを先程のファイルにコピぺしてみて下さい。
ボタンを押したときに、押した回数が表示されると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<title>TEST SITE For HTML_BASE</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
	button {
		font-size: 20px;
		padding: 10px 30px;
		background-color: #248;
		color: #fff;
	}
</style>
</head>
<body>
	<button type="button">Send Button</button>

	<script type="text/javascript">
	var count = 1;
	document.addEventListener('click', function (e) {
		var target = e.target;
		if (target.type === 'button') {
		alert("count = " + count);
		count++;
		}
	}, false);
	</script>

</body>
</html>

<!DOCTYPE html>

<head>

button {

font-size: 20px;

padding: 10px 30px;

background-color: #248;

color: #fff;

}

</style>

</head>

<body>

<button type="button">Send Button</button>

var count = 1;

document.addEventListener('click', function (e) {

var target = e.target;

if (target.type === 'button') {

alert("count = " + count);

count++;

}

}, false);

</script>

</body>

</html>

・<script type=”text/javascript”>と</script>の間にJavaScriptを書きます。
・scriptタグは、headタグ、bodyタグ中のどちらに置いてもいいです。

注意点

HTML、CSS、JSは、ブラウザが解釈します。
ブラウザといえば、IE、FireFox、Chrome、Safariなどなど
多々種類があるものです。
ということは、ブラウザによって見え方や動作が違うことがあるのです。
Chromeで動作するけど、IEだと動かないは、これまで頻繁に出くわしてきました。
フロントエンドをやるにあたって、各種ブラウザによる動作確認が大変というのは、
頭の片隅に入れておいてくださればと思います。