Web開発の基礎①HTMLの構成

by

今日はウェブ開発の基礎としてHTMLを説明します。

HTML知っている方も、新しい発見があるかもしれません。楽しく読んでみて下さい。

HTMLとは

HTMLは、インターネット上のウェブページを作るための言語のようなものです。ウェブページは、コンピュータやスマートフォンのウェブブラウザ（例: Google ChromeやSafari）で見ることができるものです。HTMLは、ウェブページがどのように見え、どのように動作するかを指示する言語です。

考えてみてください。ウェブページは、本のページのようなものです。本には章やタイトルがあり、文章や写真があります。同様に、HTMLを使ってウェブページを作ると、タイトルや見出し、文章、画像などの要素を配置することができます。

例えば、次のように考えることができます：

  • <h1>は本の表紙のタイトルのようなものです。
  • <h2>や<h3>は章やセクションのタイトルです。
  • <p>は本の中の文章のようなもので、そこにテキストを書けます。
  • <img>は写真を貼り付けるためのものです。

ウェブページを見ると、これらのHTMLの指示に従って、タイトル、見出し、文章、画像が配置されていることがわかります。HTMLはウェブページをデザインし、情報を整理するためのツールの一種です。

簡単に言えば、HTMLはウェブページを作るためのレイアウト（配置）の言語で、コンピュータやスマートフォンのウェブブラウザがウェブページを理解し、表示できるようにするものです。


HTMLは誰が管理しているの？


HTML（Hypertext Markup Language）の標準は、World Wide Web Consortium（W3C）によって管理されています。W3Cは、Web関連技術の標準を策定し、進化させるための国際的な機関です。W3Cの使命は、Webの発展を支え、インターネット上の情報やサービスの利用性、アクセシビリティ、セキュリティを向上させることです。

HTMLの標準は、W3Cによるプロセスに従って策定され、仕様が公開されます。W3Cのメンバー、コミュニティ、専門家などが協力して、HTMLの新しいバージョンや仕様の改訂を開発し、合意を形成します。HTML5は、W3Cによる大規模な作業の成果であり、多くの新しい機能やセマンティクスを導入しました。

HTMLの標準の進化は、Webの進化に合わせて行われ、新しい機能やセキュリティの向上などが取り入れられています。したがって、Web開発者はHTMLの最新の仕様に従うことが重要であり、W3Cの公式ドキュメントやリソースを参照することが推奨されます。

HTML５の登場


HTML5は、正式には2014年10月28日にWorld Wide Web Consortium（W3C）によって勧告（Recommendation）として採択されました。これはHTMLの新しいバージョンで、以前のHTML4と比べて多くの新機能や改善が導入されました。HTML5は、ウェブ開発者により対話的なウェブアプリケーションを開発しやすくし、マルチメディアコンテンツの統合など、多くの新しい機能を提供しました。

HTML5は、より豊かなマルチメディアコンテンツをサポートし、動画や音声を直接埋め込むための要素（例: <video>および<audio>）を導入しました。また、セマンティックな要素（例: <header>, <footer>, <article>, <section>など）を提供し、ウェブコンテンツの意味付けを向上させました。

HTML5は、新しいフォーム要素、キャンバス（Canvas）要素を含むグラフィックス描画機能、Webストレージ、地理的位置情報へのアクセス、Web Workersなど、多くの新しい機能をもたらしました。これらの機能はウェブアプリケーションの開発やユーザーエクスペリエンスの向上に寄与しています。

HTML5の導入により、ウェブ開発者はより対話的で豊かなウェブアプリケーションを作成できるようになり、多くのブラウザで互換性が向上しました。そのため、HTML5はウェブ開発の重要な進歩として認識されています。

HTMLを書く時の注意

