AxiZ沖縄ブログ

エンジニア育成学校【AxiZ沖縄】のブログです。

HTML

講義の補足

講義のテキストだけでは説明されていない部分を補うことを目的として、 単元ごとに内容をアップしていきます。

まずはHTMLの講義の補足&まとめです。

用語の説明

まずは事前に知っておいてほしい用語の説明です。

  • 拡張子

    ファイルの種類を識別するためのもの。
    「ファイル名.xxx」の「.xxx」の部分が拡張子。
    テキストファイルの場合は「.txt」 HTMLファイルの場合は「.html」または「.htm」となります。

  • テキストエディタ

    テキストデータ(文字だけのデータ)を編集するためのソフトウェア。
    単にエディタと呼ぶこともあります。
    HTMLファイルやプログラムのファイル場合は、テキストエディタを使用します。
    Windowsの場合は標準で「メモ帳」というエディタがあるが、機能が少ないため、 通常使いやすいエディタを別途インストールして使用する場合がほとんどです。

  • ソースコード

    テキストエディタを使って書いたHTML(またはプログラム)のことをソースコードと呼びます。
    単にソースとかコードと呼ばれる場合もあります。

  • Webブラウザ

    Webページを閲覧するためのソフトウェアのことです。
    単にブラウザと呼ぶ場合もあります。
    「Google Chrome」「Edge」「Firefox」「Internet Explorer」等があります。

  • Webページ

    HTML等で作成されたページのことをWebページといいます。
    簡単に言えば、Webブラウザ上に表示されているものがWebページです。

  • Webサイト

    Webページの集まりのことです。
    Webページを閲覧するとき、トップページからリンクをたどって 一つのサービスの中でいくつかのWebページを閲覧するかと思います。
    そのような一つのサービスの中でのWebページの集まりがWebサイトです。

  • ホームページ

    Webブラウザを起動したときに表示されるWebページのことです。

    日常会話の中では「ホームページ」「Webページ」「Webサイト」 は区別されずに使われることが多いですが、開発をする場合は言葉の正確な意味を理解して注意して使用するようにしましょう。

事前準備

  • 拡張子の表示

    Windowsの場合、デフォルトの環境では、拡張子は表示されない設定になっています。
    開発をする場合は、拡張子が表示されていたほうが何かと都合が良いので、Windowsの設定で拡張子を表示しておきましょう。

  • テキストエディタを用意

    HTMLによる開発をするときは、使いやすいテキストエディタを用意しましょう。
    PC初心者で扱いやすいのは「サクラエディタ」あたり。
    高機能で使いこなせれば非常に便利なのは「Visual Sutdio Code」。
    自分が使いやすそうなもので良いので、何か一つ用意しましょう。
    Windowsに標準でついている「メモ帳」は開発には向いていないため、使用するのは避けましょう。

  • ブラウザの用意

    Webページを作成する場合、ブラウザは「Google Chrome」が便利ですので、 インストールして、デフォルトのブラウザとして設定しておきましょう。

リファレンス

プログラミングの業界ではリファレンスという言葉がよくできます。
要はマニュアルのようなものです。
分からないことがあったり、調べたいことがあれば、 リファレンスを参照して開発を進めます。 HTMLの場合はMDNをリファレンスとして活用してください。
もちろん自分で他の良いサイトを探して参考にしてもかまいません。

HTMLとは

HyperText Markup Languageの略で、Webページを作成するための技術です。
Markupとは印をつけるという意味です。
HTMLでは、タグと呼ばれるものを用いて、文章に印をつけて意味を持たせます。
通常Webページを作成する場合、HTML単体でWebページを作成する場面はほとんどなく、 CSSやjavaScriptといった別の技術と組み合わせながら作成します。

HTMLを見てみる

Google Chromeで、普段見ているWebページ（どのWebページでもいいです）を開いて、 右クリックして、ソースの表示を押してみましょう。
そうするとそのWebページの内容がHTMLで表示されます。
その中で不等号記号（「<」「>」）があるはずです。
不等号記号に囲われたものをタグと言います。HTMLは、このタグを学習することでできるようになります。

HTMLを作ってみる

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Sampleページ</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- コメント -->
        <p>こんにちは</P>
    </body>
</html>

