HTMLの基礎の基礎14

作成日：2026-04-27

【52】line-height(CSS)

• line-heightを設定すると、上下の行間の調整をすることができます。
• これはCSSでclassに設定し、囲った範疇の行間がその規則に従います。

.linebox-01 {
	line-height: 1em;
	border: 2px dashed #ccc;
	margin: 1em;
	padding: 1em;
}

.linebox-02 {
	line-height: 2em;
	border: 2px dashed #ccc;
	margin: 1em;
	padding: 1em;
}

<div class="linebox-01">
	<p>line-height: 1em;</p>
	<p>line-heightを設定すると、</p>
	<p>上下の行間の調整をすることができます。</p>
	<p>これはCSSでclassに設定し、囲った範疇の行間がその規則に従います。</p>
</div>
<br>
<div class="linebox-02">
	<p>line-height: 2em;</p>
	<p>line-heightを設定すると、</p>
	<p>上下の行間の調整をすることができます。</p>
	<p>これはCSSでclassに設定し、囲った範疇の行間がその規則に従います。</p>
</div>

• linebox-01、linebox-02 というのはこの説明のために作った自作クラス名です。
• クラスは自分でどんどん作って構いません。
• 無駄にたくさん作らず、必要最小限でうまく回せるように作るのが賢い作り方だと思います。

【53】font-family(CSS)

• 代表的なフォントファミリーは5種類
• serif（セリフ）
• sans-serif（サンズセリフ）
• cursive（カーシブ）
• fantasy（ファンタジー）
• monospace（モノスペース）

• 具体的なフォント名を指定して、完璧に自分好みのページにしたい気持ちはわかりますが。
• 試しにいつも使っているのとは違うブラウザで表示してみて下さい。
• ブラウザによって、同じフォントでも見た目が変わります。
• 更にWindowsとMacでも変わります。
• 自分のPCには入っているけど、他の人のPCやMacやスマホにはそのフォントが入っていない、なんてこともあります。
• そういう場合は別のフォントが代替表示フォントとして使用されます。
• そういった違いがあるので「自分が今見ているのとまったく同じ物を他の人にも見せる」というのはほぼ不可能だと思っておいた方がいいです。
• なので「フォント名で指定する」ことはオススメしません。
• 本当に必要な、差別化したい部分にだけフォントファミリーで指定しておくのが無難だと個人的には思っています。

【54】list-style(CSS)

• list-style-type
• リストの左側のマーク形状の設定です。
• 以下に挙げるよりもずっと多くのスタイルがあります。

/* list-style */

.liststylenone {
	list-style: none;
}

.liststyledisc {
	list-style: disc;
}

.liststylesquare {
	list-style: square;
}

.liststylezero {
	list-style: decimal-leading-zero;
}

.liststylejapanese {
	list-style: japanese-formal;
}

<ul class="liststyledisc dashbox3">
	<li>一番オーソドックスなスタイル</li>
	<li>discタイプ</li>
	<li>黒丸です。</li>
</ul>
<ul class="liststylesquare dashbox3">
	<li>上に似てますが、cssで指定が必要です。</li>
	<li>squareタイプ</li>
	<li>黒角です。</li>
</ul>
<ul class="liststylezero dashbox3">
	<li>olで使用できるタイプに似ていますが、微妙に違います。</li>
	<li>decimal-leading-zeroタイプ</li>
	<li>0（ゼロ）付きの数字タイプです。</li>
</ul>
<ul class="liststylejapanese dashbox3">
	<li>ほぼ見ることがない珍しいスタイルです。</li>
	<li>japanese-formalタイプ</li>
	<li>旧漢数字タイプです。</li>
</ul>
<ul class="liststylenone dashbox3">
	<li>リストスタイルですが、左側のマークを消します。</li>
	<li>noneタイプ</li>
	<li>左側マーク無しタイプです。</li>
</ul>

• dashbox3は自作クラス名です。
• CSSのリストスタイルのクラス名もすべて自作クラス名です。

【今回はここまでです】

今回は「line-height」「font-family」「list-style」を解説しました。

次回は「404ページ（HTML）」「background-image（CSS）」を解説したいと思います。