CSS3の基本 - レベルアップCSS

ルート要素を基準としたフォントサイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3では、フォントサイズなど、長さの指定にremという新しい単位が使えます。これは、ルート要素を基準とした長さを指定するものです。ここでは、remの概念と使い方について紹介します。
講師:
03:45

字幕

CSS3 ではフォントサイズなど長さの指定にrem という新しい単位が使えます。rem は root 要素を基準とした長さを指定するものです。ここでは rem の概念と使い方について紹介します。CSS でフォントサイズを指定しているときこのような困った経験はないでしょうか。HTML で ul 要素 li 要素などを使ったリストをマークアップしたときにli 要素の中に ul 要素を入れてリストを入れ子にした場合このような場合に li 要素に指定しているフォントサイズがパーセンテージだった場合入れ子になっていることによって120% の値が継承され2つ目以降のフォントサイズが想定よりも大きくなってしまうという現象です。例えばこのような状態は li 要素の子孫のli 要素。こちらについてはフォントサイズを 100% つまり継承せず 100% として扱うという風にすれば全ての入れ子のリスト項目で同じフォントサイズにすることもできますがCSS としてはかなり冗長になってしまいます。こんなとき新しい単位 rem を使うと便利です。一旦今書いた指定を削除します。試しに rem を使ってスタイルを定義してみましょう。 120% のフォントサイズの指定を一旦コメントアウトしその下の行に rem を使ってフォントサイズを指定します。font-size プロパティに 1.2rem を指定します。rem という単位には root という意味と元々あった em という単位の2つの意味を併せ持つという意味があります。例えばここで指定した 1.2rem は 1.2em と読み換えることもできます。しかし同じようにリスト項目に対してスタイルを指定していますがウェブブラウザによるレンダリングではリスト項目は入れ子になっていても同じフォントサイズで表示されています。これは rem が em と違って常に root 要素を基準とした長さであるということから来ています。rem はどのような構造で使われていたとしても常に root 要素を基準に計算してくれるのです。root 要素とは HTML でいうとhtml 要素のことです。ここでは html 要素に対してベースとなるフォントサイズをピクセルで指定してみましょう。フォントサイズプロパティに 18px を指定します。ベースとなるフォントサイズが大きくなりましたので全体が大きくなりましたがli リスト項目のフォントサイズについては入れ子になっていてもやはり同じフォントサイズのままです。 このように rem はどのような複雑な構造にあっても常に root 要素を基準としてサイズを算出できるという点が非常に便利です。このレッスンでは CSS3 で新しく加わったroot 要素を基準とした長さを指定するrem という単位についてその概念と使い方について紹介しました。

CSS3の基本 - レベルアップCSS

CSS3はこれまでのCSSとの互換性を保ちつつ、より豊かな表現力を備えたCSSの新しいバージョンです。このコースでは、CSS3の膨大な仕様の中から比較的幅広い環境で動作する機能を中心に解説していきます。また異なるWebブラウザによる表示のされ方の違いに対しても、プログレッシブ・エンハンスメントに代表されるようないくつかのアプローチを取り上げ、紹介します。

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

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

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

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