スタート!CSS入門

長さとその単位

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSの値で長さを指定するときの、単位とその書き方、またパーセント値について紹介します。
講師:
04:49

字幕

このレッスンでは CSS の値で長さを指定するときの単位とその書き方またパーセント値について紹介します。長さの単位は相対的長さと絶対的長さの二種類の長さがあります。相対的長さは別の長さのプロパティに対して相対的な長さを指定します。それに対して絶対的長さは一定の長さを指定します。まずは相対的長さの単位について紹介します。相対的ながさには em とエックスハイトの二つの単位があります。まず、 em はその要素の font-sizeプロパティの値を1とする単位です。font-size プロパティとはfont の大きさを指定するプロパティです。例えば、 font-size プロパティが24 ピクセルだった場合1 em は 24 ピクセルとなり2 em は 48 ピクセル0.5 em は 12 ピクセルとなります。直感的に理解できるためよく使われる単位です。エックスハイトはその要素のアルファベットの小文字のex の高さを1とする単位です。また絶対的長さには6つの単位があります。そのうち5つは物理的な単位です。これらは主に印刷用として使われる単位でありCSS ではあまり使われません。インチ、センチメートルミリメートルポイント、パイカの五つです。 そして絶対的長さの残りの一つの単位はピクセル単位です。ピクセルはレイアウトなどによく使われる一般的な単位です。これらの単位に加えて、実際に長さを指定するときの注意点を紹介します。まず長さの書式は数値の直後に記述します。例えば 12 ピクセルを書く場合はまず数値である 12 を書いた後に直後に単位であるピクセルを記述します。次に注意点として値がゼロのとき単位は省略できるという点があります。0 ピクセルという書き方も可能ですが単に 0 と書いても問題ありません。次に値が 1 未満の時0 は省略できるというルールがあります。例えば小数点を使って 0.5emという指定をしたいときに頭の 0 は省略して単に .5m という風に記述することができます。また一部のプロパティに限り負の値が使えます。負の値とは 0 未満のマイナスの値です。これはマイナスの方向にマージンを取って要素をレイアウトするネガティブマージンと呼ばれる手法などで使われます。なお、負の値を許可しないプロパティに負の値を設定するとその宣言は無視されます。次にパーセント値について紹介します。パーセント値の書式は長さの単位と同じように数値の直後にパーセントと記述します。 例えば 75 %と書きたい場合は数値の 75 を書いた直後に記号で%を入力します。%は半角の英数です次にパーセント値は他の値に対する相対的な値であるということを覚えておいてください。またプロパティによって参照する値が違うというのも注意点です。参照する値は同じ要素の別のプロパティの値であったり祖先要素のプロパティであったりとプロパティによって参照する値が異なります。最後に長さと同様に一部のプロパティでは負の値が使えます。このレッスンでは CSS の値で長さを指定するときの単位とその書き方、またパーセント値についても学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

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

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

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

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