Webデザインにおける日本語の改行

2021-01-04

皆さん、こんにちは!

LikePayのCTO、セルゲイです。今日は話題の日本語の改行の問題と、その解決策についてお話したいと思います。

以下の画像に表示されている問題はあったことがありますか?

それは一番悪い状態でもないです。たまに一文字だけ改行されることがあります。それは最悪です。

我々は2つの解決策を考えてきました。両方はそれぞれの長所と弱点があります。順番でお話したいと思います。

解決策その1:ラッピング

最初の解決策は、途中で改行されて欲しくない単語をspanのタグでラッピングすることでした。その場合は、このようなソースコードを書きました。

HTMLコード:

<body>

  <h1>LikePayは</h1>

  <p class="my-awesome-text">

    <span>「SNS×お店」をセットで楽しむ新アプリ。</span>

    <span>お店についてSNSに投稿するだけで、</span>

    <span>お金のように使える</span>

    <span>割引ポイントがもらえる!</span>

  </p>

</body>

そのコードの効果は?今のところは、0です!効果がでるために、spanのタグに特別なスタイルを設定する必要があります。

CSS コード:

<style>

  .word-break > span {

    display: inline-block;

  }

</style>

それによって、何ができたのでしょうか?このスタイルが適用された時点から、span のタグは、同時にblockとinlineの要素のように表示されます。スペースが足りている場合、要素はブロックとして1行に並んでいます。ただ、スペースが足りない場合は、ブロックは全て改行されます。

このようなイメージです。

いいところ は、効果があるということだけです。

悪いところ - слишком 不要のコードが多いですし、ある程度で決まったコードの構成を守る必要があります。そしてspanタグの間にある不要のスペースがある(こちらの対策も本当はあります)。

解決策その2:ソフトな改行

2番目の解決策は、この間新しく考えてきました。まだ実際に我々のサイトやアプリに導入していませんが、この解決策がこの記事を書くきっかけになりました。

この解決策の基礎には、改行しても良さそうなとことでwbrのタグを使用するこちがあります。

もともと、このタグは日本語に適用されていないので、もう一つのスタイルが必要になります。

今回はwebページの基礎の基礎となるbodyのタグに新しいスタイルを適用します。そのおかげで、中にあるすべてのタグに遺伝されます。

HTMLコード:

<body>

  <h1>LikePayは</h1>

  <p>

    「SNS×お店」をセットで楽しむ新アプリ。<wbr/>

    お店についてSNSに投稿するだけで、<wbr/>

    お金のように使える<wbr/>

    割引ポイントがもらえる!

  </p>

</body>

CSSコード:

<style>

  body {

    word-break: keep-all;

  }

</style>

その結果、望んでいた通りに改行されるようになりました::

いいところ は、綺麗でわかりやすいコードが出来上がります。そして、改行も正しいところにしかされなくなります。

悪いところ は一所懸命考えても思いつかなかった. :-)

最後に

この記事は皆さんに役立つと嬉しいです。質問などがあるましたら、気軽に連絡してください。お待ちしています!

この記事を保存

メールアドレスを入力すれば、この記事のURLをメールで送ります。

フォーム送信することでプライバシーポリシーに同意するとみなされます。

ありがとうございます!フォームが送信されました。
送信中にエラーが発生しました

最近の記事

テキストが空でクリックできない時の対処法

テキストが空でクリックできない時の対処法

テキストを入力している際に、文字を全部消してしまい入力方法がわからなくなった経験はありませんか? この問題の解決策はとても簡単です。

ノウハウ
NoteのクローンをWebflowで作れる?

NoteのクローンをWebflowで作れる?

Noteのような、記事を投稿できる会員サイトをWebflowとその関連なノーコードツールを使った実装方法の紹介

ノウハウ
Webflowサイト公開前チェックリスト15選!

Webflowサイト公開前チェックリスト15選!

サイトを公開する前にチャックしないといけない忘れがちな項目の15選!説明付です!

豆知識
動画教材数が100本を達成

動画教材数が100本を達成

LikePay.dev Academyの動画教材数が100本を達成したことをお知らせします。

ニュース