【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
最終更新日：2018年07月07日 （初回投稿日：2018年07月07日）
hyphensプロパティは、単語の途中で折り返す時に「ハイフン」をいれるかどうかを指定できます。
手動でソフトハイフン記号「­」を入れて、そこでハイフンを入れて折り返したり、ブラウザにおまかせで ハイフンを入れて折り返すこともできます。
ほとんどのブラウザが実装していますが、IE11, Edge はベンダープレフィックス「-ms-」が必要。Safari（iOS Safariも）は「-webkit-」が必要です。
Chrome は Android と Macプラットフォームでのみで実装だそうです。（2018年7月記）
参考：Can I Use | hyphens
参考：
・CSS Text Module Level 3 | W3C Working Draft
・hyphens - CSS | MDN
hyphensプロパティの値
hyphensプロパティの値は すべてキーワードです。
| hyphensプロパティの値 | |
|---|---|
| キーワード | manual がデフォルト値。 none、auto |
| グローバル値 | hyphens: inherit; 親の値を継承（コレ書かなくても継承するけど） hyphens: initial; 継承した親の値を解消しデフォルト値に戻す hyphens: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作 |
| 値の継承 | あり | 適用できる要素 | すべての要素 |
|---|
それぞれのキーワードは、以下の意味があります。
- none
- 単語内でソフトハイフンがあっても折り返さず、ハイフンも付けません（単語を分割しない）。
行はホワイトスペースの位置でのみ折り返します。
（「ソフトハイフン」についてはすぐ下で解説しています） - manual
- 単語内にソフトハイフンがある位置のみ、ハイフンを入れて改行します。
言わば 手動（マニュアル = manual）でハイフンを付けるんですが、そこで自然改行されなければハイフンは表示されません。
（「ソフトハイフン」についてはすぐ下で解説しています） - auto
- ブラウザのデフォルトのハイフネーションに従います。（ソフトハイフン不要）
ブラウザはハイフンを入れる時、その言語のルールを使うので HTMLの「lang属性」で、ハイフネーションのルールがある言語を指定しておく必要があります。
ハードハイフン記号・ソフトハイフン記号
ハイフン記号には ハードハイフン（‐）と ソフトハイフン（­）があります。
ハードハイフン記号（‐）は可視（入れたところに必ずハイフンが表示）。
そこで自然改行できるなら、ハイフンの直後で改行されます。
そこで自然改行されなくても、ハイフンは入ったままです。
ソフトハイフン記号（­）は不可視で、自然改行できる位置にあれば、hyphens: manual で表示され、その直後で改行されます。
その位置で折り返しがされなければ、ハイフンは表示されません。
autoでは「lang属性」での言語の指定が必要です
hyphens: auto を使う場合は、ブラウザがハイフンを入れる時、その言語のルールに従うので、必ずその要素に「lang属性」で ハイフネーションのルールがある言語を指定する必要があります。
特に日本語サイトの場合は、最初に <html lang="ja"> と html要素に日本語を指定しているのが普通ですが、これだと hyphens: auto は反応しません。
テキストが外国語で、ハイフンを入れたければ、その要素に lang属性（lang="en" とか）を改めて指定すればOK。
例えば、<p lang="en">などと指定して、その <p>要素に hyphens: auto を指定すれば使えます。
hyphensプロパティの指定サンプル
hyphensプロパティの値をぜんぶ使ってみます。
ますは、ソフトハイフン記号無しのサンプルです。
hyphens: auto では「lang属性」でハイフンを使う言語の指定が必要。サンプルの3番目は「lang="en"」あり、4番目は無し（このサイトの <html lang="ja"> のまま）にしています。
3番目の「lang属性ありの hyphens: auto」だけ ハイフンがついていますね。
サンプルのソースコードはこちら。hyphensプロパティは HTMLに直接指定しています。
<div style="-ms-hyphens:none; -webkit-hyphens:none; hyphens:none">
<b>hyphens: none</b>
This property controls whether hyphenation is allowed to
create more soft wrap opportunities within a line of text.
</div>
<div style=""-ms-hyphens:manual; -webkit-hyphens:manual; hyphens:manual">
<b>hyphens: manual</b>
This property controls whether hyphenation is allowed to
create more soft wrap opportunities within a line of text.
</div>
<div lang="en" style="-ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto"> <!--lang属性を指定-->
<b>hyphens: auto (lang)</b>
This property controls whether hyphenation is allowed to
create more soft wrap opportunities within a line of text.
</div>
<div style="-ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto"> <!--lang属性を指定していません-->
<b>hyphens: auto (No lang)</b>
This property controls whether hyphenation is allowed to
create more soft wrap opportunities within a line of text.
</div>
ソフトハイフン記号によって manual でハイフン入りで改行されます
hyphens: manualを使うときは、テキスト入力時に、手動でソフトハイフン記号「­」を入れます。
サンプルでは、あえて lang属性を使っていません。ソフトハイフン記号を使ったら Lang属性がなくても機能します。
（ただし、hyphensプロパティは lang属性と一緒に使うことが推奨されているそうです）
比較のため hyphens: none にもソフトハイフン記号を入れてみました。noneでは不可視のままですね。
サンプルのソースコードはこちら。
<div style="-ms-hyphens:none; -webkit-hyphens:none; hyphens:none">
<b>hyphens: none</b>
This prop­erty con­trols whether hy­phenation is allowed to
create more soft wrap opportuni­ties within a line of text.
</div>
<div style="-ms-hyphens:manual; -webkit-hyphens:manual; hyphens:manual">
<b>hyphens: manual</b>
This prop­erty con­trols whether hy­phenation is allowed to
create more soft wrap opportuni­ties within a line of text.
</div>
hyphensプロパティの使いどころ
日本語では、折り返しにハイフンを付けないので無関係。
CJK以外の言語では、overflow-wrap（word-wrap）:break-word は、単語を折り返してはくれますが、ハイフンは付けてくれないので、便利さで言えば hyphensプロパティ 一択になりそう。
auto を使えば、ブラウザが勝手にハイフンを付けて折り返してくれるので便利。
厳密にやりたければソフトハイフン記号さえ付けておけばOK。
hyphensプロパティを指定しなくても、ブラウザがハイフンを付けて折り返します。（hyphensプロパティのデフォルト値が「manual」だから）
ただ、hyphensプロパティは、いわゆる CSS3 からの新し目のプロパティなので、どのブラウザでも使えるという訳にはいかないのが現状。（2018年7月記）
早くベンダープレフィックス無しで全部のブラウザに実装されるといいですね。
次回予告
さて次回は、white-spaceプロパティを使おう。
これは、「半角スペース」や「タブスペース」などの 空白（ホワイトスペース）を、どう表示するかを指定します。
- 関連記事
-
- 【43】テキストを大文字・小文字に変換する text-transform
- 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
- 【41】句読点などが行頭に来るかどうか決める line-break
- 【40】文字間の間隔を指定する letter-spacingプロパティ
- 【39】単語間の間隔を指定する word-spacingプロパティ
- 【38】インデント（字下げ）を指定する text-indentプロパティ
- 【37】空白を詰めるかどうか決める white-spaceプロパティ
- 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
- 【35】改行の禁則処理を解除するか決める word-breakプロパティ
- 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
- 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
- 【32】インラインの縦方向の整列を決める vertical-alignプロパティ
- 【31】OpenType機能を直接指定できる font-feature-settings
- 【30-7】ショートハンドプロパティになった font-variant
- 【30-6】漢字や仮名のための font-variant-east-asian
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
