スタート!CSS入門

文字間隔および単語間隔

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
文字間隔を指定するにはletter-spacingプロパティ、、単語間隔を指定するにはword-spacingプロパティを使います。ここでは、両プロパティの使い方について紹介します。
講師:
04:20

字幕

このレッスンでは text の文字間隔を指定するletter-spacingプロパティと単語間隔を指定するword-spacing プロパティの使い方について紹介します。まず letter-spacingプロパティについて紹介します。letter-spacing プロパティに使える値は normal と長さです normal キーワードは現在の font での通常の間隔を指定します。長さは数字とその単位で指定します。マイナスの値も指定できますがウェブブラウザによっては動作しない場合があります。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここでは h2 要素2番目の見出しの要素に対して文字間隔を広げるよう CSS を書いてみます。h2 に対してletter-spacing プロパティtext の文字間隔を設定するプロパティを使って文字間隔を広げるように設定します。ここでは 0.5em 分つまり1文字の半分のおおきさ1文字の半分大きさだけ文字間隔を広げるように設定しました。ウェブブラウザを見ると h2 要素の部分が文字間隔を広げてることがわかります。 続いて単語間隔の指定について紹介します。単語間隔を指定するのはword-spacingプロパティを使います。単語間隔とは英語のなどの単語と単語の間に間隔を持つ言語においてその間隔を指定するものです。したがって日本語のように単語間隔自体を持たない言語では指定しても反映されませんので注意してください。word-spacing プロパティに使える値は normal キーワードは長さで letter-spacingプロパティと同様です。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。もう一度編集画面とウェブブラウザを開きます。HTML を見ると一番下に著作権表記があることがわかります。この部分はすべて英語表示になってますのでこの部分に対してword-spacing プロパティを適用してみましょう。ソースコードいえば一番下の部分footer 要素の中にp 要素この部分についてword-spacing プロパティを適用します。それでは CSS を変えていきます。footer 要素に対してword-spacingプロパティこちらを使って単語間隔を同じように 0.5em1文字の半分の sizeこの文だけ単語間隔を広げるように設定します。 ウェブブラウザを見ると先ほどの部分の単語間隔を0.5em 分ずつ広がってることを確認できます。このレッスンでは text の文字間隔を指定するletter-spacing プロパティと単語間隔をしていするword-spacing プロパティについて学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。