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

文字サイズの定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「em」「%」「px」、そしてCSS3で新たに追加された「rem」の単位を使った文字サイズの定義の方法について、解説致します。
講師:
05:16

字幕

このレッスンでは em % (パーセント) px (ピクセル) そして― CSS3 で新たに追加された rem の単位を使った文字サイズの― 定義の方法について解説致します まずはダウンロードしてきた こちらの font-size ― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして こちらの画面がそれらの ファイルを開いた状態です そして こちらの画面はその index.html をブラウザで― 開いた状態とっています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html の ファイルからみていきます このファイルの中では これらの p タグに対して― それぞれ px (ピクセル) や % (パーセント) em や ― rem の単位で文字サイズを 指定した状態となっています そして こちらの style.css ファイルを見てみます こちらのファイルでは 実際にそれぞれの p タグに対してフォントサイズを― 指定しているような形ですね それでは これらの単位の 使い分けについてみていきたいと思います まずはこちらの px から― こちらの px という単位は 絶対指定の単位となります ですので 他の要素の影響を全く受けずに この px で指定した文字サイズ― そのままに表示が反映されてきます それがこちらの部分となりますね これが今 ちょうど 30 px となります では 次に % (パーセント) の方を 見てみます パーセントはこちらの部分ですね この パーセントはこの親要素 今回は div タグですが― その div タグからの値からの 相対値となります 今回 この p.percent の 親要素である div タグには― font-size: 40px; が 設定されているので― ここに設定されている 100% というのは その親要素の文字サイズの 100% ― つまりは 40 ピクセルに 相当するものとなります このパーセント指定の部分が こちらのこの部分となりますね こちらが 40 ピクセル相当の 文字サイズとなっています 次に em という単位を見てみます em はこちらの部分ですね em も相対指定の単位となります こちらも親要素 今回でいうと div タグですね その div タグに設定された文字サイズ 40 ピクセルからの相対値となっています 1 em で 100% 相当となります ですので 今回も同様に 40 ピクセルとなるわけです その em で設定されている部分が こちらの部分となります 見て頂いて分かるとおりに こちらのパーセント― 100% で指定されている文字サイズと こちらの 1em で設定されている― 文字サイズは同じものとなります 最後に CSS3 で新しく追加された rem という単位を見ていきます rem はこちらの部分で使用しています こちらの rem という単位も 相対指定となりますが― em と違うところは親要素 今回で言うと div タグが― 基準になるわけではなくて こちらの html タグに設定された― フォントサイズが基準となります 今回 こちらに 1rem と設定しています こちらの 1rem はこちらの html タグに設定されたフォントサイズ― 30 ピクセルの100% という意味になります よって こちらの 1rem は 今回は 30 ピクセルという形になります ブラウザで見てみますと こちらの部分になりますね こちらのフォントサイズと そして 始めに設定した― こちらの 30 ピクセルのフォントサイズは 見て頂いて分かるとおり― 同じサイズとなっていますね このように各単位にはそれぞれ 特徴がありますので― うまくウェブサイト上で使い分けを していくと良いでしょう 以上でレッスンは終了です 今回は em % (パーセント) px (ピクセル) そして― CSS3 で新たに追加された rem の単位を使った― 文字サイズの定義の 方法について解説致しました 以降のレッスンでは letter-spacing ― font-kerning という CSS のプロパーティーを使って― 文字間のサイズを調整する 方法について解説していきますので― そちらも合わせてご覧下さい

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

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

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

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

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

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