ホームページ(HP)に必要なコーディングとは？初めてでも分かるHP制作

皆さんはホームページの仕組みをご存じですか？現在は色とりどりで、なおかつ動きのあるホームページが多数存在していますが、仕組みが分かったらもっと面白いですよね。

今回は

ホームページを構築するコーディングとは？

という内容についてご紹介します！この記事を読めば、ホームページの凄さがわかるはず。早速紐解いていきましょう。

1 コーディングとは？
- 1.1 ホームページを作成するためにプログラミングをすること
2 ホームページ(HP)の仕組み
3 HTMLの仕組み
4 CSSの仕組み
5 JavaScriptの仕組み
6 ホームページ(HP)のコーディングで注意すべき点
7 まとめ

コーディングとは？

ホームページを作成するためにプログラミングをすること

コーディングとは、プログラミングを用いてホームページを作成することを言います。

プログラミングに用いる言語は様々ですが、ホームページ作成には必ずHTML、CSSが用いられ、場合によってはJavaScriptも用いられています。

この3つの言語を使えば、ホームページの作成方法は無限大。その言語の仕様が許す限り、自由なページを作成することが出来るのです。

ホームページ(HP)の仕組み

ではHTMLやCSS、JavaScriptはどんな言語で、どんなものなのでしょうか？ここではそれぞれの言語の特徴や書き方を、簡単にご紹介します。

ホームページの枠組み：HTML

まずはホームページの作成に必須なHTMLです。HTMLはホームページの枠組みを作る言語。

Hypertext Markup Language[ハイパーテキストマークアップランゲージ]の略で、正確にはプログラミング言語ではなく、マークアップ言語という分類に含まれます。

HTMLは「タグ」という部品を使ってホームページを作成します。これは「要素」と呼ばれ、この要素を組み立てていくことでホームページの枠組みを作っていくのです。

ホームページの装飾を行う：CSS

HTMLのみの状態では、まだ枠組み段階で殺風景かつ見づらいページになってしまいます。それに装飾を行うのがCSSなのです。

CSSはCascading Style Sheets[カスケ―ディングスタイルシート]の略で、こちらもプログラミング言語ではなく、スタイルシート言語という分類に含まれます。

家の建築を思い浮かべてみてください。最初に土台や柱を立て、その後で壁を付けたり、内装工事を行ったりしますが、この壁を付けたり、内装工事を行う工程がCSSです。

CSSはHTMLで作成した要素を直接指定して「プロパティ」で見た目を変更していきます。プロパティはサイズや色など詳細な部分まで指定することができます。

さらに自由な表現を可能にする：JavaScript

そして、より動的で凄いページを作るときに使用するのがJavaScriptです。

JavaScriptは家の建築で言うと、太陽光や床暖房、エアコンなど、より快適な生活を送るために付け足すオプションの部分。

こちらはHTMLやCSSと違い、正式なプログラミング言語に分類されます。JavaScriptがない場合でもホームページは成り立ちますが、最近では多くのサイトで利用されています。

例えば、スクロール時に下からアイコンが浮き上がってくるような装飾が施されている場合。フォームが付け加えられている場合。これらは全てJavaScriptの力で成り立っています。

HTMLの仕組み

ここからはHTML、CSS、JavaScriptの構造をサンプルコードを用いてご紹介します。まずはホームページの基礎となるHTMLです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <style></style>
        <script></script>
    </head>

    <body>
        
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

以上が基本のタグです。HTMLには開始タグと終了タグがあり、その開始タグと終了タグの中には別のタグを入れる『入れ込構造』になっています。

<!DOCTYPE html> → 文書がHTMLであることを示す
<html lang=”ja”></html> → HTMLの全体部分。言語が日本語であることを示す
<meta charset = “utf-8”> → 文字コードをUTF-8に指定する
<head></head> → 設定などを入れる部分
<body></body> → 枠組みを構成する本体部分

