見出し画像

初心者でもできる！HTML/CSS/JavaScriptで創る、癒しのドットアート #2HTMLの基本の「き」！ウェブページの土台を作ろう

code

【PR】

第2回目となる今回は、ウェブページの土台となる HTML について、じっくり学んでいきましょう！

前回の記事では、開発環境の準備と、簡単なHTMLファイルを作成しましたね。今回は、そのHTMLファイルの中身を一つ一つ丁寧に見ていきながら、ウェブページの仕組みを理解していきましょう。

HTMLって何？

HTML は HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ） の略で、ウェブページの構造を作るための言語です。

ここで、少し難しい言葉が出てきたので、詳しく説明しますね。

ハイパーテキストとは？

「ハイパーテキスト」とは、簡単に言うと、他の文書へのリンクを埋め込むことができるテキストのことです。

例えば、皆さんが普段見ているウェブページには、青い文字で表示されたり、下線が引いてあったりする部分がありますよね？あれがリンクです。そのリンクをクリックすると、別のページに移動できると思います。

このように、文書の中に別の文書へのリンクを埋め込み、文書同士をつなげることができるのがハイパーテキストの特徴です。

マークアップとは？

「マークアップ」とは、文書の各部分に 「タグ」 と呼ばれる目印をつけて、それぞれの部分がどのような役割を持っているのかをコンピュータに伝えることです。

例えば、「ここは見出しですよ」「ここは段落ですよ」「ここは画像ですよ」といった具合に、タグを使って文章の構造を明確にしていきます。

つまり、HTMLとは？

つまり、HTMLとは**「タグを使って文章の構造を記述し、リンクで他の文書と繋げることができる、ウェブページを作るための言語」** と言えます。

ウェブブラウザは、HTMLで書かれたファイルを読み込んで、タグで指定された構造に従って、文章や画像などを画面に表示してくれているのです。

HTMLの基本構造を見てみよう

それでは、前回の記事で作成した index.html の中身をもう一度見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>癒しのドットアート</title>
</head>
<body>
    <h1>はじめてのドットアート</h1>
</body>
</html>

これがHTMLの基本的な構造です。なんだか難しそうに見えるかもしれませんが、一つずつ分解していくと、実はとてもシンプルです。

1. <!DOCTYPE html>

これは、「この文書はHTMLで書かれていますよ」と宣言する部分です。ブラウザはこの宣言を見て、「これはHTMLで書かれたウェブページなんだな」と理解します。

ここは深く考える必要はありません！HTMLファイルの一番最初に、必ず書くものだと覚えておきましょう。おまじないのようなものです。

2. <html> タグ

<html> タグは、HTML文書の始まりと終わりを表します。全てのHTMLタグは、この <html> タグの中に書かなければなりません。

つまり、<html> から </html> までが、一つのHTML文書ということです。

lang="ja" は、この文書が日本語で書かれていることを示す 属性 です。属性とは、タグに追加情報を与えるためのものです。ここでは、html タグに lang 属性を使い、言語が日本語(ja)であることを指定しています。

3. <head> タグ

<head> タグには、ウェブページのタイトルや、文字コード、外部ファイルの読み込みなど、そのウェブページに関する情報を記述します。この部分に書かれた内容は、ブラウザの画面には直接表示されません。

例えるなら、<head> タグはウェブページの「裏方」さんです。ユーザーには見えないけれど、ウェブページが正しく表示されるために必要な情報を記述しています。

  • <meta charset="UTF-8">: これは、ウェブページの文字コードを UTF-8 に指定しています。文字コードとは、コンピュータが文字をどのように扱うかを決めるルールです。UTF-8は世界中の多くの言語に対応しているので、日本語のウェブページでもよく使われます。この設定をしておくことで、文字化け（文字が正しく表示されない現象）を防ぐことができます。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: これは、スマートフォンなどのモバイル端末でウェブページを閲覧する際に、画面サイズに合わせて表示を調整するための設定です。width=device-width は「ページの幅をデバイスの幅に合わせる」、initial-scale=1.0 は「初期のズーム倍率を1.0にする（等倍にする）」という意味です。

  • <title>癒しのドットアート</title>: これは、ウェブページのタイトルを指定します。このタイトルは、ブラウザのタブや、検索結果の見出しなどに表示されます。

  • <link rel="stylesheet" href="style.css">: この部分は、外部のスタイルシート（CSS）を読み込むための記述です。ここでは style.css という名前のCSSファイルを読み込んでいます。CSS (Cascading Style Sheets) は、ウェブページの見た目（色、フォント、レイアウトなど）を装飾するための言語です。今は「スタイルシートを読み込むためのもの」とだけ覚えておいてください。CSSについては、次回の記事で詳しく解説します。

4. <body> タグ

