CSSによる左右・上下の中央寄せ

なぜこの記事を書いた？

CSSで中央寄せする9つの方法（縦・横にセンタリング）でCSSによって要素中央寄せする方法を学んだので忘備録としてまとめなおしました。

実際にやりたい操作、配置する対象となる要素のHTMLの構造に着目して分類しなおしました。

分類方法

配置方法

  • 左右方向の中央寄せ
  • 上下方向の中央寄せ
  • 中心配置

配置する要素のHTML構造

  • 素の文章
    spanタグなどで囲まれず直接p要素やdiv要素などblockの中に記載されている文
  • inline（1行）
  • inline（複数行可）
  • 画像
  • block

配置を実現する際に用いるCSSプロパティ

左右方向
  • text-align: center;
  • margin: 上下 auto;
上下方向
  • line-height: 親要素の高さ;
  • position: absolute;
中心配置
  • display: flex;

適用の可能・不可能一覧

素の文 inline （1行） inline （複数行可） 画像 block
左右 text-align o o o
margin o
position: absolute; o o
上下 line-height o
position o o o o
中心 display: flex; o

注意点

  1. 配置は親要素を基準に行われる
  2. text-align: center;は配置したい要素の親要素に指定する必要がある
  3. 配置したい要素にposition: absolute;を指定する場合はその親要素のpositionプロパティもstatic以外のものを指定しておく必要がある
  4. 親要素がa要素などinlineの場合は上手くいかないのでその親要素にdisplay: block;を指定しておく必要がある

所感

とりあえずは文章を左右中央寄せするのに必須であるtext-alignと様々な要素に適用できるposition: absolute;の使い方を覚えておけば良いように思いました。ただ、これらは配置する要素とその親要素の両方にstyleを指定する必要があったり、そもそも記述量が多いなどデメリットもあります。 それらを回避したい場合はmarginやflexboxも合わせて使えば良いと思います。

使い分けが難しいですね。

本当は各プロパティを用いる例も載せるつもりでしたが力尽きたのでとりあえずここまでにしておきます。

CSSのwhite-spaceプロパティの挙動の覚え方

なぜこの記事を書いた？

"white-space"というプロパティ名からどのような働きがあるのか想像しにくく、また各値を指定したときの挙動も値名から連想しにくかったので覚え方を考えました。 個別に挙動を覚えるのは大変に感じたのでnormalとpreの挙動だけ覚えて他の値での挙動はそれらからの差分を考えるという方針を取りました。

white-spaceプロパティの各値での挙動

はじめに各値とその挙動を列挙しておきます。

値名 改行などの反映 行の折り返し
normal 初期値 HTMLコード内で改行（enter）や半角スペース、タブが連続入力されても、ブラウザ表示では1つの空白文字にまとめられる 自動で折り返し
nowrap 折り返しされない
pre 連続で入力した空白や改行がブラウザでの表示に反映される 折り返しされない
pre-wrap 自動で折り返し
pre-line 連続で並ぶ半角スペースやtabは1つの空白文字にまとまるが、改行（enter）は反映される 自動で折り返し

出典：CSSのwhite-spaceの使い方：pre、wrap、nowrapなどの違いは？

覚え方

normal

そのまま覚える。これが他の値の挙動を覚える基準になる。

nowrap

normalから折り返し（wrap）だけを省いた挙動

pre

全ての空白文字がそのまま残される（"pre"served）。 したがって、半角スペース・Tab・改行はHTMLのソースに書いたものがそのまま出力されるため折り返しも行われない。 "pre"は"preserved"の略？

pre-wrap

"pre"での挙動に折り返し（wrap）が加わる。

pre-line

行（line）に対する挙動、つまりHTMLのソースでの改行のみそのまま残される（"pre"served）。 したがって、preでの挙動のうち改行だけが適用されている状態になる。 nomalと比較して改行だけが反映されるというように解釈しても良いかも。

感想

  • 覚え方と銘打った割にうまくまとまらなかった
  • 初めは値preはHTMLの<pre>要素型と同じく"preformatted text"の略称だと思っていたが、"preserved"の略称っぽい？

参考

saruwakakun.com

developer.mozilla.org

developer.mozilla.org