はじめに
この記事ではHTML・CSS・JavaScriptの基礎知識だけを書いています。
「実践する」より「理解する」ほうにフォーカスしていますので悪しからず。
この記事でわかること
- HTMLの基礎知識
- CSSの基礎知識
- JavaScriptの基礎知識
この記事の対象者
- HTML・CSS・JavaScript初心者
- Webページ制作言語について端的に知りたい人
使用するツールと言語
- ツール：Visual Studio Code (1.101.2)
- 言語：HTML・CSS・JavaScript
目次
HTML・CSS・JavaScriptの概要
- HTML：Webページを制作するためのマークアップ言語
- CSS ：Webページの見た目を定義するスタイルシート言語
- JavaScript：Webページに「動き」を加えるための言語
料理に例えて「HTMLを具材の用意、CSSで味付けをし、JavaScriptで調理する」という流れを考えるととてもわかりやすいですね！
以下ではそれぞれの言語について簡単に説明していきます。
HTMLとは？
HTMLは「ハイパーテキスト・マークアップ・ランゲージ」というWebページを制作するためのマークアップ言語です。
マークアップ言語：Webページの段落や見出しをコンピュータが理解できるようにした言語
【 基本用語 】
- タグ：表示形式と範囲の指定
- 要素：タグとテキストを組み合わせたページの部品
- 属性：タグの性質を与えるもの
【 タグ 】
HTMLに意味を与える印で「開始タグ」と「終了タグ」をセットで記述します。
<開始タグ>内容</終了タグ>
<p>内容</p>
【 要素 (element) 】
Webページを構成するテキストの塊を意味するものです。
例えば下のような記述では「body要素」の中にある「p要素」となります。
<body>
<p>内容</p>
</body>
【 属性 (attribute) 】
個々のタグに特定の性質や動作を与える記述のことです。
下記の例では、「button」に「btn」というクラス属性を付与しています。
<button class="btn">ボタン</button>
HTMLでよく使うタグについて
よく使うタグをまとめてみました。
とりあえずはこの辺りを頭に入れておくと便利だと思います。
| タグ名 | 用途 |
|---|---|
| hタグ | 見出し |
| pタグ | 段落 |
| aタグ | リンク |
| divタグ | 要素のグループ化 |
| liタグ | リスト |
| tableタグ | 表作成 |
| hrタグ | 水平の罫線 |
CSSとは？
CSSは「カスケーディングスタイルシート」というWebページの見た目を定義する言語です。
HTMLだけでは表現しきれなかったページレイアウトや、色、要素のサイズなどを決定するために使用します。
【 基本用語 】
- セレクタ：要素・属性の対象を指定する
- プロパティ：スタイルの種類決めを行う
- 値：プロパティを調整するもの
【 セレクタ 】
どの要素や属性のデザインを変えるのかを指定してやるものです。
下の例ではbodyがセレクタにあたり、body要素の色を黒にするというようになっています。
body { color: black; }
【 プロパティと値 】
この2つは常にセットで、セレクタ { プロパティ: 値; }という形で記述します。
下の例では、colorやfont-sizeがプロパティです。
そして、その後につくblackや10pxが値となっています。
body { color: black; }
p { font-size: 10px }
プロパティの種類については紹介しきれないのでこちらのサイトを参考にしてみてください。
CSSの読み込み方について
CSSの読み込み方法は上の3パターンがあります。
- インラインスタイルシート：HTMLタグに
style=""のように記述- 内部スタイルシート：HTML内に
<style>タグとして記述- 外部スタイルシート：
<link rel="stylesheet" href="style.css">
後から修正しやすい点や、コードが読みやすくなる点から、
基本的に外部読み込みを使った方が良いと思います。
JavaScriptについて
JavaScriptはWebページの動き付けやイベントの処理を可能にする言語です。
例としてはポップアップ、入力フォームの値取得、ボタンを押された際の処理が挙げられます。
C言語にはintやfloat、char、stringといった「変数型」がありますが、
JavaScriptではそれらがありません！
しかし、文字列・数値・真偽値といった値の型「データ型」が存在します。
変数の宣言について
変数型がないJavaScriptでは基本的にletとconstを用いて変数宣言をします。
- let：計算やfor文のインデックスなど変化する変数
- const：一度データを代入すると書き換えられない値(定数)
let a = 1.5;
a += 0.5;
// a = 2.0 と出力
console.log("a = ",a);
const a = 1.5;
// a += 0.5; と書くとエラー
// a = 1.5と出力
console.log("a = ",a);
文字の出力について
JavaScriptは基本的にHTMLと併用して処理の部分を担当する為、
printでの画面出力はできません。
代わりに以下のような出力方法があります。
- console.log：consoleに出力
- alert：ポップアップ表示
- innerHTML：指定したHTML要素に出力
console.logはページ本体に表示されない為、デバッグ用として使うと便利です。
alertは、入力フォームの送信確認などに使うことが多いです。
innerHTMLは表示したいテキストが条件によって変わる場合など、
柔軟に対応させたい時に使います。
JavaScriptの読み込み方について
JavaScriptには2種類の読み込み方法があります。
- 内部読み込み：HTMLに
<script>タグとして記述- 外部読み込み：
<script src="script.js">
おわりに
今回はWebページの制作に使う言語の基礎知識だけを盛り込んでみました。
この知識が初学者の方などのお役に立てば幸いです。