HTMLを使ってテキストを左・右・中央寄せする簡単な方法

HTMLを使ってテキストを左・右・中央寄せする簡単な方法

基本の中央寄せ

テキストの中央寄せは、HTMLタグの属性として style="text-align:center" を足してあげると実行できます。

<h2>中央寄せ指定なし</h2>
<h2 style="text-align:center">中央寄せ</h2>

<h2>タグ以外にも <p> や <div>、それから <table> や <tr> など、およそ HTMLタグの半分ぐらいはこの

text-align:center

で中央寄せできます。

左寄せ・右寄せ

特にポジションを指定していなければ「左寄せ」になりますが、スタイルシートの加減で左寄せ指定が必要な場合も。基本的なコードは中央寄せと一緒で、場所の指定に center ではなく「left」や「right」を使いますね。

<< 左寄せ >>

<h2 style="text-align:left">左寄せ</h2>

<< 右寄せ >>

<h2 style="text-align:right">右寄せ</h2>

となりますね。結果は上図のとおりです。

text-align:centerが効かない場合

<h2> や <p> などのテキスト系は、HTMLタグの属性として style を追加すればよかったのですが、 <img> や <button>、 <a> は同じやり方では中央寄せできません。簡単な解決方法としては、 <img> や <a> を

<p style="text-align:center"><img src="●●"></p>

など中央寄せが効いているタグの中に入れてしまえば、中央寄せできます。<a> や <button> もこの方法で中央表示可能。

<< サンプルコード >>

<p style="text-align:center"><img src="/home/oshimamasara/ダウンロード/cat200.jpeg"></p>
<p style="text-align:center"><a href="/home/oshimamasara/ダウンロード/cat200.jpeg">リンクタグ</a></p>
<p style="text-align:center"><button>ボタンタグ</button>

中央表示以外の「左寄せ」「右寄せ」は、style="text-align:center" の center の部分を left や right に変えると実行できるでしょう。

リストの中央表示

<ul> や <ol> などのリストを style="text-align:center" を使って中央寄せしようと思うと、以下のように。

これは <ul> や <ol>、<li> が固定表示設定されているため。以下のような CSS を与えると、中央寄せすることができます。

<style>
ul {
    width: 50%;
    margin: auto;
}
</style>
<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

表の中央表示

WordPress やブログツールで表を作っても、中央表示するのって難しいですよね。こちらも先ほどのリストのようにマージン要素を与えてあげると、表が中央に表示されます。

<style>
    div{
        text-align:center;
    }
    table{
        margin-left:auto;
        margin-right:auto;
    }
</style>
<div>
    <table border="1">
        <tr><td>表１</td><td>表２</td></tr>
        <tr><td>表３</td><td>表４</td></tr>
    </table>
</div>

文字の折り返しをしたい場合

Word や Power Point などの文書作成ソフトでは、挿入した画像の設定で「文字の折り返し」を選択すると、同じ段落中に画像と文章を一緒に表示できたりしますよね。この表現方法、 Webでもできます。キーワードは、

style="float: right;"

<< 文字の折り返しのサンプルコード >>

マンツーマン・オンライン・レッスンでお馴染のCodeCampのJava研修。300社以上に導入され20,000人以上の実績を持ちます。
<figure style="float: left; margin-right: 16px;">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/unsplash-daisy.jpg">
   <figcaption>Floating Left</figcaption>
</figure>
マンツーマン・オンライン・レッスンでお馴染のCodeCampのJava研修。300社以上に導入され20,000人以上の実績を持ちます。
CodeCampの場合、対話性のあるオンライン・レッスンを提供しており、企業研修で陥りがちな“ただ受講しただけ”、“講義内容が身についていない”という研修企画側としては避けたい現象を回避することができます。
また毎日24時までレッスンを受講することができますので、現状の業務に支障をきたすことなく同時進行でプログラミング研修を進めることができる特徴があります。
Javaの研修内容については、初心者でも分かりやすく挫折しないような工夫がされており、基本からeclipseという開発キットを使ったアプリ開発までJava周りを一通り学習することができます。
<figure style="float: right; margin-left: 16px;">
   <table border="5">
      <tr>
         <td>表１</td>
         <td>表２</td>
      </tr>
      <tr>
         <td>表３</td>
         <td>表４</td>
      </tr>
   </table>
   <figcaption>Floating Right</figcaption>
