40代高卒者が製造業からIT転職する【WEB制作編2】

こんにちは、フローです。

今回は前回のHTMLの詳細を書いて行きたいと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【WEB制作編】

1 HTML
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <style>
6 <body>
7 <h1>
8 <p>
9 まとめ

HTML

前回のブログで簡単なコードを書きました。

<!DOCTYPE html>
<html>
<head>
  <title>背景色を設定する</title>
  <style>
    body {
      background-color: #f0f0f0;
    }
    h1 {
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>背景色を設定する例</h1>
  <p>ここに文章を入力します。</p>
</body>
</html>

こんやつですね。

これをひとつひとつ説明していきたいと思います。

<!DOCTYPE html>

この記述は、HTML文書の先頭に記述される宣言で、文書がHTML5で書かれていることを示します。

DOCTYPEは、「Document Type」の略で、

文書の種類を指定するために使用されます。

HTML5の場合、宣言は以下のようになります。

<!DOCTYPE html>

ウェブブラウザがHTML文書を適切に解釈するために必要であり、

DOCTYPE宣言がない場合、ウェブブラウザは文書を正しく解釈できない可能性があります。

DOCTYPE宣言を使用することで、ウェブブラウザは文書の種類を識別し、

正しい文書型宣言（DTD）を使用して文書を解釈することができます。

<html>

<html>タグは、HTML文書のルート要素を定義するために使用されます。

このタグは、<!DOCTYPE html>宣言とともに使用され、HTML文書の開始と終了を表します。

すべてのHTML要素は、このタグの内部に配置されます。

<html>タグを使用することで、ウェブブラウザはHTML文書の構造を理解し、

要素がどこから始まり、どこで終わるかを正しく解釈することができます。

また、このタグはHTML文書のルート要素として、他の要素を含むことができます。

したがって、このタグを使用することで、HTML文書の構造を明確にすることができます。

例えば、<html>タグの中に<head>、

<body>、<footer>などの要素を含めることができます。

これらの要素は、それぞれドキュメントのヘッダー、本文、フッターを表します。

したがって、<html>タグはHTML文書を構造化するために重要な要素であり、文書の構造を明確にするために使用されます。

<head>

このタグは、HTML文書のヘッダー情報を定義するために使用されます。

ヘッダー情報には、文書のタイトル、スタイルシート、JavaScriptファイルなどが含まれます。

<head>タグは、<html>タグの直後に配置され、

<body>タグの前に来ます。したがって、このタグはHTML文書の構造を明確にするために使用され、

ウェブブラウザが文書を正しく解釈するために必要です。

<head>タグの中には、<title>、<meta>、<link>、<style>、<script>などの要素を含めることができます。

これらの要素は、HTML文書のヘッダー情報を定義し、文書の表示や機能に影響を与えることができます。

したがって、<head>タグはHTML文書の構造を明確にするために重要な要素であり、

多くの場合、HTML文書内で使用されます。

ただし、<head>タグがなくても、HTML文書は正常に表示されることがあります。

<style>

HTML文書内にスタイル情報を定義するために使用されます。

スタイル情報は、文書内の要素の外観を定義するために使用され、

フォント、色、背景、レイアウトなどのスタイルを指定することができます。

CSS（Cascading Style Sheets）スタイルルールを定義するために使用されます。

CSSは、HTML文書内の要素に対してスタイルを適用するための言語であり、

タグ内には、CSSセレクタとプロパティ/値のペアが含まれます。

CSSセレクタは、スタイルを適用する要素を指定し、プロパティ/値のペアは、要素のスタイルを指定します。

例えば、以下のように<style>タグ内にCSSスタイルルールを定義することができます。

<style>
  h1 {
    color: red;
    font-size: 24px;
  }
</style>

上記の例では、<style>タグ内にh1要素に対するスタイルルールを定義しています。

このスタイルルールは、h1要素のテキスト色を赤色に設定し、

フォントサイズを24ピクセルに設定します。

したがって、<style>タグはHTML文書内でスタイル情報を定義するための重要な要素であり、

ウェブページの外観をカスタマイズするために使用されます。

<body>

<body>タグは、HTML文書内の本文（コンテンツ）を定義するために使用されます。

このタグ内には、ページに表示されるテキスト、画像、リンク、フォームなどの要素が含まれます。

<body>タグは、<html>タグ内に配置され、<head>タグの後に来ます。

このタグは、HTML文書の構造を明確にし、ウェブブラウザがページの本文を正しく解釈するために必要です。

<body>タグの中には、

<h1>、<p>、<img>、<a>、<form>などの要素を含めることができます。

これらの要素は、ページに表示されるコンテンツを定義します。

例えば、以下のように<body>タグ内に<p>要素を配置することができます。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

上記の例では、<body>タグ内に<p>要素が配置されています。

この要素は、ページに表示されるテキストを定義しています。

したがって、<body>タグはHTML文書内で本文（コンテンツ）を定義するために使用され、

ウェブページの表示内容を決定するために重要な要素です。

<h1>

<h1>タグは、HTML文書内で見出しを定義するために使用されます。

ページの主要な見出しやセクションのタイトルなど、重要なテキストが含まれます。

このタグは、<body>タグ内に配置され、HTML文書内で一番大きな見出しとして使用されます。

このタグの後には、より小さな見出しである<h2>、<h3>、<h4>、<h5>、<h6>タグが続きます。

<h1>タグは、ページのSEO（検索エンジン最適化）にも役立ちます。

検索エンジンは、ページの見出しを分析し、ページのコンテンツを分類するために使用します。

したがって、重要なキーワードを含む適切な見出しを使用することで、

ページのランキングを向上させることができます。

以下は、<h1>タグの例です。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is the main content of my web page.</p>
  </body>
</html>

上記の例では、<h1>タグ内に「Welcome to My Web Page」というテキストが含まれています。

このテキストは、ページの主要な見出しとして表示されます。

したがって、<h1>タグはHTML文書内で重要な見出しを定義するために使用され、ページのSEOにも役立ちます。

<p>

HTML文書内で段落を定義するために使用されます。

このタグ内には、ページの本文、説明、文章などのテキストが含まれます。

<body>タグ内に配置され、通常は文章の開始や終了の場所に置かれます。

このタグを使用することで、ブラウザは文章のテキストを区切り、段落ごとに表示することができます。

以下は、<p>タグの例です。

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is the main content of my web page.</p>
  </body>
</html>

上記の例では、<p>タグ内にそれぞれ「This is the first paragraph of my web page.」、

「This is the second paragraph of my web page.」という文章が含まれています。

これらの文章は、段落ごとに表示されます。

したがって、<p>タグはHTML文書内で段落を定義するために使用され、

ページのテキストの構造を明確にし、ブラウザに文章を表示するために必要な要素です。