CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのword-spacingプロパティで単語間隔を調整する方法

CSSのword-spacingプロパティは、要素内の単語と単語の間隔(スペース)を指定するために使用します。英文テキストの可読性を高めたり、デザインに余白感を持たせたい場合に活用できる便利なプロパティです。

構文

word-spacingプロパティの基本的な構文は以下のとおりです。

Selector {
    word-spacing: /*value*/
}

指定できる主な値

  • normal: ブラウザの標準的な単語間隔を適用します(初期値)。
  • 長さ(px、em、remなど): 数値で単語間隔を指定します。負の値を指定すると間隔が狭まります。

使用例1

次の例では、入れ子になったdiv要素に対してword-spacingプロパティを適用し、単語間隔を30pxに設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex;
    float: left;
    padding: 10px;
    background-color: salmon;
}
div > div {
    word-spacing: 30px;
    width: 340px;
    height: 140px;
    border-radius: 5%;
    box-shadow: inset 0 0 15px blueviolet;
}
</style>
</head>
<body>
<div>
<div>
Magento is an open source E-commerce software, created by Varien Inc., which is useful for 
online business. It has a flexible modular architecture and is scalable with many control 
options that is helpful for users.</div>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSSのword-spacingプロパティで単語間隔を調整する方法

使用例2

続いて、q要素(引用)に対してword-spacingプロパティを6emで適用した例です。フォントサイズに連動して間隔が広がるため、emなどの相対単位を使うとレスポンシブなデザインに向いています。

<!DOCTYPE html>
<html>
<head>
<style>
q {
    display: flex;
    padding: 10px;
    word-spacing: 6em;
    background-color: orange;
    font-size: 1.2em;
}
</style>
</head>
<body>
<h2>What is Java?</h2>
According to Java's official documentation,
<hr>
<q cite="https://www.java.com/en/download/faq/whatis_java.xml">Java is a programming language and computing platform first released by Sun Microsystems in 1995.</q>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

CSSのword-spacingプロパティで単語間隔を調整する方法

まとめ

word-spacingプロパティを使えば、CSSだけで単語間隔を簡単に調整できます。pxなどの絶対単位でも、emなどの相対単位でも指定可能です。ただし、日本語のようなマルチバイト文字では単語の区切りが明確でないため、主に英字テキスト向けのプロパティである点に注意しましょう。文字同士の間隔を調整したい場合はletter-spacingプロパティを併用すると効果的です。

  1. CSSのword-spacingプロパティを使って単語間の間隔を管理する方法

    CSSのword-spacingプロパティを使用すると、テキスト内の単語と単語の間にある空白（ホワイトスペース）の量を自由に設定できます。デフォルトの状態から広げたり、値に「normal」を指定して標準の間隔に戻したりすることも可能です。指定できる主な値は以下の通りです。normal：標準の単語間隔（初期値）長さの単位：px、em、rem、cmなどで間隔を明示的に指定（負の値も指定可能）それでは、実際のコード例を見ていきましょう。例1：div要素にword-spacingを適用する<!DOCTYPE html> <html> <head> <style

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