07 OCTOBER

ウェブ

MONDAY 2019 / 10 / 7

テキストの両端揃えの実用的な方法集

Text by Shinji Sato

テキストの両端揃え

会社概要なんかで結構目にする機会が多いですよね。

ただ実は両端揃えを目的としたスタイルが存在しなかったりします。

そのため各々色々工夫して両端揃えを表現しているのですが

その方法は沢山あり

状況や目的によってどれが適しているかは様々。

という訳で今日は数ある両端揃えの中から

実用的なものをいくつかご紹介します。

※例では全て以下のhtmlとcssを適応させています。

●html

<div class="test-box">
  <dl>
    <dt>ああああああ</dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>いいい</dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>Hello world</dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>aa aa aa</dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>FAX</dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>ＦＡＸ</dt>
    <dd>内容あああああ</dd>
  </dl>
</div>

●scss

.test-box{
  width: 500px;
  max-width: 90%;
  background: #000;
  padding: 10px;
  dl{
    display: flex;
    margin: 10px 0;
    font-size: 1rem;
    line-height: 1.5em;
    color: #fff;
    dt{
      flex-shrink: 0;
      margin-right: 10px;
      padding-right: 5px;
      border-right: 1px solid #fff;
      width:90px;
    }
  }
}

① text-align:justify;で両端揃えにする。

cssのみで表現でき、とにかく手軽。

テキストの変化にも強い。

ただ、連続する半角英数字には無力です。

個人的にはおすすめ

●scss追記

.test-box{
  dl{
    dt{
      height:1.5em;//line-heightと同じ値
      text-align:justify;
      text-justify: inter-ideograph;
      &:after{
        content: '';
        display:inline-block;
        width:100%;
      }
    }
  }
}

●サンプル

ああああああ: 内容あああああ

いいい: 内容あああああ

Hello world: 半角英字は単語ごと

aa aa aa: 半角英字は単語ごと

FAX: 単語一つだけは意味なし

ＦＡＸ: 全角はOK

② display: flex;で両端揃えにする。

全ての文字をspanタグなどで囲いflexで対応する方法。ほとんどのブラウザで対応可能。

また、改行に対する対応がとても簡単。

自動化する場合はphpやjavascriptなどとの連携が必須。コードが極端に見づらくなることと自動化してない場合はテキストの修正がちょっと面倒ではありますが、レスポンシブにも強くデザイン的な弱点はほとんどありません。

必ず囲うタグはSEO的に効果のないものに限定しましょう。

●html修正

<div class="test-box type3">
  <dl>
    <dt><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span></dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt><span>い</span><span>い</span><span>い</span></dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </span><span>w</span><span>o</span><span>r</span><span>l</span><span>d</span></dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt><span>a</span><span>a</span><span> </span><span>a</span><span>a</span><span> </span><span>a</span><span>a</span></dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt><span>F</span><span>A</span><span>X</span></dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt><span>Ｆ</span><span>Ａ</span><span>Ｘ</span></dt>
    <dd>内容あああああ</dd>
  </dl>
</div>

●scss追記

.test-box{
  dl{
    dt{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}

●サンプル

ああああああ: 内容あああああ

いいい: 内容あああああ

Hello world: 内容あああああ

aa aa aa: 内容あああああ

FAX: 内容あああああ

ＦＡＸ: 内容あああああ

③ letter-spacingで両端揃えにする。

文字数ごとにクラスを付与し対応する方法。ほとんどのブラウザで対応可能。

上記のflexを使った方法よりいろいろ手間はかかりますがあらかじめcssを用意しておけば、一文字ずつタグで囲う必要がないのが魅力。

また、letter-spacingさえあれば基本なんとかなるので適応するブラウザがかなり豊富です。

ただ文字数ごとに設定を変えなければならないため、自動化する場合はphpやjavascriptなどとの連携が必須。

複数行になる場合は気を付けることがたくさんあります。

また、フォントにも注意が必要です。

●html修正

<div class="test-box">
  <!--
　　使用するパターンによりクラス名を付けていく
　　半角と全角によっても分ける。
  -->
  <dl>
    <dt class="t6">ああああああ</dt>
    <dd>クラスt6</dd>
  </dl>
  <dl>
    <dt class="t3">いいい</dt>
    <dd>クラスt3</dd>
  </dl>
  <dl>
    <dt class="th11">Hello world</dt>
    <dd>クラスth11</dd>
  </dl>
  <dl>
    <dt class="th8">aa aa aa</dt>
    <dd>クラスth8</dd>
  </dl>
  <dl>
    <dt class="th3">FAX</dt>
    <dd>クラスth3</dd>
  </dl>
  <dl>
    <dt class="t3">ＦＡＸ</dt>
    <dd>クラスt3</dd>
  </dl>
</div>

●scss追記

.test-box{
  dl{
    dt{
      white-space: nowrap;
      /*下記数値は状況に合わせて細かく設定してください。*/
      &.t3{
        letter-spacing: 2.45em;
      }
      &.t6{
        letter-spacing: 0.4em;
      }
      &.th3{
        letter-spacing: 2.95em;
      }
      &.th8{
        letter-spacing: 0.53em;
      }
      &.th11{
        letter-spacing: 0.25em;
      }
    }
  }
}

●サンプル

ああああああ: クラスt6

いいい: クラスt3

Hello world: クラスth11

aa aa aa: クラスth8

FAX: クラスth3

ＦＡＸ: クラスt3

④ SVG要素で両端揃えにする。

svgでtextタグにtextLength属性を加え、サイズをviewBoxと同じにすると両端揃えになります。
※サイズはタイトルを入れるタグのサイズに合わせます。

cssすらほぼ必要なく表現可能。扱いが画像と同一になり、通常のテキストと動きが異なるところは念頭に置いておきましょう。

文字数に関係なく収めるため、1行に入れる文字数には注意しましょう。

IEには無力。また、状況によってはsafariにも注意が必要です。

●html修正

<div class="test-box">
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">ああああああ</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">いいい</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">Hello world</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">aa aa aa</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">FAX</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
  <dl>
    <dt>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 15" width="84" height="15">
        <text x="0" y ="14" textLength="84" fill="white">ＦＡＸ</text>
      </svg>
    </dt>
    <dd>内容あああああ</dd>
  </dl>
</div>

●サンプル
https://codepen.io/kunshin/pen/rXBVNE

どれも一長一短ですので使い分けましょう。