制作者の活動(PR)。

堀北真希ちゃんをうさぎ化した制作者の創作キャラクタ
主な作品

オリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

段落セクションに左余白を与えるには。

CSSの基本的な小技として、段落などのセクションブロックに左余白を与える手法をご紹介します。

多くの文書(ウェブでもオフラインでも)で見かける、段落など本文ブロック(セクション)のみに左の余白を与える方法を解説します。

段落セクションに左余白を与えるには・目次。

はじめに: 俗にインデントと呼ばれるようですが…。

この文書では、ブロック要素全体に左余白を与える方法について解説します。

この手のブロック全体に左余白を与える事をしばしばインデントと呼ぶ事がありますが、これは正しい言い方ではありません。

本来、インデントとは段落の一行目のみ字下げする行為であり、ブロック全体に左余白を与える行為ではないからです。

前提条件。

前提として、いわゆるセクションについて、左に二文字分の余白を与える事とします。

具体的には、以下のブロックレヴェル要素について左余白を与えます。

逆に、以下のブロックレヴェル要素は、左余白を与えないものとします。

尚、以下のブロックレヴェル要素については、特に余白をいじらないものとします。

尚、今回はナヴィゲーションバーなど、余白を取らない特別な要素に関する例外は考慮しません。

実際に、そのような例外事項があれば、それらに対しては適切なクラス名をセレクタにして例外スタイルを記述する事となるでしょう。

HTMLに於ける記述。

かつて行われてきた許されないマークアップ。

かつてCSSが普及するまで、セクションに余白を与えるために以下のようなマークアップが行われて来ました。

<title>(文書の題名)</title>
<h1>(文書全体への見出し)</h1>
<h2>(セクションへの見出し)</h2>
<blockquote>
    <p>(セクション内の初めの段落)</p>
    …
    <p>(セクション内の最後の段落)</p>
    </blockquote>

<h2>(セクションへの見出し)</h2>
<h3>(小セクションへの見出し)</h3>
<blockquote>
    <p>(小セクション内の初めの段落)</p>
    …
    <p>(小セクション内の最後の段落)</p>
    </blockquote>
…

つまり、引用でもないのに引用ブロックとしてマークアップしているのです。

このマークアップは音声環境などで<blockquote>要素の開始タグ直前及び終了タグ直後にそれぞれ 以下引用です 及び 引用はここまでです などと言う案内をする事を妨害する行為です。

かつて、このようなマークアップについて「このブロックはあなたが書いたものではないのですね？」と問われ、たとえ肉切り包丁で切っても魚は魚だと思っていますなどと反論した者もいましたが、この行為は肉切り包丁で魚を切るのではなく肉切り包丁で視覚障害者などを殺傷する行為とでも言うべき暴挙です。

今日ではCSSが使えるようになったので、このような不当なマークアップは殆ど見られなくなりましたし、今後も滅ぼされて行くべきものとなるでしょう。

しばしば行われるマークアップ。

HTMLでのマークアップに於いては、しばしば左余白を取りたいためだけに、セクションとなるブロックレヴェル要素を<div>要素としてグルーピングしてその<div>要素に左余白を与えるようなマークアップが成されるようです。

例えば、以下のようにHTMLを記述します。

<title>(文書の題名)</title>
<h1>(文書全体への見出し)</h1>
<h2>(セクションへの見出し)</h2>
<div class="section">
    <p>(セクション内の初めの段落)</p>
    …
    <p>(セクション内の最後の段落)</p>
    </div>

<h2>(セクションへの見出し)</h2>
<h3>(小セクションへの見出し)</h3>
<div class="section">
    <p>(小セクション内の初めの段落)</p>
    …
    <p>(小セクション内の最後の段落)</p>
    </div>
…

そして、このHTM文書Lに対して、CSSでは以下のようにします。

div.section {
    margin: 0 0 0 2em;
    }

でも、もっと単純に出来る筈です。

上記のマークアップでも、制作者は決して間違っているとは思えません。