まだこの段階では何も表示されていません。

See the Pen
main.html by rabbittyu (@rabbittyu)
on CodePen.

CSSの仕組み

CSSはHTMLの要素を直接指定して書きます。CSSの記述場所は3種類ありますが、ここではHTML文書内に直接記述する方法を採用しました。

先程のHTMLに<script></script>という部分があったと思いますが、その中にCSSを書いていきます。

body {
     background-color: cadetblue;
     }

body {

background-color: cadetblue;

}

{}の前にある部分で、どの要素に対して装飾を行うかを指定します。ここでは本体部分であるbodyを指定したため、ページ全体に変更が施されました。

{}内では変更の内容を記述します。背景色を変えるプロパティbackground-colorを指定し、値にcadetblueを記述しました。最後は必ずダブルクォーテーション（;）で閉じます。

See the Pen
main.html+CSS by rabbittyu (@rabbittyu)
on CodePen.

JavaScriptの仕組み

JavaScriptは少し複雑になります。今回は簡単にボタンを表示し、クリックされるとアラートを表示する機能を作りました。

JavaScriptにも記述場所の種類がありますが、ここではHTML内の<script></script>内に記述しましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <script>
            function func1() {
                alert("ボタンがクリックされました");
            }
        </script>
    </head>

    <body>
        <button onclick="func1()">アラート表示</button>
    </body>
</html>

<!DOCTYPE html>

<head>

function func1() {

alert("ボタンがクリックされました");

}

</script>

</head>

<body>

<button onclick="func1()">アラート表示</button>

</body>

</html>

JavaScript内では関数func1を作成。HTMLのbodyタグ内でボタンを表示するbuttonタグを作成し、onclickという属性でJavaScript内で作成した関数を呼び出しています。

See the Pen
main.html+JS by rabbittyu (@rabbittyu)
on CodePen.

ホームページ(HP)のコーディングで注意すべき点

最後にホームページ制作時に注意しておきたいことを紹介します。

ブラウザチェック

インターネット検索でホームページを見るには「ブラウザ」というアプリケーションを使用します。

ブラウザにはGoogle、Edge、Safari、Firefoxなどの種類がありますが、コードは全てのブラウザで同じ動作をするわけではありません。

ユーザの使用するブラウザを配慮してコーディングをする、これがブラウザチェックです。

レスポンシブ対応

また最近ではスマートフォンなど、パソコンの画面とはサイズが異なるデバイスでもホームページが閲覧されています。

そのためホームページを作成する際は、パソコンの画面サイズだけでなくスマートフォンなどの縦長のデバイスも考慮しなければならないのです。

この設定はCSSで行う事ができ、デバイスのサイズごとに別のCSSを記述していきます。少し煩わしさを感じますが現在は必須の設定です。

内容の見やすさ・扱いやすさ

CSSでは部品のサイズを変更することも可能。ページのサイズに対して適切なサイズを指定することで、ユーザにとって扱いやすいページに設定することができます。

特にパソコンのカーソルではなく、スマートフォンを指で操作する場合などの誤クリックを防ぐ必要があります。

更新のしやすさ

最後は見落としがちな後進のしやすさです。ホームページは1度作成したら終了ではなく、常に最新の状態に保つ必要があります。

この際コードが長すぎたり、わかりづらかったり、同じ要素のものが散在したりすると、変更効率が格段に低下するため、更新しやすいコードを書く必要があるのです。

まとめ

今回はホームページのコーディングについて、簡単な構造をご紹介しました。

いつもは何となく閲覧していたサイトも、構造を知ることでよりじっくり観ることができるでしょう。

プログラミング学習中の皆さんは、優良なサイトを見つけ、コーディングの内容を調べてみてくださいね。

参考文献：
HTMLの基本 – MDN Web Docs
CSSの基本 – MDN Web Docs
JavaScriptとは – ウェブ開発を学ぶ | MDN

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。