40代高卒者が製造業からIT転職する【WEB制作編2】
こんにちは、フローです。
今回は前回のHTMLの詳細を書いて行きたいと思います。
目次
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文書内にスタイル情報を定義するために使用されます。
スタイル情報は、文書内の要素の外観を定義するために使用され、
フォント、色、背景、レイアウトなどのスタイルを指定することができます。
<style>タグは、<head>タグ内に配置され、
CSS（Cascading Style Sheets）スタイルルールを定義するために使用されます。
CSSは、HTML文書内の要素に対してスタイルを適用するための言語であり、
<style>タグを使用してHTML文書内にCSSスタイルルールを埋め込むことができます。
タグ内には、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文書内で段落を定義するために使用され、
ページのテキストの構造を明確にし、ブラウザに文章を表示するために必要な要素です。
まとめ
ずいぶんと長々なってしまいましたが、暗記する必要はありません。
「こんな感じで使うんだな〜」って思って下さい笑
私も最初は訳が分からずいつもパニパニしてました。
最初はそんなものです。
一緒に頑張りましょう！
この記事が気に入ったらサポートをしてみませんか？