<div>要素の定義は、グループ化されたブロックレヴェル要素ですので、上記のマークアップはその定義に忠実に則ったものと考えられるからです。

ただ、文書構造上特に必要でもないのにいちいちマークアップするのは余りにも面倒だとは思います。

そこで、このような<div>要素でのグルーピングは一切想定していないCSSを考える事とします。

つまり、以下のようなHTMLであっても、きっちりセクションに左余白を与えられるようにするものとします。

<title>(文書の題名)</title>
<h1>(文書全体への見出し)</h1>
<h2>(セクションへの見出し)</h2>
<p>(セクション内の初めの段落)</p>
    …
<p>(セクション内の最後の段落)</p>

<h2>(セクションへの見出し)</h2>
<h3>(小セクションへの見出し)</h3>
<p>(小セクション内の初めの段落)</p>
    …
<p>(小セクション内の最後の段落)</p>
…

考えられる二つのアプローチ。

さて、今回の目的を果たすため、特定の要素名の要素のみに左余白を与えると言うのであれば、以下の二つのアプローチが考えられます。

左余白を与えたい要素セレクタに左余白を与える
至極当たり前且つ単純な方法ですね。
予め文書全体に左余白を与え、余白を与えない要素セレクタにはマイナスの左余白を与えて左に寄せる
この正反対の発想に行き付かない方もいらっしゃるかも知れませんが、これだって仕様上可能です。

具体的に解説してみましょう。

左余白を与えたい要素セレクタに左余白を与える方法。

先ず与えられるべきプロパティ定義。

これは単純なもので、前提条件に沿ったものであれば、以下のようになるでしょう。

* {
    margin: 0;
    …
    }

p {
    margin-left: 2em;
    …
    }

ul, ol, dl {
    margin-left: 2em;
    …
    }

table {
    margin-left: 2em;
    …
    }

blockquote {
    margin-left: 2em;
    …
    }

pre {
    margin-left: 2em;
    …
    }

これらの要素のスタイル定義は、通常当たり前に行われる筈のものですので、改めてセレクタから記述すると言う事はなく、普段のスタイル定義の中に必要なプロパティ定義が書き足されるものとなるでしょう。

このスタイル定義で生じる例外要素へのスタイル定義。

これでハイお仕舞いとなれば良いのですが、忘れてはいけない事があります。

それは、これらのブロックレヴェル要素は全て他のブロックレヴェル要素の内容になり得ると言う事です。

例えば、リストの中に入っている<p>要素について、左余白を与えたままだったとしたら、それは余計な余白となってしまう事でしょう。

そこで、これらの効果を打ち消してやる必要があります。

上記の定義の直後に、以下の例外スタイル定義を加えると良いでしょう。

li *, dd *, th *, td *, blockquote * {
    margin-left: 0;
    }

このプロパティ定義について注意したい事を挙げておきます。

詳細度の問題や思わぬ下位要素への悪影響を徹底して避けるのであれば、以下のように全称セレクタではなく具体的に下位要素セレクタを決め打ちする必要がありますが、そうすると記述が異常に長くなってしまう恐れもあります。

li p, li ul, li ol, li dl, li table, li blockquote, li pre,
dd p, dd ul, … 
 {
    margin-left: 0;
    }

予め文書全体に左余白を与え、余白を与えない要素セレクタにはマイナスの左余白を与えて左に寄せる方法。

先ず与えられるべきプロパティ定義。

これは左余白を与えたい要素セレクタに左余白を与える方法とは正反対の発想に依るもので、前提条件に沿ったものであれば、以下のようになるでしょう。

* {
    font-size: 100%;
    margin: 0;
    …
    }

body {
    padding: 0 0 0 2em;
    }

h1 {
    font-size: 150%;
    …
    margin-left: -1.333em;     /*  -1.333em=-2em/1.5em(150%)  */
    }

h2 {
    font-size: 140%;
    …
    margin-left: -1.429em;     /*  -1.429em=-2em/1.4em(140%)  */
    }

