はじめてのHTML&CSS入門

floatについて(1)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボックスをレイアウトするためのプロパティである「float」の基本を学びましょう。
講師:
04:20

字幕

このレッスンでは CSS によるボックスのレイアウトに使うfloat プロパティの基本を学びます。それではチャプター3、レッスン11のファイルを見てみましょう。final のファイルをブラウザーで開くとこの様に main の箱と sub の箱が左右に分かれています。ブラウザーのウィンドウを縮めてみるとこの様な状態になります。この様なレイアウトをできることでいろんなレイアウトが可能になります。では begin の状態では重なっただけの箱をうまく左右に振り分けていきましょう。Sublime Text でbegin のファイルのスタイルシートを開いて記述をしていきます。まず箱自体の横幅を指定してあげないと箱は左右いっぱいに広がってしまいますので並べることができません。ですので幅を指定することが大事です。幅を指定するプロパティwidth を入れて400px と入れます。また、箱の領域をわかりやすくするためにheight を仮で入れておきます。こちらは 300px としておきましょう。そして先にサブの箱の方も幅と高さを指定しておきましょう。幅と同様の数字を入れてきます。幅も 400pxそして高さも 300pxこの状態で一度ブラウザーで見てみましょう。 上書き保存、アプリケーションの切り替えそしてブラウザーを更新そうしますと、main の箱そして下に sub の箱スクロールするとfooter がいます。今のままでは縦に積まれてしまいますのでこれを左右に振り分けるプロパティfloat を Sublime で記述していきます。では main に箱にまずfloat left と記入しましょう。そして、sub の箱にfloat right と記入します。一度ブラウザーで見てみましょう。アプリケーションを切り替えて更新です。そうしますと、main が左そして sub が右何故か footer の箱が上がってきてしまいました。これは float の特性について学ばなければいけません。float は浮かぶという意味でこの箱が浮かんだ状態になっています。そうしますと、浮かんでいないこの footer が下にもぐりこんでしまうという状態になってしまいます。これを防ぐにはfloat をここで終わりです、という解除のプロパティを使います。サブライムに戻りましてfooter のエリアに新しいプロパティ clear と入れてboth と入れます。clear にはclear left、right、both の3種の値を入れることができますが今回は left も right も解除したいどっちも解除したいのでboth としています。 では上書き保存をしてGoogle Chrome に戻ります。そして、更新です。そうすると、上に上がっていた footer がここまでで float が終わりですという命令をうけたのでこの様に下に下がることができました。float は幅と float のleft right 指定がまず必要であることそして float をしたら必ずclear をしないと後続のコンテンツが上に上がってしまったり意図せぬレイアウトになってしまうので気を付けましょう。このレッスンでは float の基本について学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

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

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

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

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