ゼロからのWebサイト制作: 第1週で学ぶべきHTML, CSS, JavaScriptの基本

Web技術を学ぶというのは、一見、複雑で難しそうに思えるかもしれません。

しかし、それは遠い昔の話。

今、多くのツールやリソースが手に入る時代に、誰もがWebサイトを作成する力を持っています。

この記事を通して、完全な初心者であっても、たった1週間で基本的なWeb制作のスキルを習得する方法を学びます。

あなたの創造力と情熱を持って、新しい技術の世界への旅を一緒に始めましょう！

3ヶ月でゼロからWebサイト制作のプロになるための全体像に関して、以下の記事で紹介しています。
まだ読んだことがない方は、こちらの記事から読んでいただくのがオススメです！

3ヶ月でゼロからWebサイト制作のプロへ！ステップバイステップガイドWebサイト制作は、私たちに未知の領域に足を踏み入れるような興奮と、自分自身で何かを作り出す達成感をもたらしてくれます。しかし、多く...

はじめに：Web制作の魅力と第1週目の目標
- Web制作がもたらす可能性
- この1週間での学びの流れと目標
Web制作の3大要素：HTML, CSS, JavaScriptの役割
手を動かそう！最初のHTMLの基本
美しいデザインのためのCSS入門
ページに動きをつけるJavaScriptの基礎
第1週目のまとめと次のステップへ

はじめに：Web制作の魅力と第1週目の目標

Web制作とは、インターネット上で情報やサービスを提供する「Webサイト」を作成することを指します。

皆さんが日常的にインターネットを使って情報を検索したり、ショッピングを楽しんだりするとき、背後には多くの技術が動いていることを感じたことがあるかもしれません。

Web制作がもたらす可能性

Web制作の最大の魅力は、自らのアイディアや情報を世界中の人々と共有することができる点にあります。

例えば、自分の趣味や専門知識を元にブログを立ち上げたり、オンラインショップを開始することができます。

このように、Webを通じて多くの人とつながる喜びや、新しいキャリアの可能性を広げるチャンスを得ることができるのです。

この1週間での学びの流れと目標

今週の目標は、Web制作の3大要素であるHTML, CSS, JavaScriptの基本を理解し、簡単なWebページを作成することです。

何も知識がない状態からスタートするため、最初は難しく感じるかもしれませんが、一つ一つの基礎をしっかりと学ぶことで、次第に自分だけのオリジナルなWebページを作る楽しみを味わえるようになります。

この1週間は、その第一歩を踏み出すための期間として、一緒に学び進めていきましょう。

Web制作の3大要素：HTML, CSS, JavaScriptの役割

Webサイト制作には、さまざまな技術やツールが存在しますが、その中でも特に重要なのは、HTML、CSS、そしてJavaScriptという3つの要素です。

これらはWebページを形成するための基盤となり、それぞれが異なる役割を持っています。

HTML：Webページの骨組み

HTMLとは「HyperText Markup Language」の略で、Webページの基本的な構造や内容を記述する言語です。

具体的には、テキストや画像、リンクなどの情報をどのように配置するかを指定する役割があります。

HTMLを使うと、文章の見出しや段落、リストなどを作成できます。

例えば、<h1>これは見出し</h1>というように、特定のタグを使って内容を囲むことで、それがどのような要素であるかを示すことができます。

CSS：デザインとスタイリングの魔法

CSSとは「Cascading Style Sheets」の略で、Webページのデザインやスタイルを定義する言語です。

HTMLがページの内容を記述するのに対し、CSSはその内容をどのように見せるかを指定します。

例えば、文字の色やフォント、背景色、レイアウトなどのデザイン要素を指定することができます。

color: red;というように、特定のスタイルを設定することで、Webページの見た目をカスタマイズすることができます。

JavaScript：動きを生むプログラミング言語

JavaScriptは、Webページに動的な要素やインタラクティブな機能を追加するためのプログラミング言語です。

例えば、ボタンをクリックしたときの動作や、スライドショーの動き、フォームのバリデーションなど、ページに動きや機能を追加する場面で使用されます。

JavaScriptを使うことで、単なる静的な情報の表示から一歩進んで、ユーザーとのインタラクションを持つ動的なWebページを実現することができます。

これらの3つの要素は、Webページ制作において欠かせないものであり、それぞれが協力して一つのWebサイトを形成しています。

これからの学習で、それぞれの要素の深い部分に触れていく中で、Web制作の奥深さや楽しさを感じることができるでしょう。

手を動かそう！最初のHTMLの基本

Webサイトの制作を始める前に、最も基本的な部分、HTMLを理解することからスタートします。

HTMLを知ることで、Webページの基盤を作る技術を手に入れることができます。

タグとは？：HTMLの基本構造

HTMLは、いくつかの「タグ」と呼ばれるものを使って構成されています。

タグは、<と>の間にキーワードを挟んで作られ、Webページの構成要素を示します。

例えば、<h1>は大きな見出しを表し、<p>は段落を示すタグです。

