WebデザイナーのためのCSS3実践講座

文字間の定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「letter_spacing」「font_kerning」というCSSプロパティを使って、文字間のサイズを調整する方法について、解説致します。
講師:
04:37

字幕

このレッスンでは レタースペーシングと フォントカーニング― という CSS プロパーティーを使って 文字間のサイズを調節する方法について― 解説いたします まずはダウンロードしてきたこちらの letter-spacing ― というフォルダーの中に入っているこちらの index.html ファイルと― style.css ファイルを エディターで開いて下さい そして これがそれらのファイルを 開いた状態です そして こちらのブラウザの方には こちらの index.html を― ブラウザで開いた状態を表示しています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう CSS で文字間のサイズを調節するには レタースペーシング若しくは― フォントカーニングという プロパーティーを利用します それでは まず レタースペーシングの方から 見ていきましょう レタースペーシングはこちらの index.html ファイルで見ると― こちらの部分となります まず こちらの上の部分の p タグは 何も設定のしていないデフォルトの状態の物― そして こちらの下の p タグに関しては レタースペーシングで― 文字間を調節しているものとなります この部分をブラウザで見るとちょうど こちらの部分となります それでは こちらの style.css ファイルの方も見てみましょう こちらのファイルですと 該当する箇所が この部分になります このように p.spacing という要素に対して― letter-spacing という プロパーティーを付けています そして その値を 10 ピクセルとしています この内容を反映したのが こちらで言うと この部分となります このように文字と文字の間に 10 ピクセル のスペースが空いているのが分りますね 因みに こちらの letter-spacing ― というプロパーティーには EM という 単位も使うことができます 1EM は一文字分の サイズの横幅を意味します ですので 例えば ここで 1EM と設定すると― こちらの文字間のサイズがこの一文字分の サイズと同じ幅という形になります 例えば 0.5EM と設定すると この 一文字分の横幅の半分のサイズが― この文字間に設定されてくる という感じになります それでは 次に もう一つのプロパーティー フォントカーニング― の方についてみていきましょう まずは index.html の方を 確認します こちらのファイルの中では この部分がそれに該当します まず こちらの上の p タグが デフォルトの状態 そして 下の p タグが フォントカーニングを使って― 文字間を調節したものになります ブラウザで見ると ちょうど こちらの部分となります 上がデフォルトの状態 下が フォントカーニングを付けた状態となります それでは 次にこちらの style.css ファイルをみてみましょう こちらのファイルで該当する箇所は こちらの部分となります このように p.kerning という要素に対して― font-kerning という プロパーティーを付けています そして その値を normal としていますね このようにすることでこの p.kerning の中に含まれている― テキストに対してカーニングを 掛けることができます それがこちらの部分ですね このように見て頂ければ分かるとおり こちらのデフォルトの状態の物より― フォントカーニングを付けた方が こちらの一文の横幅が― 短くなっているのが分かりますね このようにフォントカーニングを 掛けることによって― 文字と文字の間にあるスペースの幅を 統一してくれるといった効果を出してくれます 但し このフォントカーニングという プロパーティーが有効になるのは― 特定のアルファベットの文字の 組み合わせの時だけとなっていますので― 現在のところ 日本語文字には適用されない という点だけ注意しておいてください 以上でレッスンは終了です 今回はレタースペーシングと フォントカーニング― という CSS プロパーティーを使って 文字間のサイズを調節する方法について― 解説致しました 以降のレッスンでは テキストに テキストシャドー― という CSS プロパーティーを使って シンプルな影の効果を付ける方法について― 解説いたしますので そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日

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

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

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