HTMLを書く際には、標準に従うことが重要です。以下はHTMLを書く際の基準に関するいくつかのポイントです：

  1. 正しい文書宣言（Document Type Declaration）: HTML文書の冒頭には、正しい文書宣言を記述する必要があります。通常、最新のHTMLバージョンであるHTML5を使用する場合、以下の宣言を使用します。htmlCopy code<!DOCTYPE html>
  2. HTML要素: HTML文書は通常、<html>要素で始まり、</html>要素で終了します。文書の基本的な構造は、<head>（メタデータを含む）と<body>（表示内容を含む）から成り立っています。
  3. 正しい入れ子構造: HTML要素は正しい入れ子構造を持つ必要があります。つまり、開始タグと終了タグは正しく対応しなければなりません。例えば、次のようになります：htmlCopy code<div> <p>これは段落です。</p> </div>
  4. 適切な属性: HTML要素には適切な属性を指定する必要があります。属性は要素に関する追加情報を提供します。例えば、<a>要素にはhref属性を指定してリンクのURLを設定します。
  5. セマンティクス: HTML5ではセマンティクスが強調されています。適切な要素を使用して文書構造を表現し、コンテンツの意味を明確に示すことが重要です。例えば、<header>, <nav>, <main>, <article>, <section>, <footer>などのセマンティックな要素を適切に使用します。
  6. 画像の代替テキスト: 画像を表示する場合、<img>要素にはalt属性を使用して、画像の代替テキストを提供します。これは、画像が表示できない場合やスクリーンリーダーを使用しているユーザーにとって重要です。
  7. バリデーション: HTML文書は、W3Cのバリデーションサービスなどを使用して検証することをおすすめします。バリデーションは文書が規則に従っているか確認するためのプロセスで、エラーを見つけて修正するのに役立ちます。
  8. 適切なエンコーディング: 文書のエンコーディングを適切に設定します。通常はUTF-8を使用します。エンコーディングは特殊文字などの文字列を正しく表示するのに重要です。

主なHTMLタグ


HTML（HyperText Markup Language）は、ウェブページの構造を定義するための要素（またはタグ）から成り立っています。以下は主要なHTML要素の説明です:

  1. <html>: HTML文書の開始と終了を定義します。通常、<head>と<body>の2つのセクションを含みます。
  2. <head>: ページのメタデータを含むセクションです。通常、ページのタイトル（<title>）、キーワード、スタイルシートへのリンク、スクリプトの参照などがここに配置されます。
  3. <title>: ブラウザのタイトルバーに表示されるウェブページのタイトルを定義します。
  4. <meta>: 文書のキャラクターセットや著者、説明などのメタデータを指定します。
  5. <link>: 外部スタイルシート（通常はCSSファイル）を文書に結びつけるために使用されます。
  6. <style>: インラインスタイルや埋め込みのCSSを定義するために使用されます。
  7. <script>: インラインスクリプトや外部JavaScriptファイルを読み込むために使用されます。
  8. <body>: 実際のウェブページのコンテンツが表示されるセクションです。
  9. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 見出しを定義するための要素で、<h1>が最も重要な見出しで、<h6>が最も小さい見出しです。
  10. <p>: 段落を作成します。
  11. <a>: ハイパーリンクを作成し、他のページやリソースにリンクします。
  12. <img>: 画像を表示します。
  13. <ul>, <ol>, <li>: 無順序リスト（アイテムの順序が重要でない）、順序付きリスト（アイテムの順序が重要）、およびリストアイテムを作成します。
  14. <div>: ブロック要素をグループ化し、スタイルを適用するために使用されます。
  15. <span>: インライン要素をグループ化し、スタイルを適用するために使用されます。
  16. <form>, <input>, <button>: フォームを作成し、ユーザー入力を受け取ります。
  17. <table>, <tr>, <th>, <td>: 表を作成し、テーブルの行、ヘッダーセル、データセルを定義します。
  18. <iframe>: 別のウェブページを埋め込むために使用され、埋め込まれたコンテンツを表示します。

これは一般的なHTML要素のいくつかです。HTMLには他にも多くの要素があり、それぞれ特定の役割を果たします。ウェブページの構造を定義し、コンテンツを表示するためにこれらの要素を適切に使用することが重要です。

CSSのインポートすることのメリット


CSSを外部からインポートすることにはいくつかの利点があります：

  1. 保守性と一貫性: 外部のスタイルシートを使用すると、同じスタイルを複数のページで再利用できます。これにより、デザインの一貫性を保ちやすくなります。スタイルが変更される場合、単一のファイルを更新するだけで、すべての関連ページに変更が反映されます。
  2. ファイルのキャッシング: ブラウザは外部スタイルシートをキャッシュに保存し、再訪問時に再ダウンロードする必要がなくなります。これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。
  3. 分離 of 関心 (Separation of Concerns): HTMLはコンテンツを定義し、CSSはスタイルを定義するため、役割が明確に分かれます。外部スタイルシートを使用することで、デザイナーやスタイリストがスタイルを独立して管理でき、開発者はコンテンツに焦点を合わせやすくなります。
  4. 効率的なコーディング: 外部スタイルシートを使用することで、同じスタイルを複数のページで再利用でき、コードの重複を減らすことができます。これにより、コードの効率性が向上します。
  5. 協力の容易化: 複数の開発者が同じプロジェクトに参加する場合、外部のスタイルシートを使用することで、スタイリングの一貫性を確保しやすくなります。開発者は必要なスタイルを外部ファイルから容易に参照できます。
  6. メンテナンスの簡素化: スタイルシートを外部ファイルに格納することで、スタイリングとコンテンツの変更を簡素化できます。これにより、ウェブサイトのメンテナンスが容易に行えます。

