CSSで中央寄せ、左寄せ、右寄せ

この記事ではコンテンツを整列させる方法について学んでいきます。エクセルやイラストレータではワンクリックで、できますがCSSの場合は少々頭を使います。要素によってその方法が異なりますので、それぞれの方法をお教えします。

ブロック要素の整列

ブロック要素の幅はデフォルトで親要素の幅と同等になります。ここで紹介する手法は幅が親要素よりも小さいブロック要素に適用されます。

以下にブロック要素としているHTMLタグを記載します。

<address>　<article>　<aside>　<blockquote>　<details>　<dialog>　<dd>
<div>　<dl>　<dt>　<fieldset>　<figcaption>　<figure>　<footer>　<form>　
<h1>~<h6>　<header>　<hgroup>　<hr>　<li>　<main>　<nav>　<ol>　
<p>　<pre>　<section>　<table>　<ul>

例題で使用するHTMLを記載します。

<div class="parent">
  <div class="square">01</div>
</div>

上記のような要素を整列する場合はクラス“square”の要素に対して、marginプロパティを使用します。

center{
 margin-left:auto;
}

左寄せ margin-rightプロパティ

左寄せにはmargin-rightプロパティを使用して、左寄せを行います。

left{
 margin-right:auto;
}

右寄せ margin-leftプロパティ

右寄せにはmargin-leftプロパティを使用して、右寄せを行います。

left{
 margin-left:auto;
}

中央寄せ

中央寄せには上記で紹介した両方のプロパティを使用します。

center{
 margin-right:auto;
 margin-left:auto;
}

省略型のmarginプロパティを使用しても中央寄せが可能です。

center{
　margin:0 auto;
}

インライン要素の整列

インライン要素の整列には、直上の親要素に対してtext-alignプロパティを使用します。例題の親要素であるクラス”parent”に対して、text-alignを使用します。

<div class="parent">
  <div class="square">01</div>
</div>

center{
 margin-left:auto;
}

左寄せ text-align:left

左に寄せたいコンテンツの親要素に対して、text-align:leftを適用することで左寄せにすることができます。

left{
  text-align:left;
}

右寄せ text-align:right

右に寄せたいコンテンツの親要素に対して、text-align:rightを適用することで左寄せにすることができます。

right{
  text-align:right;
}

中央寄せ text-align:center

中央に寄せたいコンテンツの親要素に対して、text-align:rightを適用することで左寄せにすることができます。

center{
  text-align:center;
}

困ったら試してみよう

CSSを習い始めたときは、ブロック要素なのかインライン要素なのか判断がすぐにつかないところから始まります。迷ったときは両方試してみるのもいいでしょう。

コンテンツの整列もCSSでレイアウトを組んでいくうえで必ずと言っていいほど使用します。marginプロパティとtext-alignプロパティは必ず覚えましょう。