コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
相対単位について
このレッスンでは、 値が相対的に決まる 相対単位についてご説明します。 長さとか大きさなど、 相対的な基準で決まるわけですね。 フォントサイズに用いられる 単位がありますので、それをご紹介します。 その中から2つ、「em」と「rem」と、 これを使ってみたいと思います。 「em」は現行サイズを「1」とする 比率になります。 デフォルトでは「16px」、 「rem」はデフォルトサイズを 「1」とします。 つまり「16」が「1」なわけですね。 ただし注意は、この「rem」の方は 古いバージョンの Internet Explorer では使えません。 この p要素に対して、 em をまずは設定したいと思うんですが、 比較して分かりやすいように、 p 要素もう1個加えましょう。 p で、フォントサイズ16px ということで、 16ピクセルをこの要素に設定します。 ここでは、インラインスタイルを 使ってしまいましょう。 style で、font-size が 16px と。 ですから、これは 16 ですね。 ということで安心して、 p要素に対して、font-size で 2em、 2倍にしてみましょう。 ファイルを保存します。 2倍の大きさになりました。 もう「h1」の要素と変わりないですね。 では、フォントサイズ p は 1em に戻しましょう。ということは、 元に戻るということですね。 ただ現行サイズを 1 とすると いうことですね。 現行サイズというのは親から受け継ぎます。 ということなので、 ここで body の方に font-size ですね。 これを、じゃあ 20px にしましょう、 というふうにします。 こちらはインラインスタイルですから、 あくまで 16px が維持されます。 確認します。 「フォントサイズ16px」より大きいですね。 というのは、body の方で サイズを上げましたので、 h1 も h3 も、 それから li もですね、 全体的に大きくなっています。 ではここで、 em でなくて rem のほうにします。 そうすると親から受け継ぐと いう部分はなくなります。 あくまでデフォルトを基準として デフォルトを 1 とします。 確認しましょう。 ということで「p」以外は やはり大きいままなんですけれども、 「p要素」については、…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。