css 中央揃え文字

CSS でテキストを中央揃えする: HTML でテキストを揃える方法

この簡単なチュートリアルでは、CSS の text-align プロパティを使用して、テキストを中央揃え、左揃え、または右揃えする方法、および text-align: justify プロパティを使用してテキストブロックを揃える方法について説明します。

1. CSS のテキスト揃えとは

text-align プロパティは、包含要素内でのテキストの水平方向の配置方法を制御するために使用されます。

text-align プロパティのデフォルト値は start であり、これはテキストが左揃えになることを意味します。

text-align プロパティは、ブロックレベル要素に適用されます。ブロックレベル要素は、段落 (

) や見出し (

、

など) などの、新しい行で開始および終了する要素です。

2. CSS `text-align` プロパティの値

text-align プロパティには、次の値を指定できます。

値	説明
`left`	テキストを左揃えにします（デフォルト値）。
`center`	テキストを中央揃えにします。
`right`	テキストを右揃えにします。
`justify`	テキストを両端揃えにします（行を埋めるために単語の間隔を調整します）。

`text-align: left`：左揃え（デフォルト値）

この値は、テキストを左側に揃えます。これがデフォルトの動作です。


<p style="text-align: left;">このテキストは左揃えです。</p>

`text-align: center`：中央揃え

この値は、テキストを中心に向かって水平方向に揃えます。


<p style="text-align: center;">このテキストは中央揃えです。</p>

`text-align: right`：右揃え

この値は、テキストを右側に揃えます。


<p style="text-align: right;">このテキストは右揃えです。</p>

`text-align: justify`：両端揃え

この値は、テキストの両端を揃えます。テキストの両端が揃うように、単語の間隔が調整されます。


<p style="text-align: justify;">このテキストは両端揃えです。単語の間隔が調整され、テキストの両端が揃えられます。</p>

3. インラインスタイル、内部スタイルシート、外部スタイルシートを使用したテキストのセンタリング

CSS スタイルを適用するには、次の 3 つの方法があります。

インラインスタイル：style 属性を HTML タグ内に直接使用します。
内部スタイルシート：HTML ドキュメントの <head> セクション内で <style> タグを使用します。
外部スタイルシート：CSS ルールを別の .css ファイルに記述し、それを HTML ドキュメントにリンクします。

インラインスタイル


<p style="text-align: center;">このテキストはインラインスタイルを使用して中央揃えされています。</p>

内部スタイルシート


<head>
<style>
  p {
    text-align: center;
  }
</style>
</head>
<body>
  <p>このテキストは内部スタイルシートを使用して中央揃えされています。</p>
</body>

外部スタイルシート

style.css:


p {
  text-align: center;
}

HTML:


<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>このテキストは外部スタイルシートを使用して中央揃えされています。</p>
</body>

4. まとめ

この記事では、CSS の text-align プロパティを使用してテキストを揃える方法を学びました。text-align プロパティのさまざまな値を試して、Web ページのテキストの外観を制御する方法を理解してください。

CSS でテキストを中央揃えする: HTML でテキストを揃える方法

1. CSS のテキスト揃えとは

、

など) などの、新しい行で開始および終了する要素です。

2. CSS text-align プロパティの値

text-align: left：左揃え（デフォルト値）

text-align: center：中央揃え

text-align: right：右揃え

text-align: justify：両端揃え