スタート!CSS入門

垂直方向の位置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インラインボックスや、表のセルに対して、垂直方向の位置を指定するには、vertical-alignプロパティを使います。ここでは、vertical-alignプロパティの使い方について紹介します。
講師:
05:34

字幕

インラインボックスや表のセルに対して垂直方向の位置を指定するにはvertical-align プロパティを使います。このレッスンでは vertical-align プロパティの使い方について紹介します。vertical-align プロパティ使える値はご覧の各キーワードと「長さ」「パーセント値」です。各キーワードの詳細は後ほどご紹介します。「長さ」は数値と単位で指定します。指定した分だけボックスの位置を上にあげます。0 を指定するとベースラインと同じ意味になります。「パーセント値」は指定した値と要素のインラインボックスの高さ、つまり line-height プロパティの値で掛け算をしてその結果分だけ位置を上にあげます。「長さ」と「パーセント値」ではマイナスの値も指定できこの場合は位置を下にさげます。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。vertical-align プロパティは画像の横にテキストを並べる際の位置を指定するためによく使われますのでここではその指定をやってみましょう。HTML を見ると div 要素の中に img 要素とspan 要素が並んでいます。 vertical-align 要素は img 要素やspan 要素のようなインラインレベル要素か表のセル要素にしか適用できませんので注意しましょう。ここではこの img 要素の横に並ぶ文字列、ここでは「夜の市庁舎」と書いてある文字列を垂直方向に対して中央に指定してみましょう。div 要素には photo クラスが設定されていますのでこれを使います。photo クラスの子孫にある img 要素に対してvertical-align プロパティこちらを使ってmiddle中央を意味する middle を設定します。ウェブブラウザを見ると img 要素に続くインラインのテキストが垂直方向に対して中央に表示されていることが分かります。ここで各キーワードの挙動について確認しておきましょう。ベースラインはインラインボックスのベースラインと親ボックスのベースラインを揃えます。ベースラインとはフォントの基準線のことです。例えばこの vertical-alignという文字で言えばv や e r t などアルファベットの小文字の下側のラインこの部分のラインをベースラインと呼びます。例えば g のように下に突き抜けている文字のこの下側のライン、このラインはディセンダと言い、ベースラインとは区別されますので注意してください。 次に「 middle 」。middle は中心線を親ボックスのベースラインからx-height の半分の高さ分上げると言う指定になります。次に「 sub 」。「 sub 」はベースラインを親ボックスの下付き文字として適切な位置まで下げます。そして「 super 」。super はベースラインを親ボックスの上付き文字として適切な位置まで上げます。次に「 text-top 」。text-top はボックスの上を親の内容領域の上に合わせます。その反対に「 text-bottom 」はボックスの下を親の内容領域の下に合わせます。そして「 top 」。top はボックスの上を行の上に合わせます。反対に「 bottom 」。bottom はボックスの下を行の下に合わせます。なおこれらのキーワードは表のセルに対して指定すると挙動が変わります。これらのルールは非常に細かいためCSS 2.1 の仕様書でルールが定義されている箇所のURL を紹介しておきます。この URL では原文のため英語ですがウェブ上には有志によって日本語に翻訳されている文章もありますのでそちらも参考にしてみてください。このレッスンではインラインボックスや表のセルに対して垂直方向の位置を指定するvertical-align プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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