index.htmlというファイル名で上記の内容のファイルを作成し、適当な場所に保存してください。
保存出来たら、Google Chromeでそのファイルを開きましょう。
タブに「Sampleページ」が表示され、ブラウザに「こんにちは」が表示されていれば成功です。
ブラウザに表示した状態のまま、テキストエディタで再度index.htmlを開き、「こんにちは」の部分を「こんばんは」に修正して保存してみましょう。
修正したら、ブラウザでF5キー、または更新ボタンをクリックして、最新に更新して下さい。
修正内容が反映されるはずです。 HTMLでは、このように、テキストエディタで修正・ブラウザで更新を繰り返しながら、 作成を進めていきます。

  • 注意点

    Chromeはすごく優秀なブラウザです。
    HTMLの記述が多少間違っていても、 良い感じに解釈して問題がないように表示してくれたりします。
    そのため、実際には文法上に問題があっても、ブラウザに表示された結果だけをみると気づかない場合があります。
    なので、使いやすいエディタを使って、ミスを発見しやすくする工夫も大事です。

ファイル名

  • Webサイトのトップページは「index.html」となる場合が多いです。
  • HTMLファイルの拡張子は「.html」または「.htm」となります。
  • 日本語のファイル名にすることも可能ですが、文字コードのトラブルなどを防ぐために英数字でのファイル名にすることが望ましいです。

タグ

  • 不等号記号（「<」「>」）に囲われているものをタグ(正確にはHTMLタグ)と言います。
  • 例えば、<html lang="ja">は、htmlタグ。<head>はheadタグ。
  • タグは基本的に開始タグと終了タグがセットになります。先頭に「/」が入ったタグが終了タグです。
    「<head>内容</head>」のような形です。この、開始タグ、内容、終了タグ、を合わせた全体を「要素」と呼びます。
    上記の場合、「head要素」のように呼ばれます。
  • タグの中には、内容と終了タグを持たないものもあります。metaタグやbrタグがその代表です。
  • どんなタグがあるか、どんな意味があるか、終了タグが必要かどうか、などはリファレンスを参照ください。

属性

属性はタグに対してオプションを指定するものです。
タグの中に<タグ 属性="属性値">の用に記述します。
スペース区切りでいくつでも指定することができます。必ず半角スペースで区切りましょう。全角スペースだとうまく動作しない場合があるので注意が必要です。
<タグ 属性1="属性値" 属性2="属性値">のような形です。
例えば、<html lang="ja">は、lang属性に属性値"ja"を指定している状態です。
タグによって、指定できる属性が異なります。タグによっては、特定の属性が必須になるものもあります。
属性値の指定の仕方も属性によって様々です。詳しくはリファレンス等で調べてみてください。

グローバル属性

属性は、タグによって指定できるものが決まっていますが、 一部、どのタグにも付けることができる属性があります。
それをグローバル属性と呼びます。色々ありますが、よく使用されるのは以下の3つです。

  • id属性
  • class属性
  • style属性

id属性とclass属性は、HTML内の要素を特定するための属性です。
HTMLだけでWebページを作成している場合にはid属性とclass属性を使用するメリットはありませんが、CSSやJavaScriptなどの別の技術と組み合わせて使用する場合に重要な役割を果たします。
要素を特定するという意味ではid属性とclass属性は同じですが、両者には明確に違いがあり、重要なので確実に理解するようにしましょう。
違いについての具体的な説明はリファレンスなどを参照してください。
style属性は、CSSというレイアウトに関する設定をするための属性です。
本格的にWebサイトを作成する際には、CSSは別のファイルに切り出すことがほとんどなので、使用頻度は少ないです。
ですがHTMLとCSSを学習するときには、簡単に試すことができるので便利です。

要素

タグの部分でも説明しましたが、開始タグ、内容、終了タグを合わせたものを要素と言います。
要素は基本的に以下の形になります。
</開始タグ 属性="属性値">内容</終了タグ>
HTMLは基本的に要素の組み合わせです。なので、タグの種類、属性の種類を覚え、その組み合わせて様々なWebページを作成することがHTML上達のコツです。
内容の部分は、基本的にテキストか、別の要素が入ります。
要素の中に別の要素が入っていることを入れ子構造と言います。
例えば、上記のindex.htmlでは、html要素の中に、head要素やbody要素が入れ子になっています。
<html><head>・・・</html></head>のように、入れ子になっていない場合は、不具合の原因になりますので、対応関係がうまくできているかどうか注意しましょう。

インデント

以下の2つのサンプルを見てください。

サンプル1

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sampleページ</title>
</head>
<body>
・・・
</body>
</html>

サンプル2

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Sampleページ</title>
    </head>
    <body>
        ・・・
    </body>
</html>

内容は全く同じですが、一般にサンプル2の方が見やすいです。
これは、入れ子になっているタグは、スペースを入れているからです。
これを、インデントと言います。日本語だと字下げという意味です。
HTMLに限らず、プログラミングでも同様ですが、 ソースコードを書くときは適度に改行やスペースを入れて読みやすくしておくことが重要です。
めんどくさがらずにきちんとインデントを整えることに慣れておきましょう。
ツール（テキストエディタ）によっては、自動でインデントをいい感じにそろえてくれるのもあるので、探してみると良いでしょう。