h3 {
    font-size: 130%;
    …
    margin-left: -1.538em;     /*  -1.538em=-2em/1.3em(130%)  */
    }

…

h6 {
    font-size: 100%;
    …
    margin-left: -2.000em;     /*  -2.000em=-2em/1.0em(100%)  */
    }

hr {
    …
    margin-left: -2em;
    }


address {
    font-size: 100%;
    …
    margin-left: -2.000em;     /*  -2.000em=-2em/1.0em(100%)  */
    }

まず、一番初めに全称セレクタで余白を零にしており、これにより特に<p>要素などセクションを成すブロックレヴェル要素に於いて余白が指定されない場合は左余白が与えられないと言う事になります。

そして、<body>要素に左パディングを与え、これに依り自動的に左余白が与えられるようになります。

その後、<h1>要素から<address>要素までのスタイル定義で、左にマイナス余白を与える事で<body>要素に与えた二文字分の左パディングを打ち消しております。

これらの例外記述が<h1>要素から<address>要素までと多いように見えますが、実際にはこれらの基本的な要素に対しては必ずと言って良いほど適切なプロパティ定義を与えておく必要があるため、決して改めて例外スタイルとしてセレクタから書き足すと言う代物にはならないでしょう。

尚、em単位は当該セレクタに於けるfont-sizeプロパティで決まるフォントサイズ基準となるため、逆数を求めることでem単位にします。

このスタイル定義で生じる例外要素へのスタイル定義。

勿論、この場合も例外が生じ得ます。

見出しや段落などは左余白を与えない事としているのですが、あるブロックレヴェル要素の下位要素に記述された場合、この記述では左余白を打ち消すスタイルが悪影響を及ぼすでしょう。

そのため、そのような記述が行われる場合には、以下のような例外を追記する必要があります。

body * h1,
body * h2,
body * h3,
body * h4,
body * h5,
body * h6,
body * hr,
body * address {
    margin-left: 0;
    …
    }

これらのセレクタは、<body>要素の下位の任意の要素の下位にある<h○>要素などを対象としたものです。

要素セレクタが二つとなる事から、詳細度は初めのスタイル定義のそれより高くなるため、このスタイル定義は初めの記述より前に書いても問題は起こらないでしょう(例外事項を前に記述する事はお勧め出来ませんが)。

どちらが良いのか？

さて、セクションに左の余白を与えるための二つの方法を示しましたが、それでは実際に利用するとして、どちらが良い方法となるでしょうか。

結論から言えば、よりスタイルシートが単純になる方を取るべきであると言えるでしょう。

CSSの基本中の基本と言える考え方として、

と言うのがあります。

全称セレクタや一部プロパティの値の継承などを活用して基本となるスタイルを定め、その上で基本から外れるセレクタに対して個別にプロパティ定義を与えていく事で、いちいち全ての要素に対してスタイルを定義する事なく文書全体に適切なスタイルを与える事が可能になります。

ですから、例外事項となるセレクタが少なくなる方を撰べば良いでしょう。

実際のところ、単純な要素セレクタへのスタイル定義と言うのは基本的にCSSでは必ずと言って良いほど行われるべきものです。

従って、これらの要素へのスタイル定義はセクションへの左余白のためだけに記述される例外事項とはならないでしょう。

そう言う事を考えると、制作者の場合

とも言えるでしょう。

しかし、見出しや横罫線など、今回左余白を与えない事とした要素をあるブロックレヴェル要素の会にも置き得る場合には、後者の方法でも例外が生じます。

そのような場合には、却って前者の方が良いかも知れません。

また、今回はナヴィゲーションバーなど、本文外の特別なクラスを与えているであろう要素に関してまでは考慮していないので、それらの要素への例外スタイルも別途記述する必要があるでしょう。そして、それらの記述はどちらがより単純になるかと言う問題も加わって行く筈です。

結局、普段のHTMLのマークアップ作法にも依る、或いは普段のマークアップ作法次第とも言えるでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com