インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

顔文字が改行で崩れる!崩れないようにCSSで文字列をグループ化だ!

  2015/10/01   あとで読む

約 3 分で読めます

昔からメールなどでお馴染みの顔文字。テキスト(文字)だけで感情が表現できる、今でも非常にポピュラーな表現手段の1つ。

html_css

喜怒哀楽が手軽に表現できる、日本オリジナル感が漂うものが沢山あり、文字入力から手軽に入力できて、相手にも必ず同じように表示されるのがなんといっても一番の魅力。

ブログを書いたり、ホームページを作ったりする人も今でも愛用してますが、簡単に使える反面、画像と異なり、改行での文字崩れなどの問題もあったりします。

ここでは文字列を1つのグループにして、改行でも崩れないようにするちょっとしたひと工夫を見てみましょう。

よく使う顔文字たち

顔文字といえば様々なものがありますが、私が使うのはその中でもオーソドックスな以下のもの。

  • 喜び (^-^)
  • 驚き (゜o゜)
  • 哀しい ;.;)
  • 楽しい ヽ(^。^)ノ

まぁ、基本形。その他にも結構使うぞ、というものは、

  • 焦り ^-^;)
  • それは私 σ^-^;)
  • いやー ^◇^)ゞ

とかですね。

さて、そんな手軽な顔文字ですが、文字が崩れるという問題とは...

問題点の文字崩れ

例えば、以下のように使ったとしましょう。

  • コンサートがあるんだ。( ^ 0 ^ )/

普通にパソコンのブラウザとかで見ている分には問題ありませんが、表示の幅(ブラウザのウインドウサイズなど)が変えられたり、スマフォなどの横幅の小さな画面で見ると、表示できる文字数によっては崩れてしまう場合があるんですね。

例えば、...

  • 今度、コンサートがあるんだ。( ^
    0 ^ )/

とか

  • 今度、コンサートがあるんだ。( ^ 0
    ^ )/

といったかんじです。

インターネットで色々とブログを見ている人は、あーそういえばこういうの見たことあるある、っていう人多いかもしれません。

実際に書いてる人は、こうなるとは思ってないんですが、見る人の環境によってはこうなってしまうんですね。

回避策は単純。CSS

これの問題を割けるには、CSSを使います。

以前はパソコンの画面で見て、崩れないかどうか確認しながら書いていたこともありますが、よくよく考えてみれば話は単純。CSSを使って顔文字を「ひと塊の文字」として使えばいいんですね。

CSSとは、表示されるスタイル(文字色や背景色を指定したり、太文字にしたり、枠をつけたりなど)を指定するもの。これを使って以下のように記述します。

  • 1. 顔文字をタグ <span>…</span>で囲む 
    <span>( ^ 0 ^ )/</span>
  • 2. タグにつけるスタイルを決める(これがCSS)
    style=”display:inline-block;”
  • 3. タグにスタイルを挿入
    <span style=”display:inline-block;”>( ^ 0 ^ )/</span>

分かりづらいかもしれませんが、要するに3のように記述します。

こうすることで、顔文字「( ^ 0 ^ )/」が1つの塊として扱われ、決して途中で改行されることがなくなります。

結果はどうなる?

さて、こうすることで、表示がどうなるかというと...

横幅が十分ある場合

横幅が十分ある場合は、何も変わりません。

  • 今度、コンサートがあるんだ。( ^ 0 ^ )/

横幅が短く、折り返してしまう場合

  • 今度、コンサートがあるんだ。
    ( ^ 0 ^ )/

と、顔文字は崩れずに改行されました。これならどんな幅で表示されても顔文字は途中から崩れる心配はありません。^◇^)ゞ

長いのが嫌いな人

記述が長くなるのが嫌!記述が面倒!、という人で、class の使い方を知っている人はこちらを使いましょう。

  • 1.クラスの名前を決める
    ここでは分かりやすく、例えば kaomoji とします。
  • 2.クラスを外部ファイルなどに定義する
    span.kaomoji {
    display: inline-block;
    }
  • 3.タグにクラスを記述する
    <span class=”kaomoji”>( ^ 0 ^ )/</span>

URLやサイト名称への応用

サイト名やサイトのURLなどで、「折り返されたくない」という場合もありますが、同様に使えます。

例えば、

  • このサイトのURLは tabibitojin.com です。

前後の文章や、表示する画面の幅によっては、

  • このサイトのURLは tabibit
    ojin.com です。

などと表示されますが、これはちょっと避けたいなという場合、折り返されたくない文字列に対して顔文字と同じように

  • <span style=”display:inline-block;”>tabibitojin.com</span>

と指定すれば良いわけです。
こうすることで、先ほどの結果はどうなるかというと、

  • このサイトのURLは
    tabibitojin.com です。

「tabibitojin.com」は1つの塊と扱われるため、まるごと下に移動しました。やったね。^-^)v

まとめ

  • 顔文字が折り返しなどで崩れる場合にはCSSを使えば良い
  • 顔文字をタグ <span>…</span>で囲む
  • タグにスタイルを挿入 style=”display:inline-block;”
  • classを使っても良い
  • URLやサイト名など、折り返しさせないで一塊の文字列として扱いたいものも、同じようにCSSを使えば良い

これでどんな画面サイズで閲覧されてもバッチリですね。

今後を考える

この記事を読んでいるあなたは、きっとホームページを作っていたり、ブログで実際に記事を書いてたりしてますね?

今後はそれらに加えて、ホームページやブログから収益をあげて活動の輪を更に広げてみることにもチャレンジしてみましょう!きっと凄く嬉しい結果につながると思いますよ。

私の場合も、自慢じゃないですが初めは中々結果がでませんでしたが、ある順番にそって1つずつステップをクリアすることで順調に成果を残せるようになりました。

これからは、良いコンテンツを作る!収益もそれに見合ってあげていく!更によいコンテンツを作る!ということでネットビジネス界を駆け抜けて行きましょう!

私はネットビジネスで初心者からでも収益があげられるよう、無料メールマガジンで情報配信しています。詳しくは以下をご覧ください。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です