JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLでテキストを中央揃えにする方法を解説【centerタグとCSSの使い方】

HTMLでテキストを中央揃えにする基本

HTMLでは、<center>タグを使用することで、そのタグで囲まれたテキストやコンテンツを画面の中央に配置することができます。このタグは非常にシンプルで、開始タグと終了タグで囲むだけで中央揃えが実現できます。

注意： <center>タグは現在非推奨（deprecated）となっています。最新のWeb標準では、代わりにCSSを使った方法が推奨されています。

centerタグの使用例

以下のコードを実行すると、テキストが中央に表示されることを確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML centerタグの例</title>
    </head>
    <body>
        <center>このテキストは中央揃えです</center>
        <p>これは通常のテキストです。</p>
    </body>
</html>

推奨される代替方法：CSSを使った中央揃え

<center>タグはHTML5では廃止されているため、今後のWeb制作ではCSSのtext-alignプロパティを使用するのが標準的な手法です。

text-alignプロパティの例

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center-text {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <p class="center-text">このテキストはCSSで中央揃えされています</p>
    </body>
</html>

まとめ

テキストを中央揃えにする方法として、従来の<center>タグと、現在推奨されているCSSのtext-align: center;の2つの方法があります。古いブラウザ向けの互換性が必要な特別なケースを除き、CSSによる中央揃えを採用することで、保守性が高く標準に準拠したコードになります。

  1. HTMLで取り消し線（打ち消し線）テキストを表示する方法【CSSでの実装手順を解説】

    HTMLで取り消し線（打ち消し線）のついたテキストを表示したい場合、かつては<strike>〜</strike>タグが使われていました。このタグは文字通り、テキストに取り消し線を引いて表示します。しかし、<strike>タグはHTML5では廃止（非推奨）されており、現在のWeb制作では使用すべきではありません。代わりに、CSSのtext-decorationプロパティを使うのが標準的な方法です。CSSのtext-decorationプロパティを使う方法CSSで取り消し線を実現するには、text-decoration: line-through;というスタイル

  2. HTMLでテーブルセルのテキストを中央揃えにする方法【CSSのtext-align活用】

    HTMLのテーブルセル内にあるテキストを中央揃えにするには、CSSのtext-alignプロパティを使用します。かつては<table>タグや<td>タグにalign属性を指定して配置を調整していましたが、この属性はHTML5で廃止（非推奨）されました。そのため、現在はCSSを使ってテキストの位置を揃えるのが標準的な方法です。ここでは、<td>タグに対してtext-alignプロパティを適用します。style属性を使った中央揃えの指定方法CSSを適用する方法のひとつが、style属性によるインラインスタイルの指定です。style属性は要素に直接スタイルを記述で