text-align

テキストアライン（テキストとフォント）

意味テキストの横方向の配置

text-alignとは？

text-alignプロパティは、要素内のテキストやインライン要素の水平方向の配置を指定するために使用します。主に左揃え、右揃え、中央揃え、両端揃えの4つの値が一般的です。

text-alignの具体的な使い方

テキストを中央揃えにする例

<style>
    p {
        text-align: center;
    }
</style>

<p>このテキストは中央揃えです。</p>

ページ内の全てのp（段落）要素内のテキストを中央揃えにします。

様々なテキスト揃えを適用する例

<style>
    .left {
        text-align: left;
    }
    .right {
        text-align: right;
    }
    .justify {
        text-align: justify;
    }
</style>

<p class="left">Left aligned text.</p>

<p class="right">Right aligned text.</p>

<p class="justify">
    Justified text. This paragraph contains a lot of words to demonstrate the justification.
</p>

テキストを左揃え、右揃え、両端揃えにする例です。

text-alignに関するよくある質問

Q. text-alignの値は何がある？

A. 主な値には、left（左揃え）、right（右揃え）、center（中央揃え）、justify（両端揃え）があります。また、start、end、match-parent などの値もありますが、これらはあまり一般的ではありません。

Q. justifyは常に使えますか？

A. justify（両端揃え）は長い文章に適していますが、短い文や単語に使用すると不自然な間隔になることがあります。また、最後の行には適用されません。読みやすさを考慮して使用するべきです。

Q. インライン要素に効果ありますか

A. text-alignは主にブロックレベル要素に対して効果があります。インライン要素自体には直接効果はありませんが、その親要素がブロックレベルの場合、その中のインライン要素の配置に影響します。

text-alignが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのtext-alignやfont-family、font-kerning、word-spacing、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。