![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/07/12
初めまして、デジナーレ福岡オフィスの徳安です。
この記事では、HTMLの基礎知識について説明いたします。
HTMLとは？？
・HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、マークアップ言語の１つです。
ウェブサイトの骨組みを指定するための言語です。
WebサイトはHTMLとCSSで構成されており、CSSはデザイン部分、文字の部分はHTMLで作成しています。
HTMLファイルの骨組み
・!DOCTYPE html
|
1 |
<!DOCTYPE html> |
Doctype宣言といい、このページがどのバージョンのHTMLで、どの仕様に合わせられて作られているのか記述しています。
HTMLファイルを作る上で必ず必要なもので、１つのファイルに１つ必要です。
必ず１行目に書くようにしてください。
・html
|
1 |
<html lang = "ja"> |
Doctype宣言のすぐ後に記述します。この分は、HTMLの文章で書かれていて、lang(=言語)は日本語で書かれている、ということが記述されています。
・head
|
1 |
<head> ～ </head> |
この部分は、ページのタイトルや説明文、外部ファイルのリンクなどを記述しています。
ブラウザには表示されない部分です。
・meta
|
1 |
<meta charset="utf-8"> |
これは文字コードを「utf-8」にするという設定です。
これを設定することで、文字化けが起こりにくくなります。
・title
|
1 |
<title> ～ </title> |
文字の通りウェブサイトのタイトル部分を記載します。
ブラウザーでページを表示するときのタブ部分に表示されます。
・body
|
1 |
<body> ～ </body> |
ここにコンテンツを入力することで実際にブラウザーで表示されます。
HTMLでよく使うタグ
| h1~h6 | 見出しを表示、数字の順に使用する |
| p | 文章の段落を表す |
| img | src属性で表示したい画像を指定して表示 |
| a |
リンクを貼る。リンク先はhref属性で指定 （mailto：“メールアドレス”でメールソフトの起動ができる） |
| ul | 番号のない箇条書きリスト |
| ol | 番号付きの箇条書きリスト |
| li | リストの中身 |
| br | 改行させる |
|
small |
著作権や法的表記を含んだテキスト |
| span | spanタグで囲んだ部分のみ、デザインを変更することができる |
| script |
スクリプトデータを埋め込んだり参照する JavaScriptのコードに使う |
| header | ページ上部にある要素検索 フォームやナビゲーションも含む |
| footer | ページ下部にある要素 |
| article | ページ内の記事になる部分 独立したページとしてなりたつ |
| aside | 本文ではない補足情報でサブメニューやサイドバーなどで使われる |
| link |
参照する外部ファイルやＣＳＳファイルを読み込むときに使われる rel＝“stylesheet”（ファイルとの関係性、どのようなものなのか） href＝“https:/example.com”（どのファイルを読むかの記載） |
表
| table | 表を表すタグ |
| tr | 表のラインとなる部分、1行を囲む |
| th | 表の見出しを表すセル |
| td | 表のデータを表すセル |
表の応用
・縦方向に結合させる
thタグまたはtdタグに、colspan属性を追加
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <tr> <th>セル１＋２</th> <th>セル２</th> </tr> <tr> <td colspan="2">セル３＋４</td> </tr> <tr> <td>セル５</td> <td>セル６</td> </tr> </table> |
| セル１ | セル２ |
|---|---|
| セル３＋４ | |
| セル５ | セル６ |
このようにセルを結合させることができます。
・縦方向に結合させる
thタグまたはtdタグに、rowspan属性を追加
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table> <tr> <th>セル１</th> <th>セル２</th> </tr> <tr> <td rowspan="2">セル３＋５</td> <td>セル４</td> </tr> <tr> <td>セル６</td> </tr> </table> |
| セル１ | セル２ |
|---|---|
| セル３＋５ | セル４ |
| セル６ |
このようにセルを結合させることができます。
属性のClassとIdについて
classとidは簡単に言うと、指定した部分のデザインのみを変えることが出来る属性のことです。
一番初めにお話ししたように、HTMLはあくまでウェブサイトを作る「骨組み」です。
そのため、デザインなどを付ける際にはスタイルシート（CSS）を使用しないといけません。
その時に、指定した箇所のデザインを変更する際に役立つのがclassとidです。
ClassとIdの使い分けは？？
Classは、使いまわしをして、何回使用しても大丈夫ですが、idは一度しか使用することができません。
| id |
ひとつのidはページ内で1度しか使用できない。 また、1要素に複数のidをつけれない。 |
| class |
ひとつのページ内で同じclassをいくつでも使える。 1つの要素に複数のclassをつけてよい。 |
classは複数の要素に使うことが可能ですので、同じスタイルを要素に適用させたい時にとても便利に使うことができます。
上記で記述した通り、idは1カ所にしか使うことができません。
規約上、複数個所に指定することはできませんが、複数個所に指定しても、HTML上ではエラーは出ません。
しかし、複数個所で指定することによって、ページ内リンクやJavaScriptでidを使用した際に、予期した挙動とは違う挙動が起こる可能性があります。
idを使うときは、ソースコード上の1カ所を特定しないといけないときだけ使うようにしましょう。
CSSには優先順位があり、idがセレクタの場合classよりも優先度が高く「id>class>タグ」の順番でCSSが適用されます。
そのほかにも、javaScriptを使用したときに、指定するセレクタにidを使用することで、コンピュータの処理速度がとても速くなるというメリットもあります。
そして、ページ内にリンクを作りたい際に簡単に作ることができます。
しかし安易にidを使うのは賢明ではありません。
idを使うかどうかは、その要素が「一意に特定する必要があるか」を基準に判断するとよいでしょう。
・idを使った応用編
aタグを使ってhrefにidを指定するとページ内に簡単にリンクを作成することができます。
実際にコードを見てみましょう。
使用例
|
1 2 3 4 5 6 7 8 |
<a href="#content">リンク１</a> ～その他コンテンツ～ <div id=”content”>ここまで</div> |
このようにaタグのhrefにidを指定することで、『ここまで』と書かれたdivタグまでジャンプすることができます。
これはページ内にidが1カ所しか存在しない、という規律を守っているからこそできることですね！
以上が、HTMLの基礎知識についての記事でした。
今回は、HTMLの骨組みや構造についての基礎知識となっています。
この内容を応用していくことで、Webページの作成することができるので、ぜひ参考にしてください。
ここまで読み進めていただき、ありがとうございました。