<body> タグには、実際にウェブページに表示される内容を記述します。ユーザーが見たり操作したりする部分は、すべてこの中に書きます。

  • <h1>はじめてのドットアート</h1>: これは、見出しを表示するためのタグです。<h1> は最も大きな見出しを表し、<h2>、<h3> と数字が大きくなるほど、小さな見出しになります。ここでは、「はじめてのドットアート」というテキストが見出しとして表示されます。

タグの書き方

HTMLでは、< と > で囲まれたものをタグと呼びます。

多くのタグは、<p> のような開始タグと </p> のような終了タグで、内容を挟んで使います。終了タグは、開始タグの < の後に / (スラッシュ) をつけます。

例えば、

<p>こんにちは、世界！</p>

と書くと、「こんにちは、世界！」という文章が1つの段落として表示されます。<p> はParagraph（段落）の頭文字で、段落を表すタグです。

終了タグを忘れると、どこまでがその要素なのかがわからなくなり、レイアウトが崩れてしまうことがあるので、注意が必要です。開始タグを書いたら、すぐに終了タグもセットで書く癖をつけましょう。

今回のプロジェクトで使うHTMLタグ

今回のプロジェクトでは、主に以下のHTMLタグを使用します。

  • <div>: 複数の要素をグループ化するためのタグです。<div> タグ自体は、特に見た目を変える効果はありませんが、<div> タグで囲んだ要素全体にスタイルを適用したり、JavaScriptでまとめて操作したりする際に便利です。

  • <canvas>: このタグで囲まれた領域に、JavaScriptを使って、図形やアニメーションを描画することができます。今回のプロジェクトでは、この canvas 要素を使って、ドットアートを描画します。

index.html に canvas 要素を追加しよう

それでは、index.html に canvas 要素を追加して、ドットアートを描画するための「キャンバス」を用意しましょう。

index.html を以下のように修正してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>癒しのドットアート</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <canvas id="myCanvas"></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

<body> タグの中に、以下の2つのタグが追加されました。

  1. <div class="container">: この <div> タグは、canvas 要素を囲むためのものです。class="container" と指定することで、この <div> タグに container という名前をつけています。この名前を使って、後でCSSでスタイルを適用しやすくします。

    • class属性: class 属性は、HTML要素に名前をつけるための属性です。同じ class 名を持つ要素をグループ化して、まとめてスタイルを適用したり、JavaScriptで操作したりすることができます。

  2. <canvas id="myCanvas"></canvas>: これが、ドットを描画するためのキャンバスです。id="myCanvas" と指定することで、この canvas 要素に myCanvas という名前をつけています。この名前を使って、JavaScriptからこの canvas 要素を特定して、操作することができます。

    • id属性: id 属性は、HTML要素に固有の名前をつけるための属性です。id 属性の値は、ウェブページ内で重複してはいけません。

<body>タグの最後にある <script src="script.js"></script> は、HTMLファイルとJavaScriptファイルを関連付けるための記述です。src属性で、読み込むJavaScriptファイルのパスを指定します。ここでは、script.js という名前のJavaScriptファイルを読み込んでいます。

まとめ

今回は、HTMLの基本構造とタグの役割について、さらに詳しく学びました。

  • HTMLはウェブページの構造を作るための言語

  • HTMLは タグ を使って文章をマークアップする

  • <!DOCTYPE html> はHTML文書の宣言

  • <html> タグはHTML文書の始まりと終わりを表す

  • <head> タグにはウェブページの情報（文字コード、タイトル、外部ファイルの読み込みなど）を記述

  • <body> タグにはウェブページに表示する内容を記述

  • <div> タグは要素をグループ化する

  • <canvas> 要素はJavaScriptで図形を描画するための領域

  • <link rel="stylesheet" href="style.css"> でCSSを読み込む

  • <script src="script.js"></script> でJavaScriptを読み込む

  • class 属性で要素に名前をつけてグループ化できる

  • id 属性で要素に固有の名前をつけることができる

次回予告

次回は、CSSを使って、ウェブページの見た目を整えていきます。背景色や文字の大きさ、canvas 要素の配置などを調整して、ドットアートを表示するための土台を作りましょう。

お楽しみに！

HTMLはウェブ制作の基礎となる重要な言語です。今回の内容をしっかり理解して、次のステップに進みましょう！

【必読】Webデザインの入門書

  1. 『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

  2. 『これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本』

  3. 『HTML/CSSブロックコーディング デザインをすらすら再現できる』

これらの書籍は、Webデザインの基礎を学ぶのに最適な入門書です。HTMLとCSSの基本的な知識から、デザインの実践的なテクニックまで、幅広くカバーしています。1冊目として、しっかりと基礎を固めたい方におすすめです。

いいなと思ったら応援しよう！