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

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

方法 1

方法 1 の 2:

CSSを使う

PDF形式でダウンロード

1
CSS（スタイルシート）の記述が含まれているファイルを開きましょう。現在、<center>タグは廃れていますが、代わりの新しい要素を作成してページ内の任意のテキストを囲むことで、その部分を中央寄せすることが可能です。独立したCSSファイルを作っていない場合、HTMLファイルの上部にある<style>と</style>タグの間にスタイルが記述されています。^{[2]X出典文献}
- <style>と</style>タグがまだなければ、ファイルの上部にある<body>タグのすぐ下に、次のように追加しましょう。
2
テキストを中央寄せするクラスを作成しましょう。<div>タグは、HTML文書に特定の部分のテキストを参照するように命令するため、そのタグに対するクラスを作成しましょう。「style」タグの間に次のように入力し、1行目を書いた後に↵ Enterを2度押すようにしましょう。
3
text-alignプロパティを追加しましょう。div.aの後にある2つの波括弧の間に、text-align: center;と入力します。ヘッダー部分は次のようになります。
4
中央寄せするテキストをdivタグで囲みしょう。中央寄せするテキストの上に<div class="a">タグを、下に</div>を挿入します。例えば、ヘッダーとその後の段落のテキストを中央寄せするには次のように入力します。
5
div.aタグを使って他の部分を中央寄せしましょう。他の要素（例えば<p></p> や <h2></h2>などのタグに囲まれた部分）を中央寄せするには、その要素の前に<div class="a">を、後ろに</div>を入力します。すでに「div.a」を中央寄せコマンドとして指定しているため、タグを入力することで先ほどと同様にテキストを中央に寄せられます。

内容は異なるかもしれませんが、おおむね次のような文書となっているはずです。^{[3]X出典文献}

<!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 の 2:

HTMLでcenterタグを使う

PDF形式でダウンロード

1
HTML文書を開きましょう。この方法では、HTMLの<center>タグの使い方を紹介しますが、現在はもう使われていません。2018年12月時点で、このタグはまだいくつかのブラウザで機能していましたが、長い目で見るとこのタグは使い続けないほうがよいでしょう。
中央寄せしたいヘッダー、段落、その他のテキストが見えるまでスクロールダウンします。
3
テキストの両側に「center」タグを追加しましょう。センタータグは<center>text</center>という形をとり、「text」の部分には任意のテキストが入ります。テキストにタグが付いている場合（例えば、段落に<p></p>など）、「center」タグはそのタグの外側に付けることができます。

このような文書になっているはずです。^{[4]X出典文献}

<!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>