</figure>
マンツーマン・オンライン・レッスンでお馴染のCodeCampのJava研修。300社以上に導入され20,000人以上の実績を持ちます。
CodeCampの場合、対話性のあるオンライン・レッスンを提供しており、企業研修で陥りがちな“ただ受講しただけ”、“講義内容が身についていない”という研修企画側としては避けたい現象を回避することができます。

サンプルコードではあまり見かけない <figure>タグを使っていますが、 <div> でも動作します。

<figure> ／ 図や写真などの自己完結型コンテンツを収めるためのタグ

見た目はオシャレですが、モバイル対応しようと思うとちょっと一手間かかりそうです。

floatの応用事例

文字の折り返しで登場してきた <float>。<float> を応用すると以下のようなオシャレなデザインも可能に。

画像引用：Start Bootstrap

またナビバーに float を応用しているケースも。

画像引用：CodePen／Fun nav bar blog style

HTMLをはじめたばかりの方には、<float> イメージしにくいかもしれませんが、今後 Webスタイル（CSS）のポジションを理解する上では欠かせない機能です。とりあえずコードを写経もしくはコピー＆ペーストして、 <float> を実感してみましょう。

画像の上に文字を重ねる場合のテキストスタイル

少しイレギュラーなケースかもしれませんが、画像の上に文字を重ねて表示したい時ってありませんか？そんな時の中央表示方法をご紹介。

<< サンプルコードの実行結果 >>

<< サンプルコード >>

<style>
    .container {
        position: relative;
    }    
    .center {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
        font-size: 18px;
    }
    img { 
        width: 100%;
        height: auto;
        opacity: 0.3;
    }
</style>

<div class="container">
    <img src="https://images.pexels.com/photos/457881/pexels-photo-457881.jpeg" >
    <h2 class="center">海いきてー</h2>
</div>

ポイントは、画像と文字を CSS の親子関係に設定して、画像フィールドをベースに、文字を重ね、中央表示していますね。

よくオシャレな Webサイトのコードをみていると「position: relative」とか「position: absolute」というちょっとイメージしにくい CSSコードが登場してくると思います。これは CSS のポジションに関するコードで、このあたりが分かるようになると飛躍的に Webの表現力が高まるでしょう。興味ある方は CSS の基礎、勉強しちゃいませんか？

★注意★ ＜align＞や＜center＞について

Googleで「HTML 中央寄せ」と検索するとトップ表示 10件中 5件は <align> や <center> といった HTML5 では非推奨のタグを紹介。Webのスタンダードを策定する W3C.org でも中央寄せなどのポジショニングは、

text-align:center

を使えと。間違っても <align> や <center> などを使わないように注意しましょう。

まとめ

すでにブログや Web制作を始めている方なら「なんでこの部分は中央寄せできないのだろう・・・」と諦めた経験ありませんか？実はその問題、<div style="text-align:center"> で囲めばいいだけだったとすると、ちょっとショックですよね。また今 HTML や Webデザインを学習中の方、CSSを理解してけば <table> や <ol> の中央寄せも何とかなりそうですよね。

HTML や CSS、 Webデザインを独学で学習している方は、うっかり <align> タグや <center>タグ使っていませんよね？

• 「ちょっと独学では不安になってきた」
• 「やっぱり体系的に学習したほうがいいのかな？」

一度 「CodeCamp」に相談してみませんか？独学の学習コストと時間ロスを計算すると、プログラミングスクールの方が安かったりするかもしれませんよ。