Documentation CSS

この記事で学べること

  • hyphensプロパティの概念と目的
  • none、manual、autoの各値の使い分け
  • 自動ハイフネーションの設定方法
  • 言語設定との関係
  • レスポンシブデザインでの活用

概要

CSSのhyphensプロパティは、テキスト内の単語が行の末尾でどのようにハイフンで区切られるかを制御するためのプロパティです。このプロパティを利用することで、テキストが自動的に適切に分割され、視覚的な美しさや読みやすさを向上させることができます。

hyphensの基本

hyphensプロパティは、特に長い単語が行の末尾で切れる際の表示方法に関わります。主に以下の3つの値があります。

基本構文

.element {
hyphens: auto; /* 自動でハイフネーションを行う */
}

値の詳細

  1. none ハイフネーションを無効にします。単語は行の末尾で切れることなく、次の行に繰り越されます。
  2. manual 手動で指定されたハイフン（通常はHTMLの­を使用）でのみ改行が行われます。自動的なハイフネーションは発生しません。
  3. auto ブラウザが自動的にハイフネーションを行います。この設定では、言語設定に基づいてハイフンが適切な位置で挿入されます。

hyphensの使い方

自動ハイフネーションの例

以下の例では、hyphensを使用して長い単語が自動的にハイフンで分割されるように設定します。

<div class="hyphenated-text">
これはとても長い単語で、適切にハイフンが入ることで読みやすくなります。
</div>
<style>
.hyphenated-text {
width: 200px; /* コンテナの幅を設定 */
hyphens: auto; /* 自動でハイフネーションを行う */
overflow-wrap: break-word; /* 単語を折り返す */
}
</style>

この設定により、長い単語が行の末尾でハイフンで切られ、テキストが整然と表示されます。

手動ハイフネーションの使用例

手動でハイフンを指定する場合の例を見てみましょう。

<div class="manual-hyphenation">
あなたは&nbsp;日&nbsp;本&nbsp;語&nbsp;が&nbsp;話&nbsp;せ&nbsp;ます&nbsp;か？
</div>
<style>
.manual-hyphenation {
width: 200px; /* コンテナの幅を設定 */
hyphens: manual; /* 手動ハイフネーションを指定 */
}
</style>

ここでは、&nbsp;（ノーブレークスペース）を使ってハイフン位置を指定することで、手動で単語を分割しています。

hyphensの注意点

  1. ブラウザのサポート hyphensプロパティは主要なブラウザで広くサポートされていますが、全てのバージョンで動作が一致するわけではありません。事前にテストを行うことが重要です。
  2. 言語設定の影響 hyphens: autoを使用する場合、ブラウザの言語設定に依存するため、正確にハイフネーションが行われるかどうかは設定によります。特に多言語のコンテンツを扱う場合は注意が必要です。
  3. 表示の影響 ハイフネーションの設定により、テキストの表示が大きく変わるため、デザイン全体を考慮して設定することが重要です。特にビジュアルコンテンツが関与する場合、整った外観を保つために調整が必要です。

まとめ

hyphensプロパティは、テキストのハイフネーションを柔軟に制御するための重要なツールです。これにより、長い単語が適切に表示され、読みやすさが向上します。さまざまなシーンでhyphensを活用し、整然としたデザインを実現していきましょう。

ポイントの振り返り

値説明使用例
noneハイフネーション無効完全に防止
manual手動指定のみ&shy;使用
auto自動ハイフネーションブラウザ判断

関連プロパティ

プロパティ説明
hyphenate-characterハイフン文字の指定
hyphenate-limit-chars最小文字数の制御
word-break単語の改行制御
overflow-wrapオーバーフロー時の改行

参考文献

円