Java開発者が知っておくべきHTML/CSS/JavaScriptの基礎知識
目次
はじめに
本記事はIT会社勤務の100名程の研修生を見てきた元Java研修講師が、Javaだけでなく知っておいても損はない、「HTML・CSS・JavaScript」の基礎知識についてお話ししたいと思います。
Javaとの違い
Javaは主にWebアプリや各種システムの裏側(バックエンド)の開発を目的としています。例えば、荷物の届けてほしい場所を入力すると、荷物が届きますよね！実は裏側では、配達員に「この時間・この場所に届けてほしい」と登録するような仕組みになっています。このような処理はユーザー側からは、全く見えない裏側の部分になっています。
一方で、HTML・CSS・JavaScriptは、実際にWebアプリやシステムを利用するユーザーから見える部分。操作する「画面」(フロントエンド)を開発することを目的としています。「購入するボタン」を押すと購入ページに行ったり、検索をするとその条件に見合った商品が表示されたりしますよね。フロントエンドはそのように、ユーザーが実際に見たり触れたりする画面を作ることを目的としています。
HTML
HTMLはフロント言語の中でもWebページの「骨組み」を定義するために使われます。
見出し(<h1>)や段落(<p>)などの「タグ」を用いてWebページを作る基本的な言語になります。
HTMLはあくまで骨組みを定義するので、見た目を変えたり文章の位置を調整したりなどはできません。
具体例コード
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<title>HTML/CSS/JS 基礎サンプル</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<h1>はじめてのWebページ</h1>
<button id=”btn”>クリックしてね</button>
</body>
</html>
この具体例のコードでは、「HTMLの設定や他のファイルの紐付けなど」(head)と「見出しとなる部分(h1)とボタンを用意(button)」(body)しています。
<html>、<head>、<body>
基本構造として、「<html>、<head>、<body>」があります。
<html>はWebページ全体を囲っています。その中に<head>があり、<head>はWebページの表示内容ではなく、裏側の情報や設定を書きます(ページのタイトル、CSSやJavascriptファイルの読み込み、文字コードなど)。そして<body>に実際にブラウザに表示される部分(ボタン、文章、画像などのユーザーが目にする全てのコンテンツ)を書きます。
id、class
「id」は1つのページ内で一意(ユニーク、被りがない)。特定の1つの要素だけを識別したいときに使う。
「class」は複数の要素に同じクラス名を付けられる。グループ化してまとめてCSSやJavascriptで処理したいときに使う。
CSS
CSSはフロント言語の中でもHTMLで作られたWebページに「見た目のデザイン」を加えるための言語です。文字や背景の色を変えたりフォントサイズや幅・高さ・余白の調整、見出しや文章、画像の位置調整などが定義できる言語です。
HTMLでの定義を利用してデザインを割り当てていきます。例えば見出しのフォントを変えたければ、h1に対して定義しますし、特定の1つの要素の背景色を変えたいとなるとidを指定しますし、グループになっているところを真ん中に寄せたいとなるとグループに対して定義すれば良いのです。ネットで調べれば、位置の調整コードや色の変更、余白の持たせ方などは出てくるので、それを自分のコードにうまく反映させていくのが効率的だと思います。
具体例コード
body {
background-color: #f9f9f9;
text-align: center;
}
h1 {
color: darkblue;
}
この具体例のコードは、画面全体(body)の背景色(background-color)を変えたり、文字の位置(text-align)を中央ようせにしています。さらに見出し(h1)の文字の色(color)を青色に変えています。
JavaScript
JavaScriptはフロント言語の中でもWebページに「動き」や「操作への反応」を付けるための言語です。「ボタンを押すと画面が変わる」「入力をチェックする(適切かどうか)」「アニメーションが動く」などの動きをつけることができます。
具体例コード
// ボタンを取得（id=”btn”の要素）
const btn = document.getElementById(‘btn’);
// ボタンがクリックされたら動く関数を登録
btn.onclick = function() {
alert(‘ボタンが押されました！’);
};
この具体例のコードは、コメントにも含めているようにHTMLで作られたボタンを押すことで、「ボタンが押されました」とアラートメッセージが出るようにしたものです。
まとめ
裏側(バックエンド)の開発の仕組みだけでなく、フロントエンドとバックエンドの繋がりも最低限理解しておくことでバックエンドの開発の理解も、少しは深まると思います。その中でまずフロントエンドの基礎ということで、３つのフロント言語の基礎をお話ししました。
