レスポンシブで要素をはみ出させない工夫 第三弾【原因 文字列】

レスポンシブデザインで要素がはみ出す原因はwidth指定

せっかくレスポンシブデザインを選んでも 要素がはみ出しては台無しです。 これは見た目や使い勝手の問題も大きいですが、Googleｾﾝｾがはみ出し大嫌いです。その理由だって結局のところ「ユーザビリティ」の問題ですけども。 レスポンシブテンプレートを選んだのだから、モバイルフレンドリーだね ♪ と思ったら大間違いです。テンプレート製作者の手の届かない領域「記事内容」までしっかり管理しましょう。...

vanillaice000.blog.fc2.com

レスポンシブで要素をはみ出させない工夫 第二弾【原因 絶対配置】

第一弾はtable(表)などの width指定 のことでした。今回は absolute という配置についてです。...

vanillaice000.blog.fc2.com

フツーにテキストを書いているだけではみ出すことがある

どういう場合に起こるかと言うと、例えばこんな ↓

上記の背景が付いたブロックの中にある文字列、はみ出す可能性の高いものが含まれています。
なんだと思いますか？

答え
記号の連打

ボックスを小さくしてみます。

①

またはこういうのも ↓

②

③

でもこれはOKなんです ↓

④

⑤

これも ↓

⑥

で、これがなんでかって話しなんですけども。
①と④の運動会云々文書の違いは 仕切り線として利用している記号が「イコール」か「ハイフン」か 。
はみ出す②③とはみ出さない⑤⑥の違いは 間に記号があるか あるならばそれは何の記号か の違い。

自動折り返しと単語の区切りの関係

日本語の文章というのはこうですよね ↓
模倣は最大のへつらいである。
英語だとこう ↓
Imitation is the sincerest form of flattery.
英語というのは 単語間に半角スペースを入れるのが正しい書き方 です。
半角スペースの「前」と「後」は 別の単語 である、というのが見た目にもわかるようになってます。
ところが日本語は単語間にスペースを設けるという文書構造にはなっていません。
その代わり 句読点 が一定の意味の集まりを示します。
でもそれは「単語」区別ではありません。

webの標準語は英語、というのはもう何度も書いているのですが。
テキストの自動折り返しというのは、半角スペースを一つの目安としています。
それが
word-wrap (最新CSSでは overflow-wrap)
というCSSプロパティです。
その値に break-word を指定すると、
範囲を超過する時は、単語の区切りを折り返しの機会とみなす ことになります。
それがサンプルでいう⑥番ですね。

上段の末尾 i の後ろにはまだもう一つ二つアルファベットが入る余裕はありますが、「expiali」と「docious」は半角スペースを挟んで別の単語です。
なので「docious」の前にある半角スペースが改行(自動折り返し)の機会となり、dociousは下へ繰り越します。

英単語というのは単語の途中で折り返してしまうととても見辛いものです。
日本語でも行の最初が句読点だと見辛いですよね。
それを避けるのが word-wrap: break-word; です。

単語途中で折り返しても構わない。とにかく範囲超過だけを避けたい、という場合には別の方法があります。
word-break
というCSSプロパティです。
その値に break-all を指定すると
単語の区切りを折り返し機会とはみなさず、範囲いっぱいまで文字が届いたら折り返す ことになります。 サンプルは載せませんでしたのでこちらです ↓

「docious」の「d」だけが上段に、残りは下段へ折り返しています。
欧文で好ましいのはこちらの
word-break: break-all; ではなく 先に記した
word-wrap: break-word; の方。
単語は一つのまとまりとしてくれた方が読みやすいからです。

間に半角スペースの無い英単語の並びは word-break: break-all; を指定しない限りはみ出します。
何故なら「単語の連なり」ではなく「全部が一つの単語」という認識になるからです。
記号の連続も同じです。
半角スペースが自動折り返しの一つの鍵となっている 点は重要です。
前述の理由から word-wrap: break-word; がhtml文書のbodyに指定してある場合がほとんどですが、記号の連続や半角スペースなしの長い英単語、あるいは 任意改行不可の長いリンクアドレス などがはみ出すのは
「半角スペースが無いから区切りがどこかﾜｶﾗﾅｲﾖｰ… byブラウザ」で、はみ出す、と。

ハイフンとアンダースコアは明確な違いがある

全然違います。意味が全く異なります。

ハイフン (-)
単語の 区切り を表します。

アンダースコア (_)
単語の 連結 を表します。

サンプルの①と④をもう一度。

①

④

①の仕切り線は半角イコールです。④は ハイフン。
ハイフンは 区切り なので、前の項に書いたように、半角スペースと同じく 単語と単語の区切り も意味することができます。
つまり区切りの連続。どのポイントでも折り返すことができるんです。
だから④ははみ出ない。

I love you.
とあった場合、分解すると「I」「love」「you」と3単語の連なりです。
I-love-you.
とあった場合も同じく「I」「love」「you」の3単語があり、その間に区切りを意味するハイフンで繋いでいる、ということです。
⑤がはみ出していない理由もこれです。

⑤

じゃあ今度は③を見てみます。

③

ハイフンではなく アンダースコア が入っています。
これは「Super」「califragilistic」「expiali」「docious」の4単語とはみなしません。
4単語が 連結 をして新たに一つの単語を形成している という解釈になります。
全文字列で一単語なんですね (´・ω・｀)

まとめ

半角スペース、ハイフンは単語の区切り
アンダースコア、半角スペースなし、ハイフンなしは一単語

これが理解できていればある程度は事前にコントロールできるはず。
例えば仕切り線的に利用している記号がハイフン以外だとマズいからハイフンにしよう、だとか。
半角スペースの無い長い文字列(リンクアドレス含む)やアンダースコア付きの文字列がどうしても必要な場合は word-break: break-all; を局部的に指定するとか。

「単語」の体感をしたい方は、ブラウザ上で以下の特定文字列をダブルクリックしてみてください。
love のところでしてみましょうか。

I-love-you

カチカチっとクリックすると、選択されるのは love の部位だけかと思います。

I_love_you

こちらは全文字列が選択状態になるはずです。文字列上でのダブルクリックは「単語選択」です。

おまけ html5新要素wbr

<wbr>というのはhtml5で新たに採用されたhtmlタグで、
word break opportunities 改行機会 を意味します。
空要素ですので終了タグはありません。
改行を意味する <br> の仲間。

長い長い文字列があり、もしかしたら「意図しないところで改行されてしまうかもしれない」という危険が有る場合、状況に応じて「ここで改行入れても良いよ」と予め指定することができます。
「状況」というのは例えば デバイス違いによる画面幅変更、レスポンシブデザインのサイズ可変性質への対処 など。
なるべく範囲ギリギリいっぱいまで頑張って欲しいけれども、どうにも収まりそうにない場合には「ココ！」で折り返してくださいね、という指定。

例)

Supercalifragilistic<wbr>expialidocious

結果1 (範囲に全文が収まりそうにない場合 = 指定位置で改行)

結果2 (範囲に全文が収まる場合 = 改行なし)

ここぞ、という時には利用しても良いかもしれません。
ただこれ、日本語には効果ないです。