スタート!CSS入門

可視、不可視

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

ぜひご覧ください。

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

字幕

ボックスの可視・不可視を指定するにはvisibility プロパティを使います。このレッスンでは visibility プロパティの使い方について紹介します。visibility プロパティに使える値は「 visible 」「 hidden 」「 collapse 」の各キーワードです。「 visible 」はボックスを可視、見えるようにします。「 hidden 」はその逆でボックスを不可視、見えないようにします。ただしレイアウトには影響します。「 collapse 」は表の関連要素を非表示にする指定ですがサポートしていないウェブブラウザが多いためあまり使われません。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ中ほどにh2 要素で指定された見出しがあります。CSS を使ってこれを非表示にしてみましょう。h2 要素に対して visibility プロパティを使って「 hidden 」非表示に設定します。ウェブブラウザを見ると h2 要素が非表示になりました。なおここで重要なポイントがあります。visibility プロパティで非表示にしてもボックス自体は生成されているという点です。 そのため先ほどまで表示されていたh2 要素の領域は空いたままで後に続くボックスが表示されています。これとは異なりボックス自体を生成したくない場合は display プロパティを使います。display プロパティの値にブロックを生成しない「 none 」を指定するとボックス自体が生成されなくなり後に続くボックスはその位置を詰めて表示されます。試しに一旦 visibility プロパティをコメントアウトしてdisplay プロパティで「 none 」を指定してみましょう。display プロパティで「 none 」を指定します。すると visibility プロパティを指定したときと違ってボックス自体が生成されなくなり後に続くボックスはその位置を詰めて表示しました。このレッスンではボックスの可視・不可視を指定するvisibility プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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