vanillaice (Akira)

vanillaice (Akira)

第一・第二に続いて第三弾。
え?シリーズ???

今回はズバリ 文字列 です。

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

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

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

第一弾はえっとねー、table(表)などの width指定 のことでした。今回は absolute という配置についてです。レスポンシブデザインで要素がはみ出す原因はwidth指定...

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

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

こんにちは!これから昨日行われた運動会についてお伝えします。
=============================
第一種目: 玉入れ
第二種目: 学年対抗リレー

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

答え
記号の連打

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

こんにちは!これから昨日行われた運動会についてお伝えします。
=============================
第一種目: 玉入れ
第二種目: 学年対抗リレー

またはこういうのも ↓

Supercalifragilisticexpialidocious

Super_califragilistic_expiali_docious

でもこれはOKなんです ↓

こんにちは!これから昨日行われた運動会についてお伝えします。
------------------------------------------------------
第一種目: 玉入れ
第二種目: 学年対抗リレー

Super-califragilistic-expiali-docious

これも ↓

Super califragilistic expiali docious

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

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

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

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

Super califragilistic expiali docious

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

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

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

Super califragilistic expiali docious

「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

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

Super_califragilistic_expiali_docious

ハイフンではなく アンダースコア が入っています。
これは「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 (範囲に全文が収まりそうにない場合 = 指定位置で改行)

Supercalifragilisticexpialidocious

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

Supercalifragilisticexpialidocious

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

関連記事

Comments 2

There are no comments yet.
あっちゃん  
勉強になります!

こんばんは、akiraさん。
ちょっとパソコンからごぶさたしてたら、写真が変わってる~♪
ぽってり唇が色っぽくていいですねって、あたしは女ですが。(苦笑
セクハラになりませんよね?( ̄ー ̄)ゞポリポリ
50も近くなると、メンズよりもキレイな女性のほうに目がいくことが増えました。
ん?男性化してるのか?自分?(笑
見習いたいなーって!

2017/06/12 (Mon) 20:11 | EDIT | REPLY |   
Akira  
To あっちゃんさん

こんばんは (●'0'●)/

いやもう、セクハラしてくださいってなもんですよ。
この歳になると対象外(笑)
私はよく「男性脳」とか「女の皮を被ったおっさん」とか言われます。
どゆこと? (´・ω・`)

2017/06/12 (Mon) 22:34 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い