スタート!CSS入門

フロート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスの配置方法のうち、フロートについて紹介します。また、フロートを指定するための、floatプロパティの使い方についても学びます。
講師:
04:52

字幕

ボックスの配置方法には3つの方法があります。このレッスンではその内の1つの方法、フロートについて解説し、合わせてフロートを指定するためのfloat プロパティの使い方についても紹介します。フロートを使うとボックスを通常フローから外してフロート、浮かせることができます。このとき後に続くボックスはフロート方向と反対側に流れ込みます。現在表示しているウェブページでは背景が深緑に対して左方向にフロートが設定されています。このため後に続くボックスがその右側に流れ込んでいることが分かりますね。それではフロートを指定するための float プロパティについて紹介します。float プロパティに使える値は「 left 」「 right 」「 none 」の各キーワードです。「 left 」と「 right 」はそれぞれの方向にフロートしたブロックボックスを生成します。「 none 」はフロートしないという指定になります。その他の仕様はご覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ウェブブラウザを見るとページ上部に深緑の背景色を適用した領域があります。HTML を見るとこの領域は header 要素として定義されています。 ここではこの header 要素に対して先ほどと同じように左にフロートするようなCSS を書いてみます。header 要素に対して float プロパティで「 left 」を設定します。このとき合わせて width プロパティで幅を設定することも忘れないようにしましょう。フロートに指定するボックスには幅が必要になります。img 要素などによって画像を表示するときなどHTML 側で幅が指定してあるものについては省略もできますが分かりやすさを考えてwidth プロパティで明示しておくことをおすすめします。ここでは width プロパティを使って幅を 300px に指定します。ウェブブラウザを見ると header 要素が左方向にフロートしていることが分かります。幅は 300px に指定されています。そして後に続くボックスはフロート方向の反対側、右側に流し込まれていますね。なおフロートにはその振る舞いを規定する詳しいルールがあります。これらのルールは非常に細かいためCSS 2.1 の仕様書でルールが定義されている箇所の URL を紹介しておきます。この URL では原文のため英語ですがウェブ上には有志によって日本語に翻訳されている文章もありますのでそちらも参考にしてください。 また float プロパティとボックスの種類や配置方法を規定するdisplay プロパティ position プロパティの関係についても細かいルールが規定されています。こちらのルールについても CSS 2.0 の仕様書における該当箇所の URL を紹介しておきます。この URL では display position float の各プロパティの指定が競合したときにどのような挙動になるかが規定されています。このレッスンではボックスの3つの配置方法の中からフロートについて解説しこれを指定するための float プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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