CSSで文字の色を変える方法を覚えた。文字のサイズを変えることもできるようになった。じゃあ次は何をしよう？
横書きで文章を書くときは、Webではいつも画面の左寄せになるのかな？WordやExcelを使っているときみたいに、右寄せや中央揃えにはできないのかな？と考えたことはありませんか？文字の配置もCSSで変えることができるんです。
今回は文字の位置をCSSで変える方法について説明します。
文字の位置を変えるtext-alignプロパティ
CSSの基本の書き方、文字の色を変える方法、文字のサイズを変える方法については別の記事で紹介しています。もう一度参考にしたい、復習のために読み直したい、そんなときにはぜひリンクから参照してみてください。
CSSで文字の位置を変えるには、text-align（テキストアライン）プロパティを使います。
「align」とは、日本語で「整列すること」や「並べること」を意味します。
まずセレクターで文字の配置を変更したい場所を指定し、値の部分で文字の位置を英語で指定します。
上記のCSSは、「pの部分の、文字の位置を、中央揃えに変える」という意味があります。
文字の位置をCSSで指定するときに使われる主な値は次の4つです
- left：左揃え
- right：右揃え
- center：中央揃え
- justify：両端揃え（均等割付）
text-alignを実際に使ってみる
共通で使用する基本のHTMLをまず準備します。
【HTML記述例】
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSで文字の位置を変える</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>文字の配置。文字の配置。文字の配置。文字の配置。文字の配置。文字の配置。文字の配置。文字の配置。</p>
<p>文字の位置をCSSで指定して変えます。文字の位置をCSSで指定して変えます文字の位置をCSSで指定して変えます文字の位置をCSSで指定して変えます文字の位置をCSSで指定して変えます文字の位置をCSSで指定して変えます文字の位置をCSSで指定して変えます</p>
</body>
</html>
では、CSSをひとつずつ実際に試しながら見てみましょう。
CSSで文字の位置を左揃えにする
文字の位置をブラウザ画面の左揃えにしたいときは「text-align」の値の指定を「left」にします。
【CSS記述例】
p{
text-align: left;
}
ブラウザでの表示はこの画像のようになります。
日本語の横書きの場合、初期値は左揃えになっているので、実は特に指定しなくても左揃えで表示されます。
CSSで文字の位置を右揃えにする
文字の位置をブラウザ画面の左揃えにしたいときは「text-align」の値の指定を「right」にします。
【CSS記述例】
p{
text-align: right;
}
ブラウザでの表示はこの画像のように右揃えになります。
CSSで文字の位置を中央揃えにする
文字の位置をブラウザ画面の左揃えにしたいときは「text-align」の値の指定を「center」にします。
【CSS記述例】
p{
text-align: center;
}
この画像のようにブラウザの横幅の中央揃えになります。
言葉を目立たせるデザインのために、文字を中央揃えにしたいときがあると思います。文章が長くなるときは、中央揃えは文字の始まりの位置がばらばらになるので、文章を読みづらくするので気をつけましょう。日本語の長文のときは、一般的に左揃えが読みやすいです。
CSSで文字の位置を両端揃え（均等割付）にする
文字の位置をブラウザ画面の両端揃え（均等割付）にしたいときは「text-align」の値の指定を「justify」にします。
【CSS記述例】
p{
text-align: justify;
}
この画像のようにブラウザの横幅の両端揃えになります。
左寄せのときと、両端揃え（均等割付）のときの違いは、両端揃えだと画像のように、段落の両端がきれいに揃うことです。
CSSで文字の位置を指定するその他の値
text-alignの値を「start」で配置を指定すると、左から右方向に読む文章の場合は「left」の左寄せと同じになります。
また、text-alignの値を「end」で配置を指定すると、左から右方向に読む文章の場合は「right」の右寄せと同じになります。
まとめ
今回は、CSSで文字の位置を変えるときに使うtext-alignプロパティの使い方について解説しました。
文字の位置は、left、right、center、justifyと、英語で指定することに苦手意識を感じた方もいるかもしれません。私も最初はそうでした。
HTMLやCSSは基本的に英数字で表現するので、これから少しずつでいいので英数字に対する苦手意識をなくしていくほうがいいです。そのほうが楽しくホームページ作りを続けていくことができます。一緒に一歩ずつ進んでいきましょう！
