CSSでtext-alignを使って文字を配置する方法【初心者向け】
CSS初心者向けに、【text-align】を使って文字を配置する方法を解説した記事。テキストの配置場所を設定することができます。左に配置、右に配置、中央配置、均等割付の4つについてサンプルコードを使って説明します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSS初心者向けに、text-alignを使って文字を配置する方法解説する記事です。
CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。
text-alignとは
CSSのtext-alignプロパティを使用することで、テキストの配置場所を設定することができます。サイトの見せ方を変えるときによく使いますので、覚えておきましょう。
本記事では、下記の4つを紹介します。
- 文字列を左に配置する。
- 文字列をを右に配置する。
- 文字列を中央に配置する。
- 文字列の均等割付を行う。
- 最後の行も強制的に均等割付を行う。
- 親要素の値を継承する。
事前準備
事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。
ぜひ自分のPCでもやってみましょう。
HTMLファイル：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">ここに文章を表示</p>
</body>
</html>
text-alignを使ってみる
では具体的に使い方を見ていきましょう。
文字列を左に配置する
テキストを左に配置する場合はleftを入力します。左から右へ書く言語の場合、デフォルトはこのleft値になっています。
このように記述します。
p.sample1 {text-align:left; }
ブラウザで表示してみましょう。デフォルト状態なので何も変わりませんね。
文字列を右に配置する
先ほどとは反対に、文字を右に配置する場合は、leftの部分をrightに変更します。
このように記述しましょう。
p.sample1 {text-align:right; }
ブラウザでは、右寄せでテキストが配置されました。
文字列を中央に配置する
今度は中央に配置します。centerを用いて、下記のように記述しましょう。
p.sample1 {text-align:center; }
ブラウザで見ると、文章がちょうど真ん中にくることがわかります。
文字列の均等割付を行う
最後に少し応用編です。長い英文などで、文字の配置を均等に割り付けるときにはjustifyを使用します。
例えば下の文章では、右側にまちまちな空欄ができてしまっています。
こんなときは、text-alignの値をjustifyにしてからtext-justifyプロパティで均等割付の形式を指定します。このように記述しましょう。
p.sample1 {
text-align: justify;
text-justify: auto;
}
text-justifyの値をautoにすると、単語と文字の間隔を均等に調整します。
ブラウザで表示してみると、文字が均等に配置され、右の空欄もなくなっているのがわかります。
最後の行も強制的に均等割付を行う。
先程均等割付を行いましたが、最後から2行目付近で空白が不自然に表示されていると思います。
これは、justifyの指定を行った場合、最後の行については、ラインボックスの端にそろえた状態での表示になるためです。
ただ、text-align-lastプロパティの指定がある場合はこの限りではありません。
justify-allの指定を行うことで、それだけで、最終行も含めて先程均等割付を適用することができます。
最後の行も強制的に均等割付を行うコード例
p.sample1 {
text-align: justify-all;
text-justify: justify-all;
}
これらの設定はすべて文字列に対してだけ有効で、画像やブロックなどには適用されませんのでご注意ください。
今回の記事は以上です。
CSSをさらに勉強したい場合は、CSSでline-hightを使って行間を指定する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。
| この記事を監修してくれた方
中本賢吾（なかもとけんご） 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。 |
