手抜きに定評のあるサイト

Web関連の知識

はじめに

このページについて

最低限のHTML・CSSについての知識を置いてます。
不定期で更新中
タイパをお求めの方はお戻りください。

注意事項等

これは自分の知識の範囲内で解説していて、なおかつ多少間違っている可能性があるので、わからないことがあれば適宜Googleで調べてください。
Windows 11環境で説明しています。また、HTML/CSSに関する質問は一切受け付けていません。
パソコンに関してある程度知識のある人を対象にしています。拡張子の変更等を理解したうえで読んでください。
スマホでHTMLを書くのは無謀です。諦めてください。
当サイトではHTML 4.01 Strictを採用していますが、2026年現在はHTML 5の採用をお勧めします。

作成に必要なもの

HTMLを書くにあたって特別必要なソフトはありません。
Windows標準のメモ帳でもHTMLを書くことができます。
HTMLの表示には、ブラウザが必要です。
普段インターネットを見るときに使う、Microsoft EdgeやGoogle Chrome、Firefoxなどがあります。

HTML

HTMLの種類

HTMLには、知っているもので以下の種類があります。
HTML 4.01 Strict、HTML 4.01 Transitional、HTML 5
なお、現在はHTML Living Standardという名称で統一されていますが、当サイトではHTML 4.01 StrictやHTML 5といった呼び方をします。
以下に、３つの種類の特徴を解説します。

HTML 4.01 Strict：2000年代の正式なHTMLです。文法を違反したタグを使うことが許されない規格。見た目はすべてCSSで指定する。
HTML 4.01 Transitional：文法を違反したタグを使うことが許される企画。当サイトでは取り扱っていない
HTML 5：現代の標準的なHTMLの規格。headerタグやfooterタグもここから。

HTML文書の一行目に必ず書くもの

HTML文書の一行目では、DOCTYPE宣言をしなければなりません。
以下に、先ほど解説した規格ごとのDOCTYPE宣言を示します。

規格	DOCTYPE宣言
Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTMl 5	<!DOCTYPE html>

HTMLの正しい書き方

HTMLは文書を構造化するための言語です。文書がどのような構造になっているのかを、タグを使って表します。
簡単に言えば、見出しなら見出しのタグ、段落なら段落のタグを使って囲むだけです。例えば、次のようになります。

                            <h1>大見出し</h1>

この例では一番大きい見出しを表すタグを使って囲んでいます。これで、「大見出し」という文字が見出しを表すものとして定義されました。
このh1というタグは、文字を大きくするというわけではありません。あくまでも見出しとして使うものです。文字の大きさを変えたいなどの場合は、CSSを使うことで指定できます。
わかりやすくたとえると、教科書の一単元、ということになります。

HTMLの要素一覧

HTMLの要素は、インライン要素とブロック要素の2つに分けることができます。
HTML 4.01 Strictの場合、インライン要素はそれぞれ独自で使うことはできず、ブロック要素の中に入れて使います。
HTML 5の場合は制限が緩和されているようで、インライン要素も独自で使うことができるそうです。
ブロック要素とインライン要素の例をそれぞれ以下にあげます。これらを応用し、HTML文書を自分で作ってみてください。

ブロック要素

<h1>～<h6>
<p>
<div>
<pre>
<table>
<ol>,<ul>,<li>
<hr>

インライン要素

<a>
<img>
<q>
<br>
<span>

CSS

CSSの基礎

CSSとは、HTMLで構成を表した文書のレイアウトを整えることができる言語です。
CSSを使えば、無機質なHTMLに彩りをつけることもできます。
以下に、その例を示します。

                            h1{color: #00ff00;}

この記述は、「要素h1は#00ff00(真緑)という色になる」ことを表しています。
このように、CSSを適用する場合、セレクタ(この場合はh1)を選び括弧{}で括り、その中に
適用したいプロパティ(この場合color)を、その後にコロン(:)のあとに値(この場合#00ff00)を記述し、
セミコロン(;)で終わります。
CSSは複数のプロパティを指定することもできます。その場合、セミコロンに続けて先ほどのように記述していきます。
その際、改行やスペースは自由に使うことができます。
なお、HTMLでクラス名を指定し、CSSでセレクタにピリオド(.)に続けてクラス名を記述すると、そのクラスにだけCSSが適用されます。

記述する場所

CSSを記述する際にはHTMLに直接書く方法と、外部のCSSファイルに一つにまとめる方法があります。
外部のCSSファイルに一つにまとめるほうが、レイアウト更新をしたくなったときにCSSファイルだけをいじればいいので、通常はこちらを使います。
外部ファイルを使用するには、CSSを記述したファイルを.cssという拡張子で保存し、CSSを読み込むために以下の記述をHTMLの<head>タグ内にします。
HTML 4.01 Strictでの場合を例に説明します。HTML 5の場合は、type="text/css"は不要です。

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

HTMLに直接書く方法は今回は説明しません。知りたい人は他サイトを当たってください。

おわりに

このページでの解説内容はかなりガバガバなので、本気でweb標準を学びたい人は他サイトを当たることを推奨します。
もしどうしてもこのページで解説されたことを試したいという人は、自己責任で試してください。
解説にお付き合いいただきありがとうございました。

わゆのホームページ（工事中）