メープルたいむ

メープルもみじがお送りする、Webと社会とサブカルといろいろな雑記。エモい×情報量。

【CSS】要素のセンタリング・中央寄せのテクニックまとめ

唐突に始める「Webデザインで使えるテクニック・小ネタをまとめてみた」第一弾。このシリーズでは、実際に私が四苦八苦したWeb制作のあれこれを紹介していきます。

※ある程度のHTML・CSS基礎知識を前提としています。


この記事ではCSSで要素をセンタリング(中央寄せ)する様々な方法を紹介します。

テキストやインライン要素を左右中央寄せ(text-align)

f:id:momijitan:20170922181528p:plain
最も簡単で一般的なセンタリングの方法は寄せたい対象に「text-align」でcenterを指定することです。
これはtextとなっていますが、テキストに限らずブロック要素*1に囲まれたコンテンツ(=インラインの子要素)を中央寄せできます。画像やaタグなどがそれです。

テキストをセンタリングする場合

HTML

<p class="centering-sample1-1">センタリング</p>

CSS

.centering-sample1-1 {
    text-align: center;
}

中央寄せしたい要素に直接適用します。


aや画像をセンタリングする場合

HTML

<div class="centering-sample1-2">
     <a href="#">aタグ</a>
     <img src="image.jpg">
</div>

CSS

.centering-sample1-2 {
    text-align: center;
}

中央寄せしたい要素をdivなどのブロック要素で囲み、その囲った枠に対して適用します。


テキストを上下中央寄せ(line-height)

f:id:momijitan:20170922184915p:plain
文字を上下の真ん中に寄せるにはline-heightが使えます。ただしこれは外枠の高さがあらかじめ決まっているときにしか使えない方法です。

HTML

<div class="centering-sample2">
    <p>センタリング</p>
</div>

CSS

.centering-sample2 {
    height: 50px;
}

.centering-sample2 p {
    line-height: 50px;
}

要素の高さを決めてから→中身の文字のlineheightを同じに設定する。


テキストを上下左右中央寄せ(padding)

f:id:momijitan:20170923012917p:plain
この方法は正確には中央寄せではなく、文字の周りに均等に余白を作って"中央にあることにしてしまう”方法です。文字を中心のその周囲にスペースを作るので、高さや幅は文字の長さによって変わってしまいます。
主にこれはボタン的なものを作りたいときに使えます。

HTML

<h1 class="centering-sample3">デモ</h1>
<a href="#" class="centering-sample3">センタリング</a>

CSS

.centering-sample3 {
    padding: 20px;
    background-color:#ddd;
}

文字に対して余白を20pxをつけました。今回は周囲のスペースができたことをわかりやすくするため、背景色として灰色を設定しています。h1とaとでは文字の長さが違うのでスペースの大きさも変わるはず。

ページ全体を左右中央寄せ(width × margin)

ページ全体、ブログであれば記事部分をまるごとを中央に寄せたいと考える人は多いでしょう。これにはいくつか方法があります。

中央に寄せたい部分全てを囲むdivを作ってクラスを名付け、CSSはそれに適用します。

HTML(共通)

<div class="centering-sample4">
    <h1>タイトル
    <p>このサンプルはブラウザ画面を変動させることで変わります</p>
</div>

①widthを固定して、それを中央寄せする場合

f:id:momijitan:20170923134811p:plain

主にブログやニュースサイトなど文字が多いサイトによく用いられている手法です。画面幅を固定することによって文字の読みやすさを確保できます。このブログのパソコン表示も、中央寄せではありませんが画面幅を一定に固定してあります。
ただしモバイル端末など、設定しているコンテンツ幅より小さい画面で閲覧しようとすると、画面に収まりきらずユーザーに横スクロールを課してしまうレイアウトでもあります。

.centering-sample4 {
width:300px;
margin:0 auto;
}

widthを指定したのち、marginを0 autoと設定します。このautoは「左右のmarginを自動調整してね」という意味ですが、widthが設定されていないと効力を発揮しません


②marginだけ大きさを固定してしまう方法

f:id:momijitan:20170923142248p:plain

