HTMLの基礎の基礎04

作成日：2026-04-15

簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。

実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。

【22】前回コピペで作ったCSSの中身の説明。

前回コピペで作ったHP001.cssというCSSファイルの中身「body」「img」「.red」について。

「@charset "utf-8"」とは、UTF-8という文字コードで作成されていることをブラウザに明示する命令です。
なくてもいいですが、あった方がいいです。


@charset "utf-8";

body {
	max-width: 1600px;
	padding: 1em;
	margin: 1em;
	overflow-wrap: break-word;
	}

「body」ボディとは、ホームページで表示される部分全体のことです。

「max-width」マックスワイズとは、「最大幅は指定された幅まで」という意味です。これを「width」にすると「きっちり指定された幅にする」という設定になってしまいます。見る側の画面の大きさやブラウザの開き方によっては「指定幅が広すぎると画面幅が狭すぎて表示しきれない」ということが起こってしまいます。

「padding」パディングとは、「指定された大きさの枠の内側にどれくらい隙間をあけるか」という設定です。ゼロにすると隙間が無くなります。

「1em」のemとは、とりあえず「1文字分の大きさ」だと思っておいたらだいたい正しいです。こういう隙間などにはemという単位を使うことが多いです。

「margin」マージンとは、「指定された大きさの枠の外側にどれくらい隙間をあけるか」という設定です。ゼロにすると隙間が無くなります。

「overflow-wrap」オーバーフローラップとは、「この中に書かれた文章が長く、改行が指定されず、1行が長い時、指定されている枠幅よりも長くなった時、その文字を折り返すか折り返さないか」という指定をします。

「break-word」とは、単語の途中でも改行させるための設定。


img {
	padding: 0px;
	margin: 1em;
	border: 1px solid #333333;
	}

「img」イメージとは、画像のことです。画像に対する設定です。

「border」ボーダーとは、「枠線」という意味です。

「solid」ソリッドとは、ボーダーの種類（スタイル）の1つです。大きく分けて「solid」「dashed」「dotted」の3種類があります。

「solid」ソリッド：1本の実線。
「dashed」ダッシュ：ダッシュ線。
「dotted」ドット：ドット線。

「#333333」これはカラーコードで、色を指定しています。

カラーコードは慣れるまでよくわからないと思いますが、必要な時にはこのページ「原色大辞典」を見て参考にすると良いです。

RGBを00,00,00と並べて16進数（00～FF）0123456789abcdef（16進数）で表しています。

000000が黒、ffffffが白です。#ff0000が赤色、#00ff00が緑色、#0000ffが青色です。RGB、Red-Green-Blueという意味です。


.red {
	color: red;
	}

「.red」これは自作の名前で「自作クラス」と呼ばれる物です。先頭に「.」ドットを付けることが重要です。

「.akairo」「.aka」でも自分がわかれば何でもいいです。

「color」は文字の色を指定しています。

「red」を使用していますが、「#ff0000」でも同じです。色を指定する方法には「カラーコード」と「カラーネーム」がありますが、カラーネームで指定できる色種は少なく、微妙な色を使うことができません。そのため基本的に「カラーコード」を使うWebサイトが圧倒的に多いです。

【23】HTMLの最上部に載せておくべき情報

コピペでOK！
赤文字部分だけ書き換えれば使えます。


<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">	
	<meta name="author" content="サイトの製作者名・管理者名">
	<meta name="description" content="サイトの説明。検索結果に表示されます。">
	<link rel="stylesheet" type="text/css" href="css/HP001.css">
	<title>ブラウザのタブに表示されます。</title>
</head>

<body>

</body>
</html>

<!DOCTYPE html> ←HTML5で書かれていることを宣言しています。

<html lang="ja"> ←ページ全体の主要言語が「日本語」であることをブラウザや検索エンジンに伝える属性です。

<meta name="author" content="サイトの製作者名・管理者名"> ←このサイトの管理者名を書いておきます。

<title>ブラウザのタブに表示されます。</title> ←ブラウザのタブに表示されます。サイト名を書きます。

【今回はここまでです】

「前回コピペで作ったCSSの中身の説明」「HTMLの最上部に載せておくべき情報」を解説しました。

かなりサイトらしくなりました。まだ少し足りませんが。

次回は「罫線（けいせん）」「コピペして使えるcss」「コピペしたcssをHTML内で使う」を解説したいと思います。

この先はcssを多めに解説していくことになります。

＜＜3ページ目：「見出し、h1、h2、h3～」「リストを使う」「CSSをコピペで作る」「CSSを使うための設定」

＞＞5ページ目：「罫線（けいせん）」「コピペして使えるcss」「コピペしたcssをHTML内で使う」

2026©denkikaiden