webfeelfree

CSSで右寄せ・左寄せ・中央寄せする

CSS-寄せる・揃える
CSSのデフォルトでは、左寄せや左揃えが設定されていますが、Webサイトをデザインしていくうえでは、やっぱり右寄せや中央寄せをしたいときが出てきますよね。

過去に中央寄せシリーズとして
CSSでdivでもulタグでも2つ以上のブロック要素を並べて中央寄せにしてみた
2つ、3つ以上のテーブルを並べて中央に寄せるHTML&CSSコンビネーション
という記事を書きました。

が、初心忘るべからずとして、もう一度、振り返りメモをしてみようかと思います。

デモについて(HTMLとCSSの注意点)

HTMLは、共通で、このコーディングを使っています。

<div class="demo1">右寄せ</div>
<div class="demo2">中央寄せ</div>
<div class="demo3">左寄せ</div>

また各デモでは、分かりやすいように線など装飾系のコーディングを書いています。
説明では、装飾系のコーディングは割愛しています。

あと左揃えは、コーディングの機会が少ないと思いますので、紹介の順番は「右寄せ→中央寄せ→左寄せ」の順に紹介しています。

それでは、参りましょう。

ブロック要素内ではtext-alignを使う

右寄せ

.demo1{
  text-align: right;
}

中央寄せ

.demo2{
  text-aling: center;
}

左寄せ

.demo3{
  text-aling: left;
}

text-alingを使います。
それぞれで「right/center/left」を指定します。

寄せるというよりも、「揃える」という表現の方がピンとくるかもしれませんね。

See the Pen text-align by webfeelfree (@webfeelfree) on CodePen.4259

「行の中で」というか、「ブロックの中で」というか、枠組みの中で、テキストが寄り(揃えられ)ます

marginを使う方法は中央寄せに便利

右寄せ

.demo1{
  width: ***;
  margin-left: auto;
}

中央寄せ

.demo2{
  width: ***;
  margin-left: auto;
  margin-right: auto;
}

左寄せ

.demo3{
  width: ***;
  margin-right: auto;
}

左右にmargin: auto;を使う方法です。
この方法は、widthを使って、ブロック要素に幅をちゃんと指定しないと、左右にmargin: auto;が効きません

ブロック要素丸ごと、右寄せや左寄せ、中央寄せできます。

See the Pen margin-align by webfeelfree (@webfeelfree) on CodePen.4259

右寄せ・左寄せは、ブロック要素にwidth(幅)を指定しなければならないということで、レスポンシブやクロスブラウザ、ピクセルパーフェクト?を目指すサイトには不向きかもしれません。

ですが、現在、中央寄せは、この方法が主流で、ブラウザでサイト全体が中央に表示されているサイトは、この方法が使われています。

余談ですが、今回、この記事を作成するにあたって、margin: auto;を使って、右寄せや左寄せも出来るんだと思い出しました。

右寄せに便利なfloatを使う方法

右寄せ

.demo1{
  float: right;
}

左寄せ

.demo3{
  float: left;
}

floatを使う方法には、中央寄せはありません。
もし方法を知っている方がおられたら、メッセージお待ちしております。。。

See the Pen float-align by webfeelfree (@webfeelfree) on CodePen.4259

こちらは、先ほどのmarginを使う方法と違って、widthを指定する必要がありません。
デモを見てもらうとわかるのですが、widthを設定していないので、線の中にテキストがピッタリ収まってますよね。

floatを使えば、<a>などのインライン要素も右寄せ・左寄せすることができます。
これが、また、便利なんです。

非常に便利なのですが、float自体、自由度が高いために、レイアウトが崩れる恐れがあるので注意が必要です。
clearなど使ってfloatを解除しなければならないことも覚えておきましょう。

floatに関しては、また後日、書きたいと思います。

あとがき

3種類、紹介しましたが、シンプルなだけに、今後も廃れないコードだと思っています。

あとは、この3種類を組み合わせて使う感じです。
例えば、marginで中央に寄せてから、text-alignを使って右寄せにするとか、いろんな場面で絶対的に活躍するコードです。

CSSの初めの一歩という感じで使ってみてください。

今後も、基礎というか、シンプルなコーディングを、どんどん書いていきたいと思います。

最新記事

読まれている記事

ツイッター

カテゴリー