スタート!CSS入門

インラインボックスの高さ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インラインボックスの高さを指定するには、line-heightプロパティを使います。ここでは、line-heightプロパティの使い方について紹介します。
講師:
03:58

字幕

インラインボックスの高さを指定するにはline-height プロパティを使います。このレッスンでは line-height プロパティの使い方について紹介します。インラインボックスは自動的に折り返しが行われながら包含ボックスに流し込まれるようにレイアウトされます。このインラインボックスは HTML で言うところのリンクを定義する a 要素や強調を定義する em 要素などにあたるインラインレベル要素によって生成されます。ではインラインボックスの高さを指定するline-height プロパティについて紹介しましょう。line-height プロパティに使える値は「 normal 」キーワード「実数」「長さ」「パーセント値」です。「 normal 」は要素のフォントサイズを元に適切な値になるように指定します。ただし具体的な値はウェブブラウザによって異なります。「実数」は指定した値と要素のフォントサイズで掛け算をして高さを算出します。「長さ」は数値とその単位で、「パーセント値」は数値とパーセントで指定します。これらにマイナスの値は使えません。また「パーセント値」では要素のフォントサイズが基準として参照されます。 その他の仕様はご覧の表の通りです。ここでフォントサイズを指定する font-sizeプロパティとの関係について確認しておきましょう。line-height プロパティは値を長さで指定したとき以外は基本的に font-size プロパティの値を元に算出されます。例えばフォントサイズが 20px だった場合にline-height プロパティで 1.5 を指定するとインラインボックスの高さは20px の 1.5 倍で 30px と算出されます。このときウェブブラウザ上では line-heightの高さに対してテキストが垂直方向の中央に表示されます。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。現在 CSS では段落を定義する p 要素に対してフォントサイズを 16px に設定しています。ここではこの p 要素に対してインラインボックスの高さを指定してみましょう。p 要素に対してline-height プロパティを使ってインラインボックスの高さを1.5 に設定します。ウェブブラウザを見ると p 要素内のインラインボックスの高さが16px の 1.5 倍 24px に広がりました。 結果的に p 要素の行間が広がったようにも見えますがline-height プロパティは行間ではなくあくまでインラインボックスの高さを指定するプロパティだとういことに注意してください。このレッスンではインラインボックスの高さを指定するline-height プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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