HTMLで文章を表示するとき、pタグは段落を作るために使います。そこにstyle属性やalign属性を組み合わせることで、文字の配置を中央に見せることができます。特に「html p style align center」というキーワードは、HTMLで段落テキストを中央寄せしたいときに関係する要素が並んだ表現です。
html p style align centerの基本
pタグは段落を表すHTMLタグです
pタグは、HTMLで文章のまとまりを作るためのタグです。HTMLとは、Webページの構造を作るための言語で、見出し、文章、画像、リンクなどをブラウザに伝える役割があります。その中でpタグは、本文の文章を段落として表示するためによく使われます。
たとえば、次のように書くと、ブラウザ上では1つの段落として文章が表示されます。
<p>これは段落の文章です。</p>pタグで囲まれた部分は、通常、前後に少し余白がついて表示されます。これはブラウザが標準で持っている表示ルールによるものです。初心者の方は、まず「文章を1つのまとまりとして表示したいときにpタグを使う」と考えると理解しやすいです。
段落の文字を中央に配置したい場合、このpタグに対して配置の指定を加えます。そのときに出てくるのが、style属性やalign属性です。属性とは、HTMLタグに追加情報を与えるための書き方です。タグだけでは表しきれない設定を、属性によって補うイメージです。
style属性は見た目を直接指定するために使います
style属性は、HTMLタグに直接CSSを書くための属性です。CSSとは、文字の色、大きさ、配置、余白など、Webページの見た目を整えるための言語です。HTMLがページの骨組みを作るものだとすると、CSSは見た目を整えるための指定です。
pタグの文章を中央寄せしたい場合、現在よく使われる書き方は次のようになります。
<p style="text-align: center;">中央寄せしたい文章です。</p>この中のtext-alignは、文字の横方向の配置を指定するCSSのプロパティです。プロパティとは、CSSで何を変更するかを表す項目です。centerは中央寄せを意味する値です。つまり、text-align: center;は「文字を中央に配置してください」という指定になります。
style属性を使う書き方は、1つのタグだけに見た目の指定を加えたいときに分かりやすい方法です。ただし、同じデザインを複数の場所で使う場合は、HTMLの中に何度も同じ指定を書くことになり、管理が少し大変になります。そのため、学習の初期段階では仕組みを理解するために便利ですが、実際の制作ではCSSを別の場所にまとめる書き方もよく使われます。
align属性のcenterは古い書き方として扱われます
align属性は、要素の配置を指定するために昔から使われていた属性です。たとえば、次のような書き方を見かけることがあります。
<p align="center">中央寄せしたい文章です。</p>この書き方でも、ブラウザによっては文章が中央寄せで表示されます。align="center"は「この段落を中央寄せにする」という意味です。しかし、現在のHTMLでは、見た目に関する指定はHTMLではなくCSSで行う考え方が基本になっています。
そのため、align属性よりも、style="text-align: center;"のようにCSSを使った書き方を覚えることが大切です。古い教材や既存のコードではalign="center"を見かける場合がありますが、新しくHTMLを書くときはCSSで指定する方が望ましいです。
ここで重要なのは、align属性を見たときに意味を読めるようにしつつ、自分で書くときはstyle属性とtext-alignを使うという判断ができることです。古い書き方を知らないままだと既存コードを読みにくくなりますが、古い書き方だけを覚えてしまうと、現在の書き方との違いで混乱しやすくなります。
centerは中央寄せを表す値です
centerは、HTMLやCSSの学習でよく出てくる言葉です。英語では「中央」という意味があり、配置を中央にしたいときに使われます。ただし、どこに書くかによって意味の働き方が少し変わります。
たとえば、CSSでは次のように使います。
<p style="text-align: center;">中央に表示される文章です。</p>この場合、centerはtext-alignの値として使われています。text-alignが文字の配置を決める項目で、centerが中央寄せという具体的な指定です。
一方で、古いHTMLの書き方では次のように使われます。
<p align="center">中央に表示される文章です。</p>この場合、centerはalign属性の値として使われています。どちらも中央寄せを意図していますが、現在の学習ではCSSのtext-align: center;を中心に理解する方が実用的です。
初心者の方が混乱しやすい点は、「centerと書けば何でも中央に寄る」と考えてしまうことです。実際には、どの要素に対して、どのプロパティや属性で指定しているかが重要です。文章を中央寄せする場合は、pタグなどの文字を含む要素に対して、text-align: center;を指定するのが基本です。
pタグで段落を中央寄せする書き方
pタグで作った段落を中央寄せするには、段落の文字配置を指定する必要があります。現在のHTMLでは、見た目の調整はCSSで行う考え方が基本です。そのため、pタグに直接指定する場合は、style属性の中にtext-align: center;を書く方法を覚えると実用的です。
基本の書き方はtext-alignを使います
段落を中央寄せする基本的な書き方は、次のようになります。
<p style="text-align: center;">この文章は中央寄せで表示されます。</p>このコードでは、pタグの中にstyle属性を指定しています。style属性とは、そのHTMLタグだけに見た目の指定を加えるための属性です。属性とは、タグに追加の情報を与えるための書き方で、開始タグの中に書きます。
text-alignは、文字やインライン要素の横方向の配置を指定するCSSのプロパティです。プロパティとは、CSSで「何を変えるか」を表す項目です。ここでは、文章の横位置を変更するためにtext-alignを使っています。
centerは中央寄せを意味する値です。CSSでは、プロパティと値を組み合わせて見た目を指定します。つまり、text-align: center;は「文字の配置を中央にしてください」という意味になります。
初心者の方は、まず次の形をセットで覚えると分かりやすいです。
<p style="text-align: center;">中央にしたい文章</p>この書き方は、1つの段落だけを中央寄せしたいときに便利です。たとえば、お知らせ文、短いメッセージ、ページ内の案内文などを中央に配置したい場合に使えます。
pタグの中身だけが中央寄せになります
text-align: center;をpタグに指定した場合、中央寄せになるのは基本的にそのpタグの中にある文字です。ページ全体のすべての文章が中央寄せになるわけではありません。
たとえば、次のように書いた場合、中央寄せになるのは2つ目の段落だけです。
<p>この文章は通常の位置で表示されます。</p>
<p style="text-align: center;">この文章だけ中央寄せになります。</p>
<p>この文章も通常の位置で表示されます。</p>このように、style属性は指定したタグにだけ効果を与えます。HTMLを学び始めたばかりの段階では、「どのタグに指定しているか」を確認することがとても大切です。
中央寄せしたい文章がある場合は、その文章を囲んでいるpタグにstyle="text-align: center;"を指定します。別のpタグに指定しても、目的の文章には反映されません。
また、pタグは段落を表すタグなので、長い文章全体を1つの段落として中央寄せすることもできます。ただし、長い本文をすべて中央寄せにすると、行を追いにくくなり、読みづらく感じられることがあります。中央寄せは、短い文章や強調したい一文に使うと見やすくなります。
複数の段落を中央寄せする場合の考え方
複数のpタグを中央寄せしたい場合、それぞれのpタグに同じ指定を書く方法があります。
<p style="text-align: center;">1つ目の中央寄せ文章です。</p>
<p style="text-align: center;">2つ目の中央寄せ文章です。</p>
<p style="text-align: center;">3つ目の中央寄せ文章です。</p>この書き方は分かりやすい反面、同じ指定を何度も書くことになります。少ない数であれば問題ありませんが、段落が多くなると修正が大変になります。
たとえば、後から中央寄せを左寄せに変更したくなった場合、すべてのstyle属性を修正しなければなりません。これを避けるために、実際の制作ではCSSをまとめて指定する方法もよく使われます。
<style>
.center-text {
text-align: center;
}
</style>
<p class="center-text">1つ目の中央寄せ文章です。</p>
<p class="center-text">2つ目の中央寄せ文章です。</p>classは、HTML要素に名前を付けて、CSSからまとめて指定するために使う属性です。上の例では、center-textという名前を付けた段落に対して、CSSで中央寄せを指定しています。
学習の最初は、style属性で直接書く方法から理解するとよいです。その後、同じデザインを複数の場所で使う場合に、classを使ったCSS指定へ進むと自然に理解しやすくなります。
style属性でtext-align centerを指定する方法
style属性でtext-align: center;を指定すると、HTMLのタグに対して文字の配置を直接設定できます。pタグに使う場合は、その段落の中にあるテキストを中央寄せにできます。初心者の方は、まず「style属性の中にCSSを書き、text-alignで文字の横位置を決める」と理解すると扱いやすくなります。
style属性の中にCSSを書く流れ
style属性は、HTMLタグの開始タグの中に書きます。開始タグとは、<p>のように要素の始まりを表す部分です。そこにstyle="..."を追加し、引用符の中にCSSの指定を書きます。
基本形は次のとおりです。
<p style="text-align: center;">中央寄せしたい文章です。</p>このコードでは、pタグにstyle属性を追加しています。style属性の中にあるtext-align: center;が、文字を中央に配置する指定です。CSSでは、text-alignのような設定項目をプロパティと呼びます。プロパティとは、「文字の配置を変える」「色を変える」「余白を変える」など、何を調整するかを示す名前です。
centerは、中央寄せを表す値です。CSSでは、プロパティと値をコロンでつなげて書きます。最後のセミコロンは、CSSの指定がそこで終わることを示す記号です。1つだけ指定する場合でも、セミコロンを付ける習慣を持つと、後から指定を追加するときに間違いを防ぎやすくなります。
text-align centerが効く対象を理解します
text-align: center;は、主に文字やインライン要素の配置に影響します。インライン要素とは、文章の流れの中に並ぶ要素のことです。たとえば、短い文字、リンク、強調表示などは文章の一部として横に並びます。
pタグにtext-align: center;を指定すると、その段落の中にある文字が中央寄せになります。
<p style="text-align: center;">
これは中央寄せで表示される段落です。
</p>このとき、pタグそのものが画面全体の中央へ移動しているわけではありません。pタグの中のテキストが、pタグの表示領域の中で中央に配置されています。表示領域とは、その要素が画面上で持っている横幅や高さの範囲のことです。
たとえば、pタグが画面いっぱいの幅を持っていれば、画面全体の中央に文字があるように見えます。一方で、pタグの幅を狭く指定している場合は、その狭い範囲の中で中央寄せになります。中央寄せの結果が思った位置と違うときは、「どの範囲の中で中央にしているのか」を確認することが大切です。
複数のCSS指定を同時に書く方法
style属性の中には、text-align: center;以外のCSSも一緒に書けます。たとえば、文字の色やサイズも同時に指定できます。
<p style="text-align: center; color: blue; font-size: 20px;">
中央寄せで、青色の少し大きな文字です。
</p>colorは文字の色を指定するプロパティです。font-sizeは文字の大きさを指定するプロパティです。pxはピクセルと読み、画面上の大きさを表す単位の一つです。初心者の方は、font-size: 20px;を「文字を20ピクセルの大きさにする指定」と考えると分かりやすいです。
複数のCSSを書く場合は、それぞれの指定をセミコロンで区切ります。書く順番は、今回のような基本的な指定であれば大きく問題になりません。ただし、見やすさを考えると、配置、色、大きさのように意味の近いものを整理して書くと読みやすくなります。
style属性は手軽ですが、HTMLの中に見た目の指定が増えすぎると、コード全体が読みにくくなることがあります。練習では便利な方法ですが、同じ見た目を何度も使う場合は、CSSを別にまとめる方法もあります。
書き間違えやすいポイント
style属性で中央寄せを指定するときは、記号の書き方に注意が必要です。HTMLやCSSは、記号が1つ抜けただけでも期待通りに動かないことがあります。
よくある間違いは、次のようなものです。
<p style="text-align center;">中央寄せしたい文章です。</p>この例では、text-alignとcenterの間にコロンがありません。正しくは次のように書きます。
<p style="text-align: center;">中央寄せしたい文章です。</p>また、centerのスペルミスにも注意が必要です。centerをcentreと書いてしまうと、CSSの値として正しく認識されない場合があります。英語の表記には種類がありますが、CSSでは基本的にcenterを使います。
引用符の閉じ忘れもよくあるミスです。
<p style="text-align: center;>中央寄せしたい文章です。</p>このように引用符が閉じていないと、ブラウザがどこまでを属性の値として扱えばよいか判断しにくくなります。正しくは、style="text-align: center;"のように、開始と終了の引用符でCSS全体を囲みます。
align属性とstyle属性の違い
align属性とstyle属性は、どちらもHTMLで要素の見た目や配置に関係する指定として使われることがあります。ただし、現在のWeb制作では役割の考え方が異なります。align属性は古いHTMLで使われていた配置指定で、style属性はCSSをHTMLタグに直接書くための属性です。
align属性は配置を指定する古い書き方です
align属性は、HTMLタグに対して配置を指定するために使われてきた属性です。たとえば、pタグの文章を中央寄せにしたい場合、次のような書き方を見かけることがあります。
<p align="center">この文章は中央寄せで表示されます。</p>このコードでは、align="center"によって段落の文章を中央寄せにしようとしています。alignは配置を意味し、centerは中央を意味します。つまり、書かれている内容だけを見ると「段落を中央にそろえる」という意図は分かりやすいです。
ただし、現在のHTMLでは、文章の構造を表すHTMLと、見た目を整えるCSSを分けて考えることが基本です。HTMLは「これは段落です」「これは見出しです」といった構造を表し、CSSは「中央寄せにする」「色を変える」「余白を付ける」といった見た目を担当します。
そのため、新しくHTMLを書くときにalign属性を積極的に使うことはおすすめされません。古い教材、古いWebページ、過去に作られたコードでは出てくることがあるため、読めるようにしておくと役に立ちます。しかし、自分で新しく書く場合は、CSSを使った指定を選ぶ方が扱いやすいです。
style属性はCSSを直接書くための属性です
style属性は、HTMLタグに直接CSSを書くための属性です。CSSとは、Webページの見た目を整えるための言語です。文字の色、配置、余白、背景色などを指定できます。
pタグの文字を中央寄せしたい場合は、次のように書きます。
<p style="text-align: center;">この文章は中央寄せで表示されます。</p>このコードでは、style属性の中にtext-align: center;というCSSを書いています。text-alignは文字の横方向の配置を指定するプロパティです。プロパティとは、CSSで「何を変更するか」を表す名前です。centerは中央寄せを意味する値です。
style属性を使うと、そのタグだけに見た目の指定を加えられます。たとえば、1つの段落だけ中央寄せにしたいときは、すぐに指定できて分かりやすいです。
<p>通常の段落です。</p>
<p style="text-align: center;">この段落だけ中央寄せです。</p>
<p>通常の段落です。</p>この例では、2つ目のpタグだけが中央寄せになります。style属性は、指定したタグに直接作用するため、HTMLのどこに指定を書いたかが結果に大きく関係します。
役割の違いを整理して理解します
align属性とstyle属性の大きな違いは、見た目の指定をHTMLの属性として行うか、CSSとして行うかです。align属性は、HTMLタグの中で配置を直接指定する書き方です。一方、style属性は、HTMLタグの中にCSSを書くための入り口として使われます。
違いを整理すると、次のようになります。
| 項目 | align属性 | style属性 |
|---|---|---|
| 主な目的 | 配置を指定する | CSSを直接書く |
| 中央寄せの例 | <p align="center">文章</p> | <p style="text-align: center;">文章</p> |
| 現在の考え方 | 古い書き方として扱われる | CSS指定として理解しやすい |
| 指定できる内容 | 主に配置 | 色、サイズ、余白、配置など幅広い |
| 学習上の扱い | 読めるようにする | 書けるようにする |
align属性は、見た目の指定をHTMLに直接持たせる考え方です。対して、style属性はHTMLの中にCSSを直接書いているため、CSSのルールに沿って見た目を指定できます。
初心者の方は、古いコードを読むときにalign="center"を見たら「中央寄せの指定だ」と理解できれば十分です。そして、自分で新しく書くときはstyle="text-align: center;"を使うと覚えると、現在の学習に合いやすくなります。
使い分けで意識したいポイント
中央寄せの書き方として、見た目の結果だけを見るとalign="center"でもstyle="text-align: center;"でも似た表示になる場合があります。しかし、学習や実務では、どの書き方を選ぶかが大切です。
新しくコードを書く場合は、次のようにCSSを使う書き方を優先します。
<p style="text-align: center;">中央寄せの文章です。</p>この書き方を覚えておくと、中央寄せだけでなく、左寄せ、右寄せ、両端揃えなどにも応用できます。
<p style="text-align: left;">左寄せの文章です。</p>
<p style="text-align: right;">右寄せの文章です。</p>
<p style="text-align: justify;">両端揃えの文章です。</p>leftは左寄せ、rightは右寄せ、justifyは両端揃えを意味します。両端揃えとは、文章の左右の端がそろうように文字間の間隔を調整して表示する方法です。
style属性を使うことで、CSSの基本的な考え方にも慣れやすくなります。最初はpタグに直接書く形で理解し、慣れてきたらCSSを別にまとめる方法へ進むと、コードを管理しやすくなります。
中央寄せが効かないときの確認ポイント
pタグに中央寄せを指定しても、思ったように表示されないことがあります。その場合は、書き方のミス、指定しているタグの違い、CSSの上書き、要素の幅などを順番に確認すると原因を見つけやすくなります。中央寄せは単純に見えますが、「何を」「どの範囲の中で」中央にしているのかを意識することが大切です。
style属性の書き方を確認します
中央寄せが効かないときは、まずstyle属性の書き方を確認します。HTMLやCSSは、記号やスペルが少し違うだけでも正しく反映されないことがあります。
正しい書き方は次のとおりです。
<p style="text-align: center;">中央寄せしたい文章です。</p>特に確認したいのは、text-alignとcenterの間にコロンがあるかどうかです。次のようにコロンが抜けていると、CSSとして正しく読み取られません。
<p style="text-align center;">中央寄せしたい文章です。</p>また、text-alignのハイフンを忘れてtextalignのように書いてしまう間違いもあります。CSSのプロパティ名は決まっているため、似た形でも別の名前として扱われます。
centerのスペルも確認が必要です。CSSではcenterを使います。centerの文字が抜けていたり、別のつづりになっていたりすると、中央寄せとして認識されません。
さらに、引用符の閉じ忘れにも注意します。style="text-align: center;"のように、CSSの指定全体が引用符で囲まれている必要があります。開始の引用符と終了の引用符がそろっているかを確認すると、基本的なミスを減らせます。
中央寄せを指定しているタグを確認します
中央寄せが効かない原因として、指定するタグを間違えている場合があります。pタグの文章を中央寄せしたいなら、その文章を囲んでいるpタグに指定する必要があります。
たとえば、次のコードでは、2つ目の段落だけが中央寄せになります。
<p>通常の文章です。</p>
<p style="text-align: center;">中央寄せしたい文章です。</p>もし中央寄せしたい文章が別のタグの中にある場合、違う場所にstyle属性を書いても反映されないことがあります。HTMLでは、開始タグと終了タグの対応を確認することが大切です。
次のように、中央寄せしたい文章がpタグの外に出ていると、意図した結果になりません。
<p style="text-align: center;"></p>
中央寄せしたい文章です。この例では、pタグの中身が空になっており、中央寄せしたい文章はpタグの外側にあります。正しくは、文章をpタグの中に入れます。
<p style="text-align: center;">中央寄せしたい文章です。</p>HTMLを書いていると、タグの閉じ忘れや位置のずれによって、どこに指定が効いているのか分かりにくくなることがあります。表示がおかしいと感じたら、中央寄せしたい文章が本当に指定したタグの内側にあるかを確認してください。
他のCSSに上書きされていないか確認します
CSSには、同じ要素に複数の指定がある場合、どの指定を優先するかというルールがあります。これを優先順位といいます。優先順位とは、複数のCSSが同じ場所に作用したとき、どの指定を最終的に採用するかを決める考え方です。
たとえば、次のように別のCSSで左寄せが指定されている場合があります。
<style>
p {
text-align: left;
}
</style>
<p style="text-align: center;">中央寄せしたい文章です。</p>この例では、pタグ全体に左寄せが指定されていますが、同じpタグにstyle="text-align: center;"も指定されています。多くの場合、直接書いたstyle属性の指定が優先されます。
一方で、次のように別の場所で強い指定がされていると、思った結果にならない場合があります。
<style>
.message {
text-align: left !important;
}
</style>
<p class="message" style="text-align: center;">中央寄せしたい文章です。</p>!importantは、CSSの指定を強く優先させるための書き方です。便利に見えますが、使いすぎるとどの指定が効いているのか分かりにくくなります。初心者の段階では、!importantが使われていないかを確認するだけでも原因の発見につながります。
中央寄せが効かないときは、同じpタグに対して別のCSSが指定されていないかを確認します。特に、classやidを使ってCSSを当てている場合は、同じ要素に複数の指定が重なっていることがあります。
要素の幅と中央寄せの範囲を確認します
text-align: center;は、要素の中にある文字を、その要素の幅の中で中央寄せします。そのため、要素の幅がどれくらいあるかによって、見え方が変わります。
たとえば、pタグが画面いっぱいの幅を持っていれば、文字は画面の中央にあるように見えます。
<p style="text-align: center;">画面の中央に見える文章です。</p>しかし、pタグの幅を狭くしている場合、文字はその狭い範囲の中で中央寄せになります。
<p style="width: 200px; text-align: center;">
この文章は200pxの幅の中で中央寄せになります。
</p>widthは、要素の横幅を指定するCSSのプロパティです。200pxは200ピクセルの幅を意味します。ピクセルとは、画面上の大きさを表す単位の一つです。
この場合、文字はページ全体の中央ではなく、幅200ピクセルのpタグの中で中央に配置されます。ページ全体の中央に置きたい場合は、文字の中央寄せだけでなく、要素そのものの配置も考える必要があります。
たとえば、幅を指定した段落自体を中央に配置したい場合は、次のような指定を使うことがあります。
<p style="width: 200px; margin: 0 auto; text-align: center;">
段落自体も中央に近い位置へ配置されます。
</p>marginは、要素の外側の余白を指定するCSSのプロパティです。autoは、左右の余白を自動で調整する値です。margin: 0 auto;と書くと、上下の余白を0にし、左右の余白を自動調整して、幅のある要素を中央に配置しやすくなります。
実際のHTMLコードで学ぶ中央寄せの例
pタグの中央寄せは、短いコードから順番に確認すると理解しやすくなります。ここでは、style属性を使った基本例、複数の段落を中央寄せする例、幅を指定した場合の例を見ながら、text-align: center;がどのように働くかを学びます。
1つのpタグだけを中央寄せする例
まずは、1つのpタグだけを中央寄せする基本の例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pタグの中央寄せ</title>
</head>
<body>
<p style="text-align: center;">この文章は中央寄せで表示されます。</p>
</body>
</html><!DOCTYPE html>は、このファイルがHTML文書であることをブラウザに伝えるための宣言です。htmlタグはHTML文書全体を囲むタグで、headタグにはページの設定情報、bodyタグには画面に表示される内容を書きます。
この例で中央寄せに関係しているのは、次の部分です。
<p style="text-align: center;">この文章は中央寄せで表示されます。</p>pタグは段落を作るタグです。style属性の中にtext-align: center;を書くことで、その段落の文字が中央寄せになります。text-alignは文字の横方向の配置を指定するCSSのプロパティで、centerは中央寄せを意味する値です。
この書き方は、ページ内の一部分だけを中央にしたいときに向いています。たとえば、短い案内文、キャンペーンの一文、フォームの説明文など、目立たせたい文章に使いやすいです。
複数のpタグを中央寄せする例
複数の段落を中央寄せしたい場合は、それぞれのpタグに同じstyle属性を指定できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>複数の段落を中央寄せ</title>
</head>
<body>
<p style="text-align: center;">1つ目の文章です。</p>
<p style="text-align: center;">2つ目の文章です。</p>
<p style="text-align: center;">3つ目の文章です。</p>
</body>
</html>このコードでは、3つのpタグすべてにstyle="text-align: center;"を書いています。そのため、3つの段落はすべて中央寄せで表示されます。
ただし、同じ指定を何度も書くと、コードが長くなります。後から中央寄せを左寄せに変えたい場合も、すべてのpタグを修正しなければなりません。段落が少ない場合は問題ありませんが、数が増えると管理しにくくなります。
そのような場合は、CSSをまとめて書く方法があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSSでまとめて中央寄せ</title>
<style>
.center-text {
text-align: center;
}
</style>
</head>
<body>
<p class="center-text">1つ目の文章です。</p>
<p class="center-text">2つ目の文章です。</p>
<p class="center-text">3つ目の文章です。</p>
</body>
</html>classは、HTML要素に名前を付けるための属性です。この例では、中央寄せしたいpタグにclass="center-text"を付けています。styleタグの中では、.center-textに対してtext-align: center;を指定しています。
ドットから始まる.center-textは、クラス名を指定するためのCSSの書き方です。これにより、同じクラス名を持つ要素にまとめてCSSを適用できます。
幅を指定したpタグで中央寄せする例
text-align: center;は、文字をその要素の幅の中で中央寄せします。そのため、pタグの幅を指定すると、中央寄せの見え方が変わります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>幅を指定した中央寄せ</title>
</head>
<body>
<p style="width: 300px; text-align: center;">
この文章は300pxの幅の中で中央寄せになります。
</p>
</body>
</html>widthは、要素の横幅を指定するCSSのプロパティです。300pxは、横幅を300ピクセルにする指定です。ピクセルとは、画面上の大きさを表す単位の一つです。
この例では、文章はページ全体の中央ではなく、横幅300ピクセルのpタグの中で中央寄せになります。ブラウザ上では、pタグ自体が左側に寄っているように見える場合があります。
幅を指定したpタグ自体も中央に配置したい場合は、次のようにmargin: 0 auto;を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>段落自体も中央に配置</title>
</head>
<body>
<p style="width: 300px; margin: 0 auto; text-align: center;">
この文章は段落の中で中央寄せされ、段落自体も中央に配置されます。
</p>
</body>
</html>marginは、要素の外側の余白を指定するCSSのプロパティです。margin: 0 auto;では、上下の余白を0にし、左右の余白を自動で調整します。幅が決まっている要素に対して左右の余白を自動にすると、要素自体を中央に配置しやすくなります。
この例では、text-align: center;が文章の中央寄せを担当し、margin: 0 auto;がpタグそのものの中央配置を担当しています。文字を中央にする指定と、要素そのものを中央に置く指定は別の考え方なので、分けて理解することが大切です。
pタグの中央寄せを使うときの注意点
pタグの中央寄せは、短い文章を目立たせたいときに便利です。ただし、使う場面を誤ると、文章が読みにくくなったり、HTMLとCSSの役割が分かりにくくなったりします。中央寄せは見た目を整えるための指定なので、読みやすさ、管理のしやすさ、現在のHTMLの考え方を意識して使うことが大切です。
長い本文をすべて中央寄せにしないようにします
中央寄せは、短い文章や見出しに近い案内文では見栄えがよくなります。しかし、長い本文をすべて中央寄せにすると、行の始まりの位置がそろわなくなり、読み手が次の行を追いにくくなります。
たとえば、次のような長い説明文を中央寄せにすると、文章全体の形は整って見えても、実際には読みづらく感じられる場合があります。
<p style="text-align: center;">
HTMLではpタグを使って段落を作ります。段落の文章を中央寄せにしたい場合は、style属性の中にtext-align: center;を指定します。
</p>文章が長くなるほど、左端の位置が行ごとに変わります。読み手は通常、行の左端を基準にして文章を読み進めるため、長文では左寄せの方が読みやすいことが多いです。
中央寄せは、次のような短い文章に使うと効果的です。
<p style="text-align: center;">お問い合わせはこちら</p>このような短い一文であれば、中央寄せによって視線を集めやすくなります。ページの案内、ボタンの近くの補足文、完了メッセージなど、短く区切られた文章に使うと見た目の意図が伝わりやすくなります。
align属性ではなくCSSで指定します
古いHTMLでは、align属性を使って中央寄せを指定する書き方がよく使われていました。
<p align="center">中央寄せの文章です。</p>この書き方でも、ブラウザによっては中央寄せとして表示されます。しかし、現在のHTMLでは、構造はHTML、見た目はCSSで指定する考え方が基本です。構造とは、文章が段落なのか、見出しなのか、リストなのかといった内容の役割を表すことです。見た目とは、文字の色、サイズ、配置、余白などの表示上の調整を指します。
新しくコードを書く場合は、次のようにCSSで中央寄せを指定します。
<p style="text-align: center;">中央寄せの文章です。</p>style属性はHTMLタグに直接CSSを書くための属性です。text-alignは文字の横方向の配置を指定するCSSのプロパティで、centerは中央寄せを意味する値です。
初心者の段階では、align="center"を見たときに意味を理解できることも大切です。古いコードや古い教材では登場する場合があるためです。ただし、自分で新しく書くときは、style="text-align: center;"のようにCSSで指定する習慣を持つと、現在のWeb制作の考え方に沿って学習できます。
同じ指定を何度も書きすぎないようにします
style属性は、1つのタグに直接CSSを書けるため、練習や小さな修正では分かりやすいです。しかし、同じ中央寄せの指定を何度も書くと、コードが長くなり、修正もしにくくなります。
たとえば、次のように複数の段落に同じ指定を書くことがあります。
<p style="text-align: center;">1つ目の文章です。</p>
<p style="text-align: center;">2つ目の文章です。</p>
<p style="text-align: center;">3つ目の文章です。</p>この程度であれば問題は少ないですが、ページ全体で同じ指定が何十回も出てくると管理が大変です。後から中央寄せを左寄せに変更したい場合、すべてのstyle属性を探して直す必要があります。
同じ見た目を何度も使う場合は、classを使ってCSSをまとめる方法が便利です。
<style>
.center-text {
text-align: center;
}
</style>
<p class="center-text">1つ目の文章です。</p>
<p class="center-text">2つ目の文章です。</p>
<p class="center-text">3つ目の文章です。</p>classは、HTML要素に名前を付けるための属性です。CSS側では、その名前に対してまとめて見た目を指定できます。上の例では、center-textというクラス名を付けた段落が中央寄せになります。
この書き方にすると、中央寄せの指定を変更したいときに、CSSの1か所を修正するだけで済みます。小さなコードではstyle属性、複数箇所で使う場合はclassを使うという考え方を持つと、コードを整理しやすくなります。
文字の中央寄せと要素の中央配置を区別します
text-align: center;は、要素の中にある文字を中央寄せする指定です。要素そのものをページの中央に移動させる指定ではありません。ここを混同すると、中央寄せが効いていないように見えることがあります。
たとえば、次のコードでは、文字はpタグの中で中央寄せされます。
<p style="width: 300px; text-align: center;">
中央寄せの文章です。
</p>この場合、pタグの幅は300ピクセルです。文字はその300ピクセルの中で中央寄せになりますが、pタグ自体がページ全体の中央に配置されるわけではありません。
pタグ自体も中央に置きたい場合は、幅を指定したうえで左右の余白を自動調整します。
<p style="width: 300px; margin: 0 auto; text-align: center;">
段落自体も中央に配置される文章です。
</p>marginは、要素の外側の余白を指定するCSSのプロパティです。margin: 0 auto;では、上下の余白を0にし、左右の余白を自動で調整します。幅がある要素に対してこの指定を使うと、要素そのものを中央に配置しやすくなります。
文章を中央にしたいのか、段落の箱そのものを中央に置きたいのかを分けて考えると、CSSの指定を選びやすくなります。text-align: center;は文字の配置、margin: 0 auto;は幅のある要素の配置に関係する指定です。
まとめ
HTMLでpタグの文章を中央寄せする場合は、style属性にtext-align: center;を指定する方法が基本です。align="center"という古い書き方もありますが、現在の学習ではHTMLで構造を作り、CSSで見た目を整える考え方を身につけることが大切です。
pタグと中央寄せの関係
pタグは、HTMLで段落を作るためのタグです。本文の文章をひとまとまりにして表示したいときに使います。段落の中にある文字を中央寄せしたい場合は、そのpタグに対して配置の指定を行います。
基本のコードは次のとおりです。
<p style="text-align: center;">中央寄せしたい文章です。</p>この書き方では、pタグの中にある文章が中央寄せになります。style属性はHTMLタグに直接CSSを書くための属性です。CSSとは、文字の色、大きさ、配置、余白など、Webページの見た目を整えるための言語です。
text-alignは、文字の横方向の配置を指定するCSSのプロパティです。プロパティとは、CSSで「何を変更するか」を表す項目です。centerは中央寄せを意味する値です。そのため、text-align: center;は「文字を中央に配置する」という指定になります。
ただし、text-align: center;は要素そのものを画面中央へ移動する指定ではありません。文字を、その要素が持っている幅の中で中央に配置する指定です。幅を指定したpタグ自体を中央に置きたい場合は、margin: 0 auto;のような別の指定も必要になります。
align属性よりstyle属性を使う考え方
align="center"は、古いHTMLで中央寄せを指定するときに使われていた書き方です。たとえば、次のようなコードです。
<p align="center">中央寄せしたい文章です。</p>この書き方でも、ブラウザによっては中央寄せとして表示されます。しかし、現在は見た目の調整をCSSで行う考え方が基本です。HTMLは文章の構造を表し、CSSは見た目を整える役割を持ちます。
そのため、新しくHTMLを書く場合は、次のようにstyle属性でCSSを指定する方法を使います。
<p style="text-align: center;">中央寄せしたい文章です。</p>align属性は、古いコードを読むときに意味を理解できれば十分です。自分で新しく書くときは、CSSのtext-align: center;を使うと、現在のWeb制作の考え方に沿った書き方になります。
また、style属性は1つのタグに直接CSSを書けるため、学習の初期段階では理解しやすい方法です。ただし、同じ中央寄せを複数の段落に使う場合は、classを使ってCSSをまとめると管理しやすくなります。
<style>
.center-text {
text-align: center;
}
</style>
<p class="center-text">中央寄せの文章です。</p>classは、HTML要素に名前を付けるための属性です。CSS側でその名前に対して指定を書くことで、同じ見た目を複数の要素にまとめて適用できます。
中央寄せで確認したいポイント
中央寄せがうまく効かないときは、まず書き方を確認します。text-alignとcenterの間にはコロンが必要です。また、style属性の値は引用符で囲む必要があります。
正しい書き方は次のとおりです。
<p style="text-align: center;">中央寄せしたい文章です。</p>次のような書き方は間違いです。
<p style="text-align center;">中央寄せしたい文章です。</p>この例では、text-alignとcenterの間にコロンがないため、CSSとして正しく読み取られません。HTMLやCSSでは、記号やスペルの間違いが表示結果に影響するため、細かい部分まで確認することが大切です。
また、中央寄せしたい文章が本当にpタグの中に入っているかも確認します。指定したタグの外に文章が出ていると、意図した中央寄せは反映されません。
text-align: center;は、短い文章や案内文を目立たせるときに便利です。一方で、長い本文をすべて中央寄せにすると、行の始まりがそろわず読みにくくなることがあります。読みやすさを保つためには、長い説明文は左寄せにし、中央寄せは短いメッセージや強調したい文章に使うとよいです。
中央寄せを学ぶときは、pタグ、style属性、text-align、centerの関係をセットで理解することが大切です。pタグは段落、style属性はCSSを直接書く場所、text-alignは文字配置の指定、centerは中央寄せの値として考えると、コードの意味を読み取りやすくなります。
