スタート!CSS入門

はみ出し

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
要素の内容がボックスからはみ出したときに、内容を切り抜くかどうかを指定するには、overflowプロパティを使います。ここでは、overflowプロパティの使い方について紹介します。
講師:
04:08

字幕

要素の内容がボックスからはみ出したときに内容を切り抜くかどうかを指定するにはoverflow プロパティを使います。このレッスンでは overflow プロパティの使い方について紹介します。overflow プロパティに使える値は「 visible 」「 hidden 」「 scroll 」「 auto 」の各キーワードです。これらの各キーワードでどのような指定になるかは後ほど紹介します。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ中ほどに山吹色の背景色を適用した領域があります。HTML を見るとこの領域は description クラスが設定されているp 要素であることが分かります。ここでは description クラスに対して幅と高さを設定してみましょう。description クラスに対して width プロパティを使って幅を 250px に続いて height プロパティこちらを使って高さを 100px に設定します。こうするとボックスの大きさに対して内容の量が多いためボックスからはみ出してしまっています。 このようなときの挙動を指定するのがoverflow プロパティです。試しにはみ出した部分を非表示にしてみましょう。同じく description クラスに対してoverflow プロパティで「 hidden 」非表示に設定します。ウェブブラウザを見るとはみ出した部分が非表示になっていることが分かります。同様に今度は値に「 scroll 」を設定してみます。一旦先ほどの記述をコメントアウトします。同じく description クラスに対してoverflow プロパティを使って「 scroll 」に設定します。ウェブブラウザを見ると該当の箇所のこの箇所にスクロールバーが表示されています。そしてこのスクロールバーをスクロールすることではみ出した部分をスクロールで表示できるようになりました。またこの部分では横方向にははみ出していませんが横方向のスクロールバーも表示されています。最後に値を「 auto 」にしてみましょう。一旦先ほどの記述をコメントアウトします。そして同じく description クラスに対してoverflow プロパティで「 auto 」こちらを設定します。ウェブブラウザを見るとスクロールバーの表示が変わっています。 はみ出している方向の縦スクロールバーのみ表示されるようになりました。なお auto キーワードを指定したときの挙動はウェブブラウザに依存します。このように overflow プロパティを使うと何らかの理由でボックスから内容がはみ出したときの挙動について指定できます。例えばサービスの利用規約など一定の領域に長文を表示させたいときにも使えるでしょう。このレッスンでは要素の内容がボックスからはみ出したときに内容を切り抜くかどうかを指定する overflowプロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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