初めてのHTML5 - (1) - HTMLの要素と属性 | 初めてのHTML -Kyon magazine

今回はHTMLの属性と要素に対して詳しく扱ってみようと思います。

皆さんは誰かと会話する時、何を使って話すでしょうか？そう！言語です。

今から説明するHTMLは、サイトを構成するコンテンツを定義する言語です。

HTMLはブラウザに「こういうのを見せて」と言うような言語です。

これから、ブラウザと話すための言語「HTML」に対して学んで行きたいと思います。

そこまで難しくありません。

ただ貴方が向き合ってるパソコンにお願いをするだけです。

では早速見てみましょう。

キョン

HTMLをわかるかどうかによってサイトの見方が大きく変わります。初めての方も問題なく理解できるように全力で説明していきます。

HTML – 要素の基本

要素とは？

HTMLは、一連の「要素」で構成されています。

ここで「要素」とはWebページの一部であり、この「要素」は英語ではtagやelementと呼ばれます。

この「要素」はデータ項目やテキストのかたまりや画像を含んだり、何も含まらなかったりします。

要素の詳細

基本的に「要素」は三つのもので構成されます。その三つのものというものは以下のようになってます。

開始タグ（Opening tag）：こちらは、要素の名前を「山括弧」で囲んだ物です。「これからこのタグで要素を構成します。」っていう感じの宣言のような物です。
終了タグ（Closing tag）：こちらは、要因の名の前にスラッシュが入っている以外は開始タグと同じです。こちらは「ここまでがこの要素の構成です。」っていう感じの宣言のような物です。
コンテンツ（Content）：要素の内容です。こちらにはデータ項目、テキスト、画像などのデータが入ります。

実際のHTMLで見てみよう

HTMLの要素はざっくりと以下のような構成になっています。

<p>BELTA商品の詳細</p>

こちらはブラウザでは以下のように表示されます。（※色はあくまで強調のためです。実際には普通の文章が表示されます。）

吾輩は猫である

それでは、上記の要素を説明して行きます。

左の<p>：こちらが開始タグであり「今からpタグを使います。」という意味です。
右の</p>：こちらは終了タグであり「ここまでがpタグです。」という意味です。
吾輩は猫である：こちらはコンテンツであり、画面に表示される文書を入れます。
<p>吾輩は猫である</p>：この文書全体が一つの「要素」となってます。

HTML – 要素と属性

属性とは

HTMLの要素には「属性」が付くことがあります。

ここで「属性」というものは「要素」に何らかの機能を追加したり、基本機能を修正する時に使用されます。

要素の詳細

HTMLの「属性」は一般的に「属性の名前」と「属性値」にわかれます。そして、その間の区分は『＝』で分け「開始タグ」の「要素名」の後ろに「属性の名前」を書くことによって作成することができます。

それから、「要素値」は『’』または『”』で囲むことで使えます。

属性名：使われる属性の名前を表せます。位置は要素の開始タグの後でありこれから使われる属性の名前を宣言表示します。
属性値：「属性名」による属性の機能の詳細を記述します。

実際のHTMLで見てみよう

HTMLの属性はざっくりと以下のような構成になっています。

<p style="font-weight: bold;">吾輩は猫である</p>

こちらはブラウザ上で以下のように表示されます。

吾輩は猫である

他の文章より少し文字が太く表示されてるのが確認できたでしょうか？

このように「要素」に力を乗せてくれるのが「属性」です。

それでは属性に対して上記に照らしざっくり説明します。

「p」の後ろの「style」：こちらは属性名であり「pというタグにstyleという属性を追加します。」という宣言のような物です。
「styleの後ろ」で『“』で囲まれている「font-weight: bold;」：こちらが「属性値」であり、「styleの内容として『font-weight: bold;』という属性値を導入します。」という意味です。

【演習】実際のWebページで見てみよう

それでは、実際にHTMLを作成してみましょう。

1.まずは、テキストエディタを開きましょう。

2.下記のHTMLをそのまま書いてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ここはテストページのタイトル欄です</title>
  </head>
  <body>
    <p style="font-size: 80px;">こちらはテストページの内容です。</p>
  </body>
</html>

3.書期終わったら。「test.html」という名前でfileを保存してみましょう。

4.その後、作成したhtmlファイルを実行（ダブルクリックか、クリックの後エンター）してみましょう。

5.そうすると以下のようなページが開かれます。

こう表示されたら正解です。

おめでとうございます。これは貴方が作った初めてのホームページです。

タイトルの文字はブラウザの上に表示されます。

画面が真っ白の時は、どこかが間違っていますので、もう一度確認しましょう。

上記のページのタグの説明に対する詳細はMDNのHTMLページで確認できます。

MDNとは？

MDN Web Docsは、ウェブ標準及びMozillaプロジェクトの開発文書のためのMozillaの公式ウェブサイトである。以前の名称はMozilla Developer Network (モジラ・デベロッパー・ネットワーク、略称: MDN)、更に以前はMozilla Developer Center (モジラ・デベロッパー・センター、略称: MDC) と呼ばれていた。
フリー百科事典『ウィキペディア（Wikipedia）』

まとめ

以上でHTMLの基礎である要素とその構成する「要素」と「属性」に対して調べてみました。一応これだけ知って置けば基本的なサイトのエラーは直せると思います。

皆さんはHTMLのに対して歩き出したような物です。

これからも頑張ったら素晴らしいWebエンジニアになれると思います。

おまけ

エンジニアなら”聞くだけ”より”研究”をする癖を付けよう。

ここはあくまで私の考えですが、エンジニアなら検索をする癖を付ける必要があると思います。

今、エンジニアの方もいるし、そうでない方もいると思いますが、エンジニアは「経歴＝実力」であることが原則に守られる職種ではないと思います。

しかし、ほとんどの職種ではこの原則が成立してしまい、エンジニアに向けても個人で探求するより「先輩に聞いてみたら」とか「あの人なら知ってるから聞いてみて」とかなど無責任なことをよく聞かれたかも知りません。

解決できたら解決の仕方だけを覚えて終わり、その後気にしなくなることが良くあると思います。

このような考え方はエンジニアとして危険だと思います。システムのエラーって決まったパターンだけで来るわけではないからです。

原因やエラーなどを読む能力がなしで「一応、先輩に頼ろう〜」っていう姿勢は問題を解決し、システムを維持するエンジニアの力に繋がらないからです。

エンジニアはずっと自分との戦いです。

でも開発自体を楽しむようになったらゲーム攻略のように面白くなります。エラーを直し原因を把握した快感は、ゲームの難しいボスを攻略した時ほどの快感に匹敵すると思います。（個人的な感じだとグラブルのマグナをソロプレイした時の感覚と似てました笑）

まぁ…色々雑談はが長くなりましたが、皆さんエンジニアである以上研究する習慣を付けましょう！