コメント

<!-- -->の中に書かれたものをコメントと言います。
コメントは、ソースコードに影響を与えません。
ソースコードだけでは分かりにくい部分があるときに、読みやすくする目的で、補足説明としてコメントを使用することが多いです。
もともと書かれていたソースコードをコメント化することを、コメントアウトといいます。
ソースコードを修正する場合に、後々元に戻せるように、元々あったソースコードをコメントにすることもよくあります。
ただし、HTMLの場合はブラウザで「ソースの表示」をした際にコメントの内容まで見られてしまうので、他人に見られてはまずい内容はコメントにしないようにしましょう。

タグの覚え方

タグには様々な種類があり、丸暗記しようとするとなかなか大変です。
しかし、意味を理解すれば覚えやすくなります。
例えば、テーブル要素で使われるタグとして、tr, th, td 等があります。
そのままだと覚えにくいですが、

  • tr : table row(テーブルの行)
  • th : table header(テーブルのヘッダー)
  • td : table data(テーブルのデータ)

のように、何の略か分かれば覚えやすくなります。
リスト要素で使われるタグとしては、ul, ol, li 等があります。
これは、

  • ul : unordered list(番号なしのリスト)
  • ol : ordered list(番号付きのリスト)
  • li : list item(リストの項目)

の意味です。この意味を知っているだけで各段に覚えやすくなります。

HTMLのバージョン

HTMLにはバージョンがあります。
サンプルのソースコードの先頭に記述している<!DOCTYPE html>という部分は、 HTML5の宣言です。それ以前のバージョンのHTMLにする場合は、別の記述になります。
ただし、HTML5以前のバージョンで記述するメリットも特にないので、意識する必要はないでしょう。
HTML5になって追加されたタグも多くあります。
HTML5以前のバージョンだと、それらのタグも使用できないため、デメリットの方が大きいです。
ただし、ブラウザによっては、HTML5のタグで対応されていないタグがある可能性もあります。
同じソースコードでもブラウザによって表示のされ方や対応の有無が異なる場合があることを知っておきましょう。

文字化け

htmlファイルを作成して、ブラウザで表示した際に、文字化けが発生することがあります。
文字化けが発生する原因は、文字コードの違いです。
文字コードとは、文字に対して割り振った番号のことです。
コンピュータは、内部では0と1の計算だけで動いています。
そのため、コンピュータはつきつめると数字の計算しかできません。
なので、日本語や英語などの文字も一つ一つに番号が振られており、数値として扱われています。
この番号の振り方にはいくつかの種類があります。
つまり、文字コードにいくつかの種類があるということです。
この記事を書いている時点では、htmlでは「UTF-8」という文字コードを使うことが一般的で、 多くのHTMLファイルではmetaタグの中で文字コードをUTF-8として指定しています。
しかし、HTMLファイルを作成して保存するときに、UTF-8以外の文字コードで保存してしまうと、 保存したときと表示するときの文字コードが異なるため、文字化けが起きてしまいます。
文字化けが発生した際は、作成したファイルの文字コードと、 metaタグの中で指定した文字コードが異なっていないかどうかを確認しましょう。

絶対パスと相対パス

パスとは、簡単に言えばファイルが置かれた場所のことです。
HTMLを作成する際には、画像ファイルを指定して画像を埋め込んだり、 CSSやJavaScriptといった外部のファイルを指定することが多いです。
その外部のファイルを指定する際に、パスという概念が必要になってきます。
ファイルの指定方法は、相対パスと絶対パスがあります。
相対パスは、今現在いる場所から辿っていく方法で、 絶対パスは、そのコンピュータの大元(WindowsであればCドライブ、Linuxであればroot)から辿っていく方法です。
どちらの方法が良い、というものはなく、ケースバイケースで最適なものが使用されるのですが、 指定方法が2つある、ということを知っておきましょう。

勉強法

  • ドットインストール

    1つ3分の動画でプログラミングが学べるサービスです。
    HTML等の、Web系に関する講座が豊富で分かりやすいので、 HTMLを学ぶにはドットインストールが最もオススメです。

  • progate

    ブラウザで実際にソースコードを入力しながら結果を試せるサービス。
    自分で手を動かして慣れたい、という方にはおすすめです。

  • 書籍

    HTMLとCSSは書籍がたくさんあります。
    書籍での学習が合っている人は、自分に合いそうな本を選んで読んでみてください。