ホームページの作り方入門編〜HTML CSS Javascriptとは？〜
2023/09/01
ブログ
2023/09/01
ウェブがどこにでもある現代社会において、ホームページはあなたのアイデア、ビジネス、プロジェクト、または趣味を世界に紹介するための最も効果的な方法の一つとなっています。しかし、ホームページ制作とは一体何なのでしょうか？それは、単に情報を公開するための手段でしょうか？それとも、より多くの人々にアピールするためのクリエイティブなプロセスでしょうか？
ホームページとは、本来あるウェブサイトの最初のページ、いわゆる「ホーム」ページを指します。一方、ウェブサイト（ウェブページ）とは、インターネット上で閲覧可能なひとまとまりのページ群を指します。
しかしながら、一般的に日本では「ウェブサイト」のことを「ホームページ」と呼んでおり、「ホームページ」と日本で呼ばれるものは、ウェブサイトの最初のページではなく、人まとまりのウェブサイトのことです。
そうです。「ホームページ」は和製英語なのです。
ホームページ制作は、情報を共有し、商品やサービスを販売し、自己表現するための重要な道具です。それはまた、ビジネスや個人が自己表現、広報、マーケティング、またはコミュニケーションのために使用する、クリエイティブで技術的なスキルを必要とするプロセスでもあります。
ホームページを作成する際の最初のステップは、HTMLの理解です。HTML（HyperText Markup Language）とは何か、そしてそれがどのようにホームページを形成するのかを理解することが重要です。
HTMLは、HyperText Markup Languageの略で、ホームページの構造を作るための言語です。これは、インターネット上の文書をマークアップ（つまり、情報の種類や構造を指定する）するために使用されます。
HTMLの主な役割は、テキストに「意味」を与えることです。これは「マークアップ」の部分で、例えば、一部のテキストを見出しとしてマークアップしたり、他の部分を段落としてマークアップしたりします。
HTML文書は「要素」で構成されています。これらの要素は、特定の種類の情報を表す「タグ」で囲まれています。例えば、h1タグは最も重要な見出しを、pタグは段落を表します。これらのタグには、さらに詳細な情報を提供する「属性」を追加することができます。
HTMLには多くの種類のタグがありますが、以下にいくつかの基本的なものを挙げます。
h1タグ：webサイトの1番大きい見出しを定義します。本ていうと表示のタイトルにあたります。
h2タグ：h1が最も重要で、h2その次に大きな見出しと認識されます。本で言うと目次の中の大きい見出しにあたります。h6まであり、h6タグが最も小さい見出しをさします
pタグ：段落を定義します。
a：URLリンクを定義します。このタグは属性”href”を使用して、リンクの目的地を指定します。
img：画像を埋め込みます。このタグはsrc（画像のURL）とalt（画像がロードできない場合の代替テキスト）という二つの重要な属性を使用します。
HTMLを使用すると、テキスト、リンク、画像、動画など、ホームページにさまざまなコンテンツを表示することができます。また、HTMLは他のテクノロジー（プログラミング言語等）と連携することで、より複雑で動的なウェブページを作成することも可能です。
次に学ぶべきはCSS（Cascading Style Sheets）です。これはHTMLに色やレイアウトなどのスタイルを追加するための言語です。
CSSとは、Cascading Style Sheetsの略で、HTML要素にスタイル（色、フォント、レイアウトなど）を追加するためのスタイルシート言語です。CSSはホームページの見た目と体裁を制御します。
CSSの主な役割は、ホームページに美的なデザインを追加することです。これにより、ユーザー体験が向上し、ホームページの全体的な印象を向上させることができます。また、CSSは様々なデバイスや画面サイズに対応するレスポンシブなデザインを作成するためにも使用されます。
CSSルールは二つの主な部分から成り立っています：セレクタと宣言ブロック。セレクタはスタイルを適用するHTML要素を指定します。宣言ブロックは一つまたは複数の宣言（プロパティと値の組み合わせ）を含む、中括弧で囲まれた部分です。
CSSには多くのプロパティがあり、それぞれがホームページの異なる部分をスタイル付けします。
color：テキストの色を定義します。
font-size：フォントのサイズを定義します。
background-color：要素の背景色を定義します。
margin、padding：要素の周囲の空間を定義します。
CSSを使用すると、ホームページの見た目を制御することができます。色、レイアウト、アニメーション、レスポンシブデザインなど、すべてCSSで管理できます。
最後に学ぶべきはJavaScriptです。これはホームページにインタラクティブ性（利用者とPC・スマホ等が対話を行うように操作を進めていく形態）を追加するための言語です。
JavaScriptとは、ホームページに動的な要素（例えば、ユーザーの操作に反応する要素や、時間に基づいて変化する要素）を追加するためのプログラミング言語です。
JavaScriptの主な役割はホームページに動的な機能を追加することです。これにより、ユーザーがホームページと対話できるようになります。また、JavaScriptはウェブブラウザ上で直接実行できる言語であり、これにより即時の反応と高いパフォーマンスが可能となります。
JavaScriptの基本的な構造には以下のようなものがあります。
・変数：データを格納するための「箱」のようなものです。JavaScriptではvar、let、constというキーワードを使って変数を宣言します。
・関数：特定のタスクを実行するためのコードブロックです。一度定義された関数は何度でも呼び出すことができます。
・オブジェクト：キーと値のペアを保持するコンテナです。JavaScriptでは配列や関数もオブジェクトとして扱われます。
JavaScriptには多くの重要な概念がありますが、ここでは特に初学者にとって重要な「イベント」および「DOM操作」に焦点を当てます。
・イベント：ホームページ上で何かが起こったとき（例えば、ボタンがクリックされたときや、フォームが送信されたとき）に発生するものです。JavaScriptを使ってこれらのイベントを「聞く」ことができ、イベントが発生したときに特定のコードを実行することができます。
・DOM操作：DOM（Document Object Model）はホームページの構造を表すもので、JavaScriptを使ってDOMを操作することでホームページのコンテンツやスタイルを動的に変更することができます。
JavaScriptを使えば、ユーザーのアクションに対してリアルタイムに反応するインタラクティブなホームページを作ることができます。また、フォームのバリデーション（入力チェック）、画像スライダー、インタラクティブな地図、アニメーションなど、さまざまな機能を実装することができます。
これまでに述べたHTML、CSS、JavaScriptは、一緒に使われることで最も力を発揮します。これら3つの技術が連携することで、機能的で美しい、そしてインタラクティブなホームページを作成することができます。
HTMLとCSSは手を取り合ってホームページを構築します。HTMLがホームページの「骨格」を提供し、その内容を構造化します。一方、CSSはその「骨格」に「肌」をつけ、見た目とレイアウトを整えます。
JavaScriptは、HTMLとCSSで作られた静的なホームページに「動き」を追加します。ユーザーのアクションに反応したり、ホームページの要素を動的に変更したりすることで、ホームページを生き生きとさせます。
今回の記事では、ホームページ制作の基本となるHTML、CSS、JavaScriptについて説明しました。HTMLはホームページの構造を作り、CSSはその見た目を整え、JavaScriptはインタラクティブな要素を追加します。
初学者にとって、これらの技術を一度に学ぶことは大変かもしれませんが、少しずつ理解を深めていけば、きっと自分だけのホームページを作ることができるようになるでしょう。
今回の記事で説明したホームページ制作の基礎を念頭に、手を動かし学習し、あなたがホームページ制作を楽しめるようになることを願っています。