HTMLでテキストを中央寄せする方法

共同執筆者 wikiHow編集チーム

このwikiHowでは、HTMLで書かれたウェブサイトでCSS(カスケーディングスタイルシート)を使ってテキストを中央寄せする方法を紹介します。HTMLで中央寄せをするのに、以前は<center>タグが使用されていましたが、現在はこのタグは使われておらず、たいていのブラウザでは機能しません。[1]

2の方法1:
CSSを使う

  1. 1
    CSS(スタイルシート)の記述が含まれているファイルを開きましょう。現在、<center>タグは廃れていますが、代わりの新しい要素を作成してページ内の任意のテキストを囲むことで、その部分を中央寄せすることが可能です。独立したCSSファイルを作っていない場合、HTMLファイルの上部にある<style>と</style>タグの間にスタイルが記述されています。[2]
    • <style></style>タグがまだなければ、ファイルの上部にある<body>タグのすぐ下に、次のように追加しましょう。
    • <!DOCTYPE html>
      <html>
      <body>
      <style>
      
      </style>
      
  2. 2
    テキストを中央寄せするクラスを作成しましょう。<div>タグは、HTML文書に特定の部分のテキストを参照するように命令するため、そのタグに対するクラスを作成しましょう。「style」タグの間に次のように入力し、1行目を書いた後に Enterを2度押すようにしましょう。
      div.a {
      
      }
      
  3. 3
    text-alignプロパティを追加しましょう。div.aの後にある2つの波括弧の間に、text-align: center;と入力します。ヘッダー部分は次のようになります。
      <!DOCTYPE html>
      <html>
      <body>
      <style>
      div.a {
      	text-align: center;
      }
      </style>
      
  4. 4
    中央寄せするテキストをdivタグで囲みしょう。中央寄せするテキストの上に<div class="a">タグを、下に</div>を挿入します。例えば、ヘッダーとその後の段落のテキストを中央寄せするには次のように入力します。
      <div class="a">
      
      <h1>Welcome to My Website</h1>
      <p>This website is primarily for the purpose of providing information about things.</p>
      
      </div>
      
  5. 5
    div.aタグを使って他の部分を中央寄せしましょう。他の要素(例えば<p></p><h2></h2>などのタグに囲まれた部分)を中央寄せするには、その要素の前に<div class="a">を、後ろに</div>を入力します。すでに「div.a」を中央寄せコマンドとして指定しているため、タグを入力することで先ほどと同様にテキストを中央に寄せられます。
      <style>
      div.a {
      	text-align: center;
      }
      </style>
      
      
      <div class="a">
      
      <h2>Donations Welcome</h2>
      <p>please</p>
      
      </div>
      
  6. 6
    文書を見直しましょう。内容は異なるかもしれませんが、おおむね次のような文書となっているはずです。 [3]
      <!DOCTYPE html>
      <html>
      <body>
      <style>
      div.a {
      	text-align: center;
      }
      </style>
      
      <div class="a">
      <h1>Welcome to My Website</h1>
      <p>This website is primarily for the purpose of providing information about things.</p>
      </div>
      
      <div class="a">
      <h2>Donations Welcome</h2>
      <p>please</p>
      </div>
      
      </body>
      </html>
      
    広告

2の方法2:
HTMLでcenterタグを使う

  1. 1
    HTML文書を開きましょう。この方法では、HTMLの<center>タグの使い方を紹介しますが、現在はもう使われていません。2018年12月時点で、このタグはまだいくつかのブラウザで機能していましたが、長い目で見るとこのタグは使い続けないほうがよいでしょう。
  2. 2
    中央寄せしたいテキストを探しましょう。中央寄せしたいヘッダー、段落、その他のテキストが見えるまでスクロールダウンします。
  3. 3
    テキストの両側に「center」タグを追加しましょう。センタータグは<center>text</center>という形をとり、「text」の部分には任意のテキストが入ります。テキストにタグが付いている場合(例えば、段落に<p></p>など)、「center」タグはそのタグの外側に付けることができます。
      <center><h1>Welcome to My Website</h1></center>
      <center>Make yourself at home!</center>
      
  4. 4
    HTML文書を見直しましょう。このような文書になっているはずです。[4]
      <!DOCTYPE html>
      <html>
      <body>
      
      <h1><center>Welcome to My Website</center></h1>
      <center>Make yourself at home!</center>
      <p1>The purpose of this website is to display information about things.</p1>
      
      </body>
      </html>
      
    広告

このwikiHow記事について

共著:
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
カテゴリ: インターネット

この記事は役に立ちましたか?

はい
いいえ
広告