• HOME > 
  • CSS > 
  • CSSで右揃えや中央揃えをする方法【text-alignの使...

CSSで右揃えや中央揃えをする方法【text-alignの使い方】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月08日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

text-alignプロパティとは?

HTMLに記述した文章は、基本的には全て左寄せの状態で表示されます。しかしながらWEBサイトのレイアウトを作成する中では、文章を中央揃えや右寄せにしたいという状況も存在します。その時に使用するCSSのプロパティが「text-align」です。

text-alignプロパティの基本的な使い方

text-alignプロパティは文字揃えをしたい位置に応じた値が決まっているのでそれを指定するだけで設定できます。値はそれぞれ、左寄せの「left」、中央寄せの「center」、右寄せの「right」です。

CSS

.sample_left{
    text-align: left;
}
.sample_center{
    text-align: center;
}
.sample_right{
    text-align:right;
}

HTML

<p class="sample_left">左揃えテキスト</p>
<p class="sample_center">中央揃えテキスト</p>
<p class="sample_right">右揃えテキスト</p>

プレビュー

左揃えテキスト
中央揃えテキスト
右揃えテキスト

テキスト以外の水平位置揃え

'text'とありますが、text-alignプロパティは文字や文章に限らず子要素の水平位置を指定する際に使用できます。※子要素がインライン要素の場合に限ります。

CSS

.box{
    width: 50px;
    height:50px;
    display:inline-block;
    background:#2e51a2;
    margin:5px;
}
.sample_left{
    text-align: left;
}
.sample_center{
    text-align: center;
}
.sample_right{
    text-align:right;
}

HTML

<div class="sample_left"><div class="box"></div></p>
<div class="sample_center"><div class="box"></div></p>
<div class="sample_right"><div class="box"></div></p>

プレビュー

改行位置を揃える

今度は、text-alignによって文字揃えを行った文章の改行が改行された時の表示を見てみましょう。下の例を見てみると改行の部分が凸凹になっています。

CSS

.sample_left{
    max-width:300px;
    text-align: left;
}

HTML

<p class="sample_left">左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。</p>

プレビュー

左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。

改行部分が凸凹にならないようにきれいに揃えて改行したい場合は、「text-align:justify」を指定します。均等配置が適用され改行位置が自動的にきれいに揃います。

CSS

.sample_justify{
    max-width:450px;
    text-align:justify;
}

HTML

<p class="sample_justify">左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。</p>

プレビュー

左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。左揃えテキスト。これはダミーテキストです。改行位置を見てみて下さい。

まとめ

テキストのみならず画像などの水平位置を決めるtext-alignプロパティはWEBサイト作成には欠かせません。指定は簡単ですが、ブロック要素には適用できないなど注意点も存在するのでしっかりと理解しておきましょう。

広告
広告

関連する記事

サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。