基本的なHTMLの構造は以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
</head>
<body>
    ここにコンテンツを書きます。
</body>
</html>

この構造の中で、<html>タグはページの始まりと終わりを示し、<head>内にはページのメタデータやタイトルが、<body>内には実際のコンテンツが記述されます。

実践！シンプルなWebページの作成

では、実際にシンプルなWebページを作成してみましょう。

テキストエディタを開き、上記の基本的なHTML構造をコピーします。
<body>タグの中に<h1>こんにちは、世界！</h1>を追加します。
ファイルを「index.html」として保存します。
保存したファイルをダブルクリックすると、Webブラウザが開き、作成したページが表示されます。

コード解説：HTMLの主要なタグとその使い方

<h1> から <h6> : 見出しタグ。数字が大きくなるにつれて、フォントサイズが小さくなります。
<p> : 段落を表すタグ。
<a href="URL">: リンクを作成するタグ。”URL”の部分にはジャンプ先のアドレスを入れます。
<img src="画像のパス">: 画像を表示するタグ。
<ul>: 点が付くリストを作成。中に<li>タグで項目を追加します。
<ol>: 番号が付くリストを作成。中に<li>タグで項目を追加します。

これらのタグを組み合わせることで、基本的なWebページを作成することができます。

今後の学習で、さらに多くのタグや属性、テクニックを学んでいくことで、より豊かなコンテンツのWebページを制作することができるようになります。

美しいデザインのためのCSS入門

Webページを作成する際、HTMLだけではページの内容しか表現できません。

ページを見た目よく、魅力的にするためには、CSSというスタイリングの言語を使用します。

このセクションでは、CSSの基本から、美しいデザインを作るためのテクニックを学んでいきます。

CSSの基本的な構文

CSSは「セレクタ」で要素を選択し、その要素にスタイルを適用する形式で書かれます。

以下は基本的な構文です。

セレクタ {
    プロパティ: 値;
}

例えば、全ての段落(<p>)の文字色を赤にしたい場合、次のように書きます。

p {
    color: red;
}

シンプルなスタイルの適用：文字色、背景色など

基本的なスタイリングをいくつか紹介します

文字色の変更

h1 {
    color: blue;
}

背景色の設定

body {
    background-color: #f3f3f3; /* グレーの背景色 */
}

ボーダーの追加

div {
    border: 2px solid black; /* 黒い線で囲む */
}

これらのスタイルを組み合わせることで、ページにさまざまなデザインを追加することができます。

レスポンシブデザイン：デバイスごとのスタイリング

近年、スマートフォンやタブレットなど、さまざまなデバイスでWebサイトを閲覧する人が増えています。

そのため、デバイスのサイズに合わせてデザインが変わる「レスポンシブデザイン」は非常に重要です。

CSSの@mediaクエリを使用することで、特定の画面サイズに対してスタイルを適用することができます。

@media (max-width: 768px) {
    body {
        background-color: yellow; /* 画面サイズが768px以下の場合、背景色を黄色にする */
    }
}

このように、@mediaクエリを活用することで、デバイスや画面サイズごとに最適化されたデザインを提供することができます。

ページに動きをつけるJavaScriptの基礎

Webページの見た目を整えるのはCSSの役割ですが、ページに動きやインタラクティブな機能を追加するためには、JavaScriptというプログラミング言語を使用します。

このセクションでは、JavaScriptの基本概念と、シンプルなスクリプトを用いてページに動的な要素を追加する方法を学んでいきます。

JavaScriptの役割と特徴

JavaScriptは、Webブラウザ上で動作するプログラミング言語で、以下のような特徴や役割があります。

ユーザーのアクションに反応してページの内容を動的に変更する。
フォームの入力値のチェックや、ページ内のアニメーションを制御する。
外部のAPIやデータベースと連携して、リアルタイムで情報を取得・表示する。

簡単なスクリプトを使って動的な要素を追加

例として、ボタンをクリックすると、あるテキストが表示される機能を実装してみましょう。

HTML

<button id="showTextButton">テキストを表示</button>
<p id="dynamicText" style="display: none;">こんにちは、JavaScriptの世界へ！</p>

JavaScript

document.getElementById("showTextButton").addEventListener("click", function() {
    document.getElementById("dynamicText").style.display = "block";
});

このコードは、”showTextButton”というIDのボタンがクリックされると、”dynamicText”というIDのテキストが表示されるように動作します。

コード解説：初心者向けのJavaScript関数とその実装

上記のサンプルコードには、JavaScriptの基本的な概念や関数が含まれています。

document.getElementById("id名"): IDを指定してHTML要素を取得する。
addEventListener("イベント名", function() {}): 指定した要素にイベントリスナーを追加する。この例では、クリックイベントを監視しています。
style.display: 要素の表示・非表示を制御するプロパティ。

JavaScriptは非常に多機能で強力な言語です。

今回は基本的な部分を学びましたが、これを基に更に高度なスクリプトやアプリケーションの作成に挑戦してみると良いでしょう。