2020.11.30

テキストのコピペで安心！と思ったら、htmlで文字がうまく表示されない時の対処法♪

Web制作

見落としがちな文字とは？

こんにちは。yamahanaです。

コーディング作成時に、wordやExcelなどのテキストをhtmlにコピペするっていう作り方、多いですよね。

でもコピペしただけだと、思うように表示されてない！って時があると思います。
今回は、そんなコピペしただけではhtmlでうまく表示されない文字の対処法です。

よく見落としがちなのが以下の文字。

➀ 特殊文字の入力方法

&や¥などはhtml上で文字化けしてしまいます。

コード

<p>&amp;</p>

表示結果
&,¥

こちらは特殊記号で対応

➀ 上付き文字の入力方法

コード

<p>5m<sup>2</sup></p>

表示結果
5m²

supタグで囲むことで上付きになりました

➂ 下付き文字の入力方法

コード

<p>CO<sub>2</sub></p>

表示結果
CO₂

subタグで囲むことで下付きになりました

表示結果によっては上記だとベースラインの下に来る場合があり、デザインに合わせてベースラインを併せたいってこともあるかもしれません。その場合はフォントサイズを小さくするだけで以下のようになります。

2の数字だけspanタグで囲み、フォントサイズを小さくしました。

コード

<p>CO<span>2</span></p>

表示結果
CO2

2の数字だけspanタグで囲みフォントサイズを小さくしました。

➃ 二倍ダーシの入力方法

文章中にダッシュを2つ続けるこれ── 二倍ダーシ、倍角ダッシュなどと呼ばれるそうです。
見た目ではうまくいっていても、ブラウザによっては隙間が出来てつながらないことも。
cssで調整した方が無難みたいです。

最初にletter-spacingでダッシュの隙間を埋めるだけでいいのではと思ってやったのがこれ。

コード

<span class="dash">ーー</span>

.dash{　　　　　    　　
           font-size: 100%;
           letter-spacing: -0.2em;
           padding-right: 0.2em;
           margin-left: 0.2em;
           margin-right: 0.2em;
          }

letter-spacingで隙間を埋めた分を、paddingで補い、marginで余白の調整をしています。
しかし、これだとフォントの種類やブラウザによっては隙間が空いてしまい対応できない場合が！

そこで上司に教えてもらい、追加したのがこれ。

.dash{　　　　　    　　
           font-size: 100%;
           letter-spacing: -0.2em;
           padding-right: 0.2em;
           text-indent: -10000px;
           overflow: hidden;
           width: 1.5em;
           display: inline-block;
           position: relative;
           vertical-align: middle;
           margin-left: 0.2em;　
           margin-right: 0.2em;　
          }

  .dash:after {
           content: " ";
           display: block;
           width: 100%;
           position: absolute;
           left: 0;
           top: 50%;
           -webkit-transform: translate(0, -50%);
           transform: translate(0, -50%);
           border-top: 1px solid #000;
           margin-top: -1px;
          }

表示結果