ほんっとにはじめてのHTML5とCSS3：【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-4】font-stretch で condensed などの文字幅を選択しよう

最終更新日：2018年03月31日　（初回投稿日：2018年03月20日）

フォントファミリーには、 condensed、expanded などの文字幅が違うフォントフェイスが用意されているものもあります。それらを選択するには font-stretchプロパティを使います。

これは日本語・中国語などのフォントではなく、欧文フォント用のプロパティです。

本日のINDEX

font-stretchプロパティの値
1. フォントファミリーにあるフォントフェイスを使う

フォント関連のプロパティは、fontショートハンドプロパティでまとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう
【26-2】font-sizeプロパティでフォントのサイズを指定しよう
【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
【26-4】font-stretch で condensed などの文字幅を選択しよう　←今日はココ
【26-5】font-styleプロパティでフォントを斜体に指定しよう
【26-6】line-heightプロパティで行間（行の高さ）を指定しよう
【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

font-stretchプロパティの値

font-stretchプロパティの値には、9種類のキーワードが用意されています。

font-stretchプロパティの値
キーワード	normalがデフォルト値 semi-condensed, condensed, extra-condensed, ultra-condensed semi-expanded, expanded, extra-expanded, ultra-expanded
グローバル値	font-stretch: inherit; 親のfont-stretchの値を継承（コレ書かなくても継承するけど） font-stretch: initial; 継承した親の font-stretchの値を解消しデフォルト値に戻す font-stretch: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

フォントファミリーにあるフォントフェイスを使う

font-stretchプロパティは、使っているフォントファミリーの中に、文字幅が狭い、または広いフォントフェイスがあれば、それを使って表示します。
font-stretch で指定した値のフォントが無ければ、無反応。ノーマルタイプの文字幅で表示するだけです。

各OSに搭載されたフォントファミリーは、ウェイトならいくつか用意されていますが、condensed や expanded などの文字幅を用意しているもの少ないようです。
（有料フォントなら豊富なものも。英文サイトでフォントを凝りたいなら購入してもイイかも）

Helvetica Neue を使って、9種類の値全部を試してみました。
「Condensed」があるようです（Boldだけどw）

font-stretch: ultra-condensed font-stretch: extra-condensed font-stretch: condensed font-stretch: semi-condensed font-stretch: normal font-stretch: semi-expanded font-stretch: expanded font-stretch: extra-expanded font-stretch: ultra-expanded

上のサンプルのソースです。

<div class="mihon">
  <span style="font-stretch: ultra-condensed">font-stretch: ultra-condensed</span>
  <span style="font-stretch: extra-condensed">font-stretch: extra-condensed</span>
  <span style="font-stretch: condensed">font-stretch: condensed</span>
  <span style="font-stretch: semi-condensed">font-stretch: semi-condensed</span>
  <span style="font-stretch: normal">font-stretch: normal</span>
  <span style="font-stretch: semi-expanded">font-stretch: semi-expanded</span>
  <span style="font-stretch: expanded">font-stretch: expanded</span>
  <span style="font-stretch: extra-expanded">font-stretch: extra-expanded</span>
  <span style="font-stretch: ultra-expanded">font-stretch: ultra-expanded</span>
</div>
<style>
.mihon {
	font-family:'Helvetica Neue',Helvetica,sans-serif;
	font-size:2rem;
	line-height:1.2;
	color:black;
	margin:0;
	border:solid 1px #ccc;
	padding:0 .7em}
.mihon span {
	display:block;
	margin:.5em 0}
</style>

font-stretch で指定した値がフォントファミリーに無い場合は、ノーマルより狭いフォントフェイスは狭い方の4段階に、ノーマルより広いフォントフェイスは広い方の4段階に当てはめられるんだそうです。
下の図は、ファミリーに「condensed, normal, expanded」の3種類があった場合の表示例です。

次回予告

次回は、font-styleプロパティを使おう。
これはフォントの正体か斜体かのスタイルを決めるプロパティです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。