外部からCSSをインポートすることは、ウェブデザインのベストプラクティスの一つであり、効率的なウェブ開発とメンテナンスに寄与します。ただし、ページごとに異なるスタイルが必要な場合や非常に小さなプロジェクトの場合、インラインスタイルや埋め込みスタイルも適切な場合があります。適切な方法はプロジェクトの要件と目標に応じて決定されます。

CSSのインポート


CSSファイルをインポートする方法は、HTML内で<link>要素を使用することです。以下はCSSファイルをインポートする手順です：

<link rel="stylesheet" type="text/css" href="styles.css">
  1. 外部のCSSファイルを作成: まず、外部のCSSファイル（通常は.css拡張子を持つ）を作成し、必要なスタイルルールをそのファイルに記述します。
  2. HTMLファイル内で<link>要素を追加: HTMLファイル内で、<link>要素を使用して外部のCSSファイルをインポートします。<link>要素は通常<head>セクション内に配置されます。
    • rel="stylesheet": stylesheetという値は、このリンクがスタイルシートファイルを指していることを示します。
    • type="text/css": CSSのメディアタイプを指定します。通常は”text/css”と指定します。
    • href: href属性にはCSSファイルのパス（URL）を指定します。このパスはHTMLファイルからの相対パスまたは絶対パスで指定できます。
  3. CSSファイルの場所指定:href属性に指定するファイルパスは、CSSファイルが置かれているディレクトリまたはURLに基づいています。ファイルパスは、HTMLファイルからの相対パスまたは完全なURLで指定できます。
    • 相対パス: HTMLファイルとCSSファイルが同じディレクトリにある場合、単にCSSファイルのファイル名を指定します。例: href="styles.css"
    • 相対パス: HTMLファイルとCSSファイルが異なるディレクトリにある場合、ディレクトリの構造を反映した相対パスを指定します。例: href="css/styles.css"
    • 絶対URL: ウェブ上の別のサーバーやドメインからCSSファイルを取得する場合、完全なURLを指定します。例: href="https://example.com/css/styles.css"
  4. <link>要素の配置: <link>要素を<head>セクション内に配置します。これにより、CSSファイルはページのヘッダーで読み込まれ、コンテンツと一緒に表示されます。

CSSファイルが正しくインポートされると、HTML文書に指定したスタイルが適用され、ページの外観が変更されます。この方法により、スタイルの一貫性を保ちながら、外部のスタイルシートをウェブページに統合できます。

type=”text/css”を指定しないとどうなる


type属性を指定しない場合、ブラウザは既定でCSSとして解釈します。つまり、CSSファイルの<link>要素を読み込むとき、text/cssと仮定します。これはHTML5仕様でのデフォルト動作です。

したがって、type="text/css"を指定しないと、通常は問題ありません。ただし、type属性を指定することは、文書の明示性を高め、将来のHTMLバージョンやXML文書のコンテンツタイプが変わった場合にも正確に解釈されるのに役立ちます。また、一部の古いブラウザやXML文書では、type属性の指定が必要な場合があります。

例えば、XHTML文書ではtype属性を指定することが一般的で、次のようになります：

htmlCopy code

<link rel="stylesheet" href="styles.css" type="text/css">

HTML5ではtype属性の指定がオプションとされており、多くの場合は省略しても問題ありません。ただし、コードの可読性や将来の互換性を考慮して、type属性を指定することをお勧めします。

CSSをheadタグ内でインポートする理由

CSSファイルを<link>要素でインポートする場所については、通常、<head>セクション内に配置するのが一般的です。これは以下の理由から推奨されます:

  1. ページ読み込みの最適化: スタイルシートファイルはページの外観やレイアウトに影響を与える重要なリソースです。<head>セクション内に配置することで、スタイルシートがページのコンテンツよりも先に読み込まれ、ユーザーエクスペリエンスを向上させることができます。
  2. キャッシングの効果: ブラウザは<head>内のリソースをキャッシュし、将来のページ遷移で再ダウンロードを回避します。これにより、ページの読み込み速度が向上し、ユーザーがウェブサイトにアクセスしやすくなります。
  3. メンテナンスの簡素化: スタイルシートが<head>内にある場合、すべてのページで共通のスタイルが適用されます。これにより、デザインの変更やメンテナンスが容易になります。