この方法は①の逆で、marginの大きさを固定しておき、幅を変えるとコンテンツ部分の大きさのみが変動するようになります。

.centering-sample4 {
margin 0 20px;
}

左右のmarginを20pxに固定しているだけです。

③widthを%で指定してデバイスによって最適な幅にする方法

f:id:momijitan:20170923140608p:plain

widthを%指定をすると幅も余白も特定の値を持たず、ブラウザの幅に依存して随時変動します。レスポンシブデザインに向いた方法といえますが、ページの印象は幅によって随分変わってしまうのでメディアクエリ*2と併用するのをオススメします。

.centering-sample4 {
width:70%;
margin:0 auto;
}

要素をページの上下左右中心に配置する「absolute,width×heigt,margin auto」

f:id:momijitan:20170923143916p:plain

ページの中心にとある要素を固定したい場合、絶対位置を決めるposition:abosolute;を使いながら中央寄せする方法が使えます。めったに使わない配置ですが、私はモーダル*3などに用いています。

HTML

<body>
   <div class="modal-wrapper">
      <div class="modal">
         ここにモーダルのコンテンツ
      </div>
   </div>
</body>

CSS

.modal-wrapper {/*モーダルの背景*/
   position: fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-color: rgba(0,0,0,0.6);
   z-index:100;
}

.modal {/*モーダル本体*/
   position: absolute;/*ここ以下がセンタリング記述*/
   top:0;
   right:0;
   left:0;
   bottom:0;
   width:450px;
   height:380px;
/*ここでmodalの大きさを指定しないと画面いっぱいになってしまう*/
   margin: auto;
   background-color:#eee;/*以下装飾*/
   border-radius:10px;
   text-align: center;
}

モーダルの作成にはそれなりの手間がかかるゆえ今回は詳しくは触れません。このセンタリングの手法は特殊で、絶対位置の上下左右を全て0にした上でwidth、heightでコンテンツの大きさを固定、そこに合わせてmarginを自動調節する、というやり方です。ブラウザの大きさが変動してもちゃんと中央に配置されます。


複数の要素の横並び中央寄せに便利(display:table × tablecell)

f:id:momijitan:20170924142847p:plain
ヘッダーにおく横並びのメニューなど、ボタンを複数中央に寄せたいときに便利な小ネタを紹介します。これとmarigin autoを併用することで複数要素を横並びでセンタリングが可能です。

このやり方ならinline-blockを横並びにしたときに起きる隙間現象*4も、クリアできます。
ただし欠点としてmarginを設定できなくなってしまうので、要素に間隔を作りたい場合はborder-collapseとborder-spacingの記述を必要とします。

※divで囲ってfloat:leftしたものをまとめてtext-alignする、という手法もあるのですが、clearfixを必要としてしまうfloatの面倒さを加味して提案します。

HTML

<ul>
     <li><a href="#">ボタン1</a></li>
     <li><a href="#">ボタン2</a></li>
    <li><a href="#">ボタン3</a></li>
     <li><a href="#">ボタン4</a></li>
</ul>

CSS

ul {
    display: table;
    margin:0 auto;
    border-collapse: separate;/*ここがmarginの代わりとなる記述*/
    border-spacing: 10px 0;
}

li {
    display: table-cell;
}

メニューはリストを使うのが一般的なのでulとliで記述しました。特徴的なのは対象の要素(li)と対象全部を囲んだ要素(ul)の2つ同時にdisplayを適用しないといけないことです。
今回は各ボタンに10pxの間隔を与えています。(marginの代わり)

*1:いずれ記事にして紹介するつもりです。簡単に言うとpやdivなど、改行を含むタグのことです。対義語のインライン要素というのは文字通り、行の中にある要素で、aタグやspanタグなど改行を含まないタグを指します。

*2:画面幅によってCSSを切り替える仕組み。レスポンシブデザインを意識したサイトは必ずこれを導入している。

*3:こちらを参考に モーダルウィンドウのデモ

*4:インラインブロック要素という「ブロック要素のように箱でありながらインライン要素のように改行されない」、まさに箱を横並びにするにはうってつけな要素があるのですが、実際横並びにしてみると微かに隙間が生まれてしまうという欠点があります。