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

ページ名：HTMLでテキストを中央揃えにする方法

このWikiHowでは、カスケーディングスタイルシート（CSS）を使ってHTMLウェブサイトのテキストを中央揃えにする方法を説明します。HTMLの中央揃えは、以前は<center>タグを使用していましたが、現在ではこのタグは時代遅れとみなされ、ほとんどのブラウザで機能しなくなりました。

方法1

CSSを使う

  1. CSSスタイルを含むファイルを開きます。<center>タグは廃止されましたが、新しい要素を作成し、ページのどの部分にも追加することで、その境界線内でテキストを中央揃えにすることができます。CSSのための独立したファイルを持っていない場合、HTMLファイルの一番上の"<style>"と"</style>"タグの間にスタイルがあります。
    • <style>タグと</style>タグがまだない場合は、次のようにファイルの一番上の<body>の下に直接追加してください：
      • <!DOCTYPE html> <html> <body> <style> </style> のように。
  2. テキストを中央に配置するクラスを作成する。<div>タグはHTML文書にテキストの指定された部分を参照するように指示するので、そのタグ用のクラスを作成します。style "タグの間のスペースに次のように入力し、1行目の後に必ず↵Enterキーを2回押してください：
      div.a { }
  3. text-alignプロパティを追加します。div.aセクションの2つの中括弧の間のスペースにtext-align: center;と入力します。ヘッダーはこのようになります：
      <!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style>
  4. 中央揃えにすべきテキストに適切なdivタグを追加します。中央揃えにしたいテキストの上に<div >タグを置き、中央揃えにしたいテキストの下に</div>タグで閉じることで行います。たとえば、ヘッダーとその段落のテキストを中央揃えにするには、次のように入力します：
      <div > <h1>私のウェブサイトへようこそ</h1> <p>このウェブサイトは、主に物事に関する情報を提供することを目的としています。
  5. div.aタグを使用して、他の領域を中央に配置します。他の要素（たとえば、<p></p>や<h2></h2>のようなタグの間にあるコンテンツ）を中央に配置するには、項目の前に<div >、項目の後に</div>と入力します。すでに "div.a "がセンタリング・コマンドとして指定されているので、これで以前と同じようにテキストがセンタリングされます：
      <style> div.a { text-align: center; } </style> <div > <h2>寄付歓迎</h2> <p>お願い</p> </div>
  6. 文書を見直す内容はさまざまですが、あなたの文書は次のようになるはずです：
      <!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style> <div > <h1>私のウェブサイトへようこそ</h1> <p>このウェブサイトは、主に物事に関する情報を提供することを目的としています。</p> </div> <div > <h2>寄付歓迎</h2> <p>お願い</p> </div> </body> </html>
方法2

HTMLでセンタータグを使う

  1. HTMLドキュメントを開いてください。この方法では、現在は廃止されているHTMLの<center>タグを使用する方法を説明します。2018年12月現在、このタグは一部のウェブブラウザではまだ使えるかもしれませんが、長期的にこのタグに頼ることはお勧めできません。
  2. センタリングしたいテキストを見つける。中央揃えにしたいヘッダーや段落、その他のテキストを見つけるまで下にスクロールする。
  3. テキストの両側に "center "タグを追加する。centerタグは<center>text</center>という形式で、"text "はあなたのテキストです。テキストにタグがある場合（例えば、段落テキストなら"<p></p>"など）、"center "タグは既存のタグの外側に置くことができます：
      <center><h1>Welcome to My Website</h1></center> <center>Make yourself at home!
  4. HTMLドキュメントを確認してください。あなたの文書は次のようになるはずです：
      <!DOCTYPE html> <html> <body> <h1><center>私のウェブサイトへようこそ</center></h1> <center>くつろいでください</center> <p1>このウェブサイトの目的は、物事に関する情報を表示することです。
この記事は、CC BY-NC-SAで公開されている「 How to Center Text in HTML 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