CSSでの左寄せ・中央寄せ・右寄せ方法、1行に混在も可



左寄せ・中央寄せ(センタリング)・右寄せで表示したい

日本語や英語など「文字を左から右へ向かって記述する言語」で書かれたHTMLでは、文字寄せ方向が指定されていないなら、文章は左寄せで表示されます。しかし、タイトルや見出しなどを中央寄せ(センタリング)して掲載したい場合はよくありますし、日付や注釈などを右寄せにしたい場合もよくあるでしょう。

文章や画像などを左寄せ・中央寄せ・右寄せで表示するのは簡単です。CSSのtext-alignプロパティを使って、寄せたい方向を指定すれば良いだけです。詳しい書き方は後述しますが、かなり需要がありますし、CSSでの装飾の基本と言っても良いので、わざわざ解説するまでもないかもしれません。

ただ、text-alignプロパティで指定できるのは、あくまでも1行全体の文字寄せ方向だけです。同一行で左寄せ部分と右寄せ部分を共存させることはできません。しかし、同じ行内に「左寄せの文章」と「右寄せの文章」を共存させたい場面も多々あるのではないでしょうか。

例えば下記の囲みの上部をご覧下さい。タイトル部分は左寄せ、日付は右寄せになっていて、どちらも同一行に表示されています。このようなレイアウトを作りたい場合もよくあります。

◆HTML&CSS入門

11月27日(月)

このような囲みはよく使われるデザインでしょう。この文章の上に見える赤色のタイトルバーは1行ですが、表題「◆HTML&CSS入門」は左寄せで、日付「11月27日(月)」は右寄せで表示されています。このように、同じ行で左寄せと右寄せを共存させられると、スペースの節約になったり、デザインの幅が広がったりします。

そこで今回は、CSSを使って文章を左寄せ・中央寄せ・右寄せで表示する方法と、それら複数の文字寄せ方向を同一行に混在させる方法をご紹介いたします。どの場合も、とても短く簡単な記述だけで実現できます。

CSSを使って、左寄せ・中央寄せ(センタリング)・右寄せで表示する方法

文章や画像の文字寄せ方向を指定するには、CSSのtext-alignプロパティを使います。方法はとても簡単で、下記のように値「left」を指定すれば左寄せ、値「center」を指定すれば中央寄せ(センタリング)、値「right」を指定すれば右寄せになります。

<style type="text/css">
.maintext { text-align: left; } /* ←左寄せ */
.subject { text-align: center; } /* ←中央寄せ(センタリング) */
.date { text-align: right; } /* ←右寄せ */
</style>

上記のCSSを使って、以下のHTMLを表示させる場合を例にします。

<p class="subject">ここは表題(センタリング)です!</p>
<p class="date">2017年11月27日(右寄せ)</p>
<p class="maintext">ここは本文領域です。……</p>

これらのHTML+CSSをブラウザで表示すれば、下図のように見えます。表題は中央寄せで、日付は右寄せで、本文は左寄せで表示されます。

表題をセンタリング、日付を右寄せ、本文を左寄せで掲載した例

表題を中央寄せ(センタリング)、日付を右寄せ、本文を左寄せにした例

このように、CSSのtext-alignプロパティ1つを使うだけで、文章を左寄せにしたり、中央寄せにしたり、右寄せにしたりできます。とても簡単です。

ただし、これらはすべて行単位での指定です。異なる方向へ文字寄せされた文章を同じ行内に混在させるには、もう少しCSSを書き加える必要があります。

同一行に、左寄せ部分と右寄せ部分を共存させるCSSの書き方

左寄せ行と右寄せ行の2つを1行に合体させるには、複数の行(ブロック)が横並びに掲載されるよう装飾すれば良いのです。例えば、以下のようなHTMLソースがある場合を考えます。

<div class="titlebar">
 <p class="subject">◆HTML&CSS入門</p>
 <p class="date">11月27日(月)</p>
</div>

2つのp要素を1つのdiv要素で囲んでいるだけのシンプルなHTMLです。

ここで、subject側を左寄せにして、date側を右寄せにして、両者を同一行に掲載するには、以下のようなCSSソースを使います。

.subject {
 text-align: left; /* 文章を左寄せする(※) */
 float: left; /* 左端に寄せて、後続を右側へ回り込ませる */
}
.date {
 text-align: right; /* 文章を右寄せする */
}
.titlebar {
 background-color: #cc0000; /* 背景を赤色に */
 color:white; /* 文字を白色に */
 font-weight:bold; /* 太字にする */
}