ただし、一部の特殊なケースでは、CSSを<head>セクション内に配置せず、ページのコンテンツと同じファイル内にインラインスタイルとして配置することも考えられます。これは、小規模なプロジェクトや一時的なスタイル調整に使用されることがあります。ただし、インラインスタイルを多用すると、コードの可読性が低下し、保守性が悪化する可能性があるため、慎重に検討することが重要です。

JavaScriptのインポートの仕方

JavaScriptファイルをインポートする方法は、主に以下の2つの方法があります:

  1. <script>要素を使用: <script>要素を使用して、外部のJavaScriptファイルをHTML文書にインポートします。以下は基本的な方法です。
<script src="myscript.js"></script>
    • src属性: src属性にはJavaScriptファイルのパス（URL）を指定します。このパスはHTMLファイルからの相対パスまたは絶対パスで指定できます。
    この方法は、JavaScriptファイルをHTMLファイルに直接組み込むためのもので、通常は<head>セクション内または<body>セクション内に配置されます。
  2. モジュールを使用: JavaScriptのモジュールシステムを使用して、外部のJavaScriptファイルをインポートできます。モジュールはES6（ECMAScript 2015）から導入され、モジュールを使用する場合、ファイル内でエクスポートとインポートが行われます。以下は基本的な例です。
// mymodule.js
export function myFunction() {
    return "This is my function.";
}

// main.js
import { myFunction } from './mymodule.js';
console.log(myFunction());

  • モジュールを使用するには、HTMLファイル内で<script>要素を使い、type="module"属性を指定します。
<script type="module" src="main.js"></script>
  • モジュールを使うことで、ファイル間の依存関係や名前空間を管理しやすくし、コードをより構造化しやすくなります。

どちらの方法を選択するかは、プロジェクトの要件とコードの構造に依存します。小規模なプロジェクトでは、<script>要素でファイルを直接読み込むことが簡単で十分かもしれませんが、大規模なアプリケーションやモジュール化されたコードでは、モジュールを使用することが一般的です。

JavaScriptはheadタグとbodyタグのどちらからインポートするべき


JavaScriptファイルを<head>セクションと<body>セクションのどちらでインポートすべきかは、プロジェクトの要件とユースケースに依存します。それぞれの方法には利点と制約があります。

JavaScriptを<head>セクションでインポートする場合:

  1. ページ読み込みの最適化: JavaScriptファイルを<head>セクションで読み込むと、スクリプトがHTMLの残りの部分よりも先にダウンロードおよび実行されます。これにより、ページがすぐに読み込まれた後にJavaScriptが実行され、ユーザーエクスペリエンスが向上します。
  2. グローバルなスコープ: head内でインポートしたJavaScriptは、通常、グローバルスコープで実行されます。これは、ページ内のどこからでもアクセスできることを意味します。しかし、この特性はスクリプトの競合や問題を引き起こす可能性があるため、注意が必要です。
  3. キャッシング: ブラウザは<head>内のスクリプトをキャッシュに保存し、再訪問時に再ダウンロードを回避します。これにより、ページの読み込み速度が向上します。

JavaScriptを<body>セクションでインポートする場合:

  1. パフォーマンスの向上: ページのコンテンツが読み込まれた後にJavaScriptを実行することで、初期ページのレンダリングが速くなり、ユーザーエクスペリエンスが向上します。これは特に大規模なJavaScriptファイルを読み込む場合に役立ちます。
  2. スクリプトがコンテンツに関連性がある場合: 一部のJavaScriptは特定のコンテンツに関連性があり、そのコンテンツの後に実行される必要がある場合があります。このような場合、<body>内にスクリプトを配置することが適しています。
  3. レンダリングのブロック回避: 大きなJavaScriptファイルを<head>でインポートすると、ページのレンダリングがブロックされ、ユーザーは白い画面を見ることがあります。この問題を回避するために、スクリプトを<body>に配置することがあります。

通常、小規模なプロジェクトでは<head>でJavaScriptをインポートすることが一般的です。しかし、大規模なアプリケーションやパフォーマンスに敏感なプロジェクトでは、<body>で適切なタイミングでスクリプトを読み込む方法を検討することがあります。また、非同期スクリプトの使用や遅延読み込みを検討することも、ページの読み込み速度とユーザーエクスペリエンスの向上に役立ちます。

以上がHTMLを構築する上での基本的な知識になります。もちろんこの記事だけですべてをカバーしきれないので興味のあるトピックからどんどん調べて実際にコードを書いていきましょう。