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


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

文字やリンクを目立てさせようと思って「中央表示」したい時ってありますよね。
WordPress や ブログサービスであれば、エディタツールの「中央寄せ」ボタンを押せば終わりですが、表やリストを中央寄せしたい時ってどうでしょうか?
今回は、基本的な中央寄せからすこし応用した中央寄せや左寄せ、右寄せなどをご紹介。

目次
  1. HTMLを使ってテキストを左・右・中央寄せする簡単な方法
  2. 基本の中央寄せ
  3. 左寄せ・右寄せ
  4. text-align:centerが効かない場合
  5. リストの中央表示
  6. 表の中央表示
  7. 文字の折り返しをしたい場合
  8. floatの応用事例
  9. 画像の上に文字を重ねる場合のテキストスタイル
  10. ★注意★ <align>や<center>について
  11. まとめ

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

基本の中央寄せ

image

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

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

image

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

text-align:center

で中央寄せできます。

左寄せ・右寄せ

image

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

<< 左寄せ >>

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

<< 右寄せ >>

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

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

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

image

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

image

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


リストの中央表示

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

image

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

<style>
ul {
    width: 50%;
    margin: auto;
}
</style>
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

表の中央表示

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

<style>
    div{
        text-align:center;
    }
    table{
        margin-left:auto;
        margin-right:auto;
    }
</style>
<div>
    <table border="1">
        <tr><td>表1</td><td>表2</td></tr>
        <tr><td>表3</td><td>表4</td></tr>
    </table>
</div>

image


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

image

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>表1</td>
         <td>表2</td>
      </tr>
      <tr>
         <td>表3</td>
         <td>表4</td>
      </tr>
   </table>
   <figcaption>Floating Right</figcaption>
</figure>
マンツーマン・オンライン・レッスンでお馴染のCodeCampのJava研修。300社以上に導入され20,000人以上の実績を持ちます。
CodeCampの場合、対話性のあるオンライン・レッスンを提供しており、企業研修で陥りがちな“ただ受講しただけ”、“講義内容が身についていない”という研修企画側としては避けたい現象を回避することができます。

image

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

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

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

floatの応用事例

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

image

画像引用:Start Bootstrap

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

image

画像引用:CodePen/Fun nav bar blog style

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

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

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

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

image

<< サンプルコード >>

<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 の親子関係に設定して、画像フィールドをベースに、文字を重ね、中央表示していますね。

関係 対象 CSS
画像 .container{position: relative;}
文字 .center{position: absolute;・・・

よくオシャレな 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サイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

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

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

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

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


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp