CSSのhyphensプロパティでテキストにハイフンを追加する方法
CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。
hyphensプロパティの主な値
- none：ハイフンによる改行を一切行いません。­などの手動指定も無効になります。
- manual：­（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。
- auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されます。
例1：none と manual の違い
次の例では、1つ目のdiv要素に「none」、2つ目のdiv要素に「manual」を指定し、それぞれの動作の違いを確認しています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 20%;
border: 2px groove lime;
margin: 10px;
padding: 10px;
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
}
div:last-of-type {
hyphens: manual;
-webkit-hyphens: manual;
-ms-hyphens: manual;
}
</style>
</head>
<body>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
<div>
abcdefghijklmnopqrstuvwxyz
</div>
</body>
</html>
出力結果
上記のコードを実行すると、以下のような結果が得られます。
例2：auto による自動ハイフネーション
次の例では「auto」を指定し、ブラウザに自動的なハイフン挿入を任せています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 10px;
width: 15%;
border: 2px ridge darkblue;
background-color: peachpuff;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
</style>
</head>
<body>
<div>
abcdefghijklmno-pqrstuvw-xyz
</div>
<div>
abcdefghi-jklmnopqrstuvw-xyz
</div>
</body>
</html>
出力結果
上記のコードを実行すると、以下のような結果が得られます。
補足：ベンダープレフィックスと言語設定
hyphensプロパティはブラウザによって実装状況が異なるため、ChromeやSafariでは「-webkit-hyphens」、旧EdgeやIEでは「-ms-hyphens」を併せて指定しておくと安心です。また、「auto」を正しく機能させるには、html要素などに適切なlang属性を設定することが重要です。
-
CSSのマージン短縮プロパティ（shorthand）の使い方｜基本構文と実例コードを解説
CSSのマージン短縮プロパティとは？CSSのマージン短縮プロパティ（margin shorthand）は、要素の外側の余白（マージン領域）をまとめて定義するためのプロパティです。margin-top、margin-right、margin-bottom、margin-leftを個別に指定する代わりに、1つのmarginプロパティだけで一括設定できます。値は時計回りの順序で適用されます。つまり、「上（margin-top）→ 右（margin-right）→ 下（margin-bottom）→ 左（margin-left）」の順です。構文CSSのmarginプロパティの基本構文は以下のとおりです
-
CSSのborder-styleプロパティの使い方！スタイル一覧とサンプルコード
CSSのborder-styleプロパティは、要素の枠線（ボーダー）の見た目を指定するためのプロパティです。実線・破線・点線など、さまざまなスタイルの枠線を簡単に描画できます。 また、border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）という個別のプロパティを使えば、各辺ごとに異なるスタイルを設定することも可能です。 border-styleで指定できる主な値 none / hidden … 枠線を表示しない solid … 1本の実線 double … 2本の二重線 da