文字を左から右へ表記する言語環境では、text-alignプロパティの標準値は「left」なので、上記の「※」印部分にあるtext-alignプロパティは書かずに省略しても表示効果は変わりません。ここでは分かりやすさのために、あえて書きました。

ここでのポイントは、floatプロパティです。floatプロパティには、対象要素を左端や右端に寄せた上で、後続の要素を空いた空間に回り込ませる効果があります。詳しくは後述しますので、まずは表示例を見てみましょう。上記のHTML+CSSをブラウザで見ると、以下のように表示されます。

◆HTML&CSS入門

11月27日(月)

赤色背景に白色文字で表示されている1行の中に、左寄せの部分と右寄せの部分が共存しています。

floatプロパティで、複数行を同一行にまとめられる理由

floatプロパティには、値として「left」や「right」を指定できます。先ほどの例では「left」を指定しました。floatプロパティに値「left」を指定すると、それ自身を左端に寄せ、続く内容を右側に回り込ませるというレイアウトを実現できます。

つまり、タイトル部分「◆HTML&CSS入門」が左端に寄り、右側にできた空間に次の行の内容「11月27日(月)」が回り込むので、元々2行だったものが1行に見えるようになるわけです。これだけで、左寄せ行と右寄せ行を同一行に含められます。

左寄せ行と右寄せ行の2行を1行にまとめる配置は、異なる背景色を付けてみると構造がよく分かる

左寄せ行と右寄せ行の2行を1行にまとめる配置は、異なる背景色を付けてみると構造がよく分かる

floatプロパティでは、その要素を左端や右端に寄せることができますが、中央に配置することはできません。左寄せと右寄せの共存はfloatプロパティで作れますが、左寄せ・中央寄せ・右寄せの3つを同一行に含めるには、別の工夫が必要です。

同一行に、左寄せ・中央寄せ(センタリング)・右寄せを混在させる方法

最後に、1行内に左寄せ・中央寄せ(センタリング)・右寄せの3種類すべてを混在させる方法をご紹介いたします。方法はいくつかありますが、ここではtable-cellプロパティを使う方法をご紹介いたします。

まず、以下のようなHTMLソースがある場合を考えます。

<div class="titlebar">
 <p class="category">入門解説</p>
 <p class="subject">『HTML&CSSの基礎』</p>
 <p class="date">11月29日</p>
</div>

1つのdiv要素の中に、p要素が3つあります。これらを順に、左寄せ・中央寄せ・右寄せで表示したいとします。その際は、以下のようなCSSソースを書きます。

.titlebar { display: table; width: 100%; background-color:#cc0000; color:white; }
.category { display: table-cell; text-align: left; }
.subject { display: table-cell; text-align: center; }
.date { display: table-cell; text-align: right; }

すると、以下のように左寄せ・中央寄せ・右寄せの3種類が同一行に混在して見えます。

入門解説

『HTML&CSSの基礎』

11月29日

なぜこのように混在できるのかを以下に解説しておきます。

table-cellで、複数行を同一行にまとめられる理由

displayプロパティに値「table」を指定すると、その要素をtable要素のように表示することができます。また、displayプロパティに値「table-cell」を指定すると、その要素を表組みのセル(=例えばtd要素)のように表示することができます。その結果、先ほどのHTMLソースにある3つのp要素は、それぞれ表組みのセルのように表示されるため、横並びに見えます。

左寄せ・中央寄せ(センタリング)・右寄せを1行にまとめる配置は、異なる背景色を付けてみると構造がよく分かる

左寄せ・中央寄せ(センタリング)・右寄せを1行にまとめる配置は、異なる背景色を付けてみると構造がよく分かる

上図の下部にあるように、1つ目のセル(=最初のp要素)の中身は左寄せで表示され、2つ目のセル(=2番目のp要素)の中身は中央寄せで表示され、3つ目のセル(=最後のp要素)の中身は右寄せで表示されています。

同一行に左寄せ・中央寄せ(センタリング)・右寄せを混在させる方法

今回は、CSSを使って文章を左寄せ・中央寄せ(センタリング)・右寄せで表示する方法と、左寄せ・中央寄せ・右寄せ部分を同一行に混在させて表示する方法をご紹介いたしました。どれもほんの短いCSSソースを書くだけで実現できます。ぜひ、試してみて下さい。なお、1行の表示方法や装飾方法に関しては、下記の関連記事も併せてご覧下さい。

【関連記事】



Related Post