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

HTMLでテキストを中央揃えにする方法｜style属性とalign属性の使い方

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

プログラミングを学び始めたとき、最初に覚えることのひとつがテキストブロックの配置（アラインメント）です。この記事では、style属性とalign属性を使って、コンテナ内のテキストを中央揃えにする方法をわかりやすく解説します。

style属性を使った中央揃え

HTMLでdiv要素を扱う際は、style属性を使ってインラインスタイルを直接記述できます。CSSプロパティのtext-alignに「center」を指定することで、<div>内のテキストを中央揃えにできます。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center with Style Attribute</title>
</head>
<body>
   <div class="container" style="text-align:center;">
       <p>Text to center</p>
   </div>
</body>
</html>

align属性を使った中央揃え

align属性は、主にHTMLの表（table）を扱うときに使用できる属性です。この属性が有効なのは、<col>、<colgroup>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>といった表関連の要素のみです。

<!DOCTYPE html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>Center with Align Attribute</title>
   </head>
   <body>
       <table border=1 width="800" align="center">
           <tr>
             <th>Month</th>
             <th>Savings</th>
           </tr>
           <tr align="center">
             <td>January</td>
             <td>$100</td>
           </tr>
           <tr align="center">
             <td>February</td>
             <td>$80</td>
           </tr>
         </table>
   </body>
</html>

注意：align属性は非推奨

なお、align属性はHTML5では非推奨（deprecated）とされています。現在のWeb制作では、表の中央揃えについてもCSSのtext-alignプロパティやmargin: 0 auto;を使う方法が推奨されているため、新規のコードではCSSでの指定を心がけましょう。

中央揃えの基準は「コンテナ」

テキストの中央揃えを学ぶ上で最も重要なポイントは、配置があくまで「親となるコンテナ」を基準に行われるという点です。例えば、コンテナがページ幅の半分しかない場合、テキストはページ全体に対してではなく、そのコンテナの幅の中で中央揃えされます。思い通りの位置にテキストを配置するためには、コンテナ自体の幅も意識することが大切です。

以上で解説は終わりです。<div>要素にはstyle属性のtext-align、<table>要素にはalign属性を使うことで、それぞれテキストを中央揃えにできるようになりました。ぜひ実際のコードで試してみてください。

  1. HTMLのplaceholder属性とは？使い方とサンプルコードを解説

    HTMLのplaceholder（プレースホルダー）属性は、ユーザーが何も入力する前に、input要素やtextarea要素の中に表示されるヒントテキスト（仮置きの文字列）を指定するための属性です。フォームの入力欄に「氏名」「メールアドレス」など、どのような内容を入力すべきかを示すことで、ユーザーの理解を助け、入力ミスを減らす効果があります。placeholder属性の基本構文placeholder属性は以下のように記述します。<タグ名 placeholder=表示したいテキスト></タグ名>placeholder属性に指定したテキストは、入力欄が空の状態でのみ表示され

  2. HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説

    HTMLのテキストフォーマット（書式設定）とは、HTML文書内でテキストの見た目や意味を整えるために特別に用意された要素のことです。これらのタグを使いこなすことで、太字・斜体・ハイライトなど、さまざまなテキスト表現が可能になり、文章の可読性や伝わりやすさが大きく向上します。 基本構文 テキストフォーマット用タグの基本的な書き方は以下のとおりです。 <tagname>content</tagname> 主なテキストフォーマットタグ一覧 HTMLで使われる代表的なテキストフォーマットタグは、以下の10種類です。 番号タグと説明 1<b>テキストを太字に