スタート!CSS入門

フロートの解除

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フロートによる回り込みを解除するには、clearプロパティを使います。ここでは、clearプロパティの使い方について紹介します。
講師:
03:27

字幕

フロートによる回り込みを解除するにはclear プロパティを使います。このレッスンでは clear プロパティの使い方について紹介します。clear プロパティに使える値は「 none 」「 left 」「 right 」「 both 」の各キーワードです。「 none 」はフロートによる回り込みを解除せず有効のままにします。「 left 」「 right 」は指定された要素よりも前に存在するそれぞれの方向にフロートされたボックスよりも下に。新しいボックスを生成しますつまりそれぞれの方向のフロートによる回り込みを解除します。「 both 」は左右両方のフロートによる回り込みを解除します。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用した領域があり、それに続く要素は右側に回り込んでいます。HTML を見るとこの深緑の背景色が定義された領域はheader 要素として定義されています。CSS ではこの領域に対して左方向のフロートと300px の幅が指定されています。ここではこのフロートを解除してみましょう。 フロートが有効であることを確認しつつある程度の位置で回り込みを解除したいためh2 要素の次にある p 要素のところでフロートによる回り込みを解除します。p 要素は他の箇所でもたくさん使っているためここでは該当の p 要素にだけstart というクラスを設定しましょう。この p 要素に対して「 class 」「 start 」クラスを指定します。こうすることによって「 start 」クラスの箇所だけでフロートによる回り込みを解除することができます。それではこの「 start 」クラスに対してCSS を書いてみます。「 start 」クラスに対してclear プロパティで回り込みを解除します。ここでのフロート方向は左になっていますのでclear も「 left 」と指定します。ウェブブラウザを見ると「 start 」クラスを設定した p 要素のところでフロートによる回り込みが解除されていることが分かります。解除される前の要素 h2 要素は引き続き回り込みが有効になっています。このレッスンではフロートによる回り込みを解除するclear プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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