【HTML初心者向け基礎講座】本格的にホームページの制作をしていきます

ホームページ制作を開始
コードの解説
- DOCTYPEとlang、head、bodyの解説

ホームページ制作を開始

HTML解説の1-6で基礎的なHTMLの書き方とファイルの実行方法を学んだと思います。

今回はこのような自己紹介ページを作成します。

Mintsonの自己紹介

Mintsonの自己紹介ページおよびHTML基礎講座で学んだ内容を紹介するページ。プロフィール、スキル、実績、HTML要素、CSSスタイル、ウェブデザインの実績などを掲載しています。

ウェブページの基本構成について

<header> 要素:
- <header> 要素は、見出しやナビゲーションメニュー、ロゴ、検索フォームなどを配置
<main> 要素:
- <main> 要素は、文書のメインコンテンツを包むために使用されます
<footer> 要素:
- <footer> 要素は、著作権情報、連絡先情報、サイトマップ、関連リンクなどを記載

<header>, <main>, <footer> 要素を使った簡単な自己紹介ページを作成していきます。

今回書くソースコードです。

Mintsonの自己紹介

ソースコードはGitHub上で公開をしております。

GitHubでは色んな人がコードを共有したり、オープンソースと呼ばれている共同で何かを開発するプロジェクトなどにも参加できます。

Styleとは？

“Style”は、ウェブページや文書の外観やレイアウトを指定するためのプロパティと値の組み合わせです。

HTML文書では、要素に直接スタイルを適用することができます。これを実現する方法が、style 属性を使用することです。

Styleでカスタマイズできる内容は非常に幅広いので、このHTML入門講座では、一旦今回書いたコード内にあるStyleの解説だけをします。

コードの解説

DOCTYPEとlang、head、bodyの解説

<!DOCTYPE html>: これはHTML5文書であることをブラウザに伝える宣言です。HTML文書の最初に書かれることが一般的です。

この画像はHTML5のロゴです。
W3C Introduces an HTML5 Logo

<html lang="ja">: HTML文書の基本要素を定義します。lang 属性はページの言語を指定します（ここでは日本語を指定しています）。
ウェブサイトの言語に分けて設定しましょう。
日本語 (Japanese): ja
中国語（繁体字） : zh-TW
中国語（簡体字）: zh-Cn
英語 (English): en
フランス語 (French): fr
韓国語 (Korean): ko
ロシア語 (Russian): ru
<head>: ページのメタ情報（文字コードやビューポートの設定など）や、スタイルシート、スクリプトなどの外部リソースを定義するセクションです。

例えばで言うとメタ情報とは

<meta name="author" content="Mintson Huang">
<meta name="description" content="プロフィール、スキル、実績などを掲載しています。">
<meta name="keywords" content="Mintson, 自己紹介">

このように検索エンジンがこのサイトは何を表示しているのかをある程度理解できるようにする情報を<head>内に記載していきます。

<meta charset="UTF-8">: 文書の文字エンコーディングをUTF-8に設定します。

UTF-8は異なる言語や文字セットのテキストを扱うことができて、現代のウェブ開発では標準的な文字エンコーディング方式として使用されています

<meta name="viewport" content="width=device-width, initial-scale=1.0">: ページのビューポート設定を行います。これにより、モバイルデバイスや異なる画面サイズのデバイスでも適切に表示されるようになります。
<title>Mintsonの自己紹介</title>: ページのタイトルを指定します。ブラウザのタブに表示されたり、検索結果で表示されるタイトルとして使用されます。