省略記号(...)について考えてみる #CSS

文字数制限がある場所で使用される省略記号(…)について少し語ってみたいと思います。

省略記号(…)の読み方

ellipsis(イリプシス)と読みます。(知ってました？😊

web上(CSS)での実装方法

要素がブロック指定であることを確認(spanタグとかの場合は追加でdisplay指定が必要)
要素の幅を決める ←結構大事
折り返さないプロパティを追加 ←結構大事
hidden系のプロパティを指定
text-overflowプロパティを指定

以上で実装は完了です🥳
これでうまくいかない人は、1, 2が抜けていることが多かったりします。
(最近だとflex系が柔軟に上手くやってくれたりするので、flexが原因だったという例によく遭遇します)

実装例

ellipsis.html

<p class="text">5文字まで見えるよ</p>

ellipsis.css

.text {
  /*要素の幅を決める*/
  width: 5em;

  /*折り返さないプロパティ*/
  white-space: nowrap;

  /* hidden系のプロパティ*/
  overflow-x: hidden;

  /*text-overflowプロパティ*/
  text-overflow: ellipsis;
}

結果 (4文字まででした😝)

省略記号に対して思うこと

これは以前案件で一緒になったHTML/CSSレジェンドのお言葉なんですが、

【コンテンツを隠すこと自体間違っている😤】

とのことです。
スマホが浸透してきて、装飾の見た目よりも読みやすさが重視される時代がきたからか、
今ではコンテンツファーストとも提唱されていますね。

少し前までは、横並びのCSS実装でfloat解除のために

overflow: hidden

を親要素に入れていたりしたのも、今となってはNGですね😏
(横並びの最適解についてはまた後日書けたらなぁ、と思ってます)

CSSの観点から見たときにも、実は省略記号を用いることによって
一気にレイアウトの柔軟性を失ってしまうのです😣
(flexが使えないし、幅を固定値で入れなくてはならないから)

その中でも、私が個人的に省略記号を使用しても良いかな、と思うのは以下です

ブログなどの要約文(read more ? とかつく系のやつ) →summary(要約文)だということが明示的に示されているから、ユーザーが混乱することはないので
大半のユーザーに既に認知されているような、メニューボタンの記号 →アフォーダンス理論というやつですね

よって、タイトル等大事な場所が隠されたり、ユーザーの予測とは離れたところで勝手に省略されるのは、ユーザビリティ的にNGかなぁ、と思っています。
(詳細画面があったとしても)

そうは言っても

文字を省略せざるを得ない場所というのも存在します。
今まで遭遇した例の中では、テーブル(表)で使用されている場面がありました。
テーブルのレイアウトは結構難しくて、見やすいテーブルを組むためには気をつけなければならない点が結構あります。

長い文字列を入れたときに、崩れないようにするにはどうしたら良いか(柔軟性を考慮すればもちろん成り行き幅で行くべきだが、それだと長文を入れると崩れやすくなる)
100%のwidthをどのカラムにどれだけの割合割り当てれば見やすいか
文字を折り返すにしてもたくさん折り返すとその分縦幅が広がってきてしまうし…
全セルで長い文字列入る時とかもはやカオス

そう言ったことを考慮したときに、テーブルは詳細画面がないから本当は使うべきじゃないけど、省略を使わざるを得ないパターンが生まれてきます。
(本来であれば、テーブルで組むことによって長文が…と言った点で見辛くなるのであれば、省略記号を使わず、レイアウトから見直したり、見せ方を変えたりするべきではありますよ😉)

HTMLのtitle属性という一つの提案

さて、省略記号を使わざるを得ない場面に遭遇したとき、少しでもユーザビリティをあげたい…！(と私は思います😋)

もし、ステップ数を増やさず全文が読めたら少し便利だとは思いませんか？

そこで、HTMLにはtitle属性なるものがあります。(titleタグではないですよ！)
title属性は、俗にツールチップと言われるものなのです。
MDNによると、本来は省略文字に対しての補助的役割としての利用を想定されています。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/title

設定をしておくと、PCであればマウスオーバー時にtitle属性の中身を表示させてくれます。
(表示されるまで数秒かかるのでまだ若干ユーザビリティ的には怪しいですが…)

ellipsis.html

<p class="text" title="5文字まで見えるよ">5文字まで見えるよ</p>

結果

こうすると、PCではすこ〜〜〜〜しだけユーザビリティをあげることができます。
(スマホの場合はレイアウトの段階から見直すことをオススメしているので、今回はPC限定の対応です)

とはいえ、
【省略記号があればマウスオーバーすれば全文表示される】
そんなアフォーダンスはないとは思うので、ここマウスオーバーすれば全文見れるよ！ということをユーザーに伝える必要も出てきます。

ありがたいことに、CSSには属性セレクタというものが存在します。

属性セレクタの中にはもちろんtitle属性も指定できるので、title属性がついているものを目立たせるということもできてしまうのです。

ellipsis.css


.text {
  white-space: nowrap;
  width: 5em;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-top: .5em;
}

.text[title] {
  position: relative;
  border-bottom: 3px solid deeppink;
}

.text[title]:before {
  content: "↓hover here↓";
  position: absolute;
  top: -.2em;
  color: deeppink;
  font-size: .5em;
  font-weight: bold;
}

結果
(※擬似要素は親に準ずるので親の幅を越えると文字が消えます)

まぁ、↑は極端な例ですが、こう言った感じで少し可能性を感じているので
今回(長めに)語ってしまいました😃

もし他にこうしたらいいんじゃない？
っていう意見があればぜひ💓教えてください！