はじめてのHTML&CSS入門

floatについて(2)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
floatを使ったレイアウトを試してみましょう。また、floatの特性を学びます。
講師:
07:14

字幕

このレッスンでは float のもう一歩進んだ使い方そして特性について学びます。それではチャプター3、レッスン12のファイナルのファイルをブラウザーで見てみましょう。この様に main の箱が左sub の箱が右にありましてそしてブラウザ―を縮めても真ん中に居つづけていてそしてこの真ん中に余白が入っています。余白が違う色なのは実はこの main と sub を包む箱があるからです。この箱の使い方についても学んでいきます。Sublime Text でビギンのスタイルシートを開き記述を開始します。まずは、main sub の箱にそれぞれ高さと幅を指定してみましょう。main の箱に width 650pxそして高さheight を300pxそして sub の箱には幅を200px高さ height を300pxとして一度ブラウザの方で確認をしてみましょう。アプリケーションの切り替えてブラウザ を更新です。そうしますと、main の箱その下に sub の箱float をかけていないと左右にはならず、この様に縦で積まれてしまいます。では Sublime Text の方に戻ります。Web サイトを意識した設計にしていきましょう。 まず HTML を確認するとsection main とsubと2つの箱がありますがこの箱を包む div 箱を作っていきます。div id="wrapper"と書きます。これは wrap、包むなので包むものという意味になります。そして、sub までを包んで終点です。コメントを書いておきましょう。閉じるを表す / そして ID を表す #そして wrapper は、ここまでと書いたらショートカットキー Command+/Windows の方は Ctrl+/ でコメントアウトとしてメモを残しておきます。これで HTML がwrapper という箱で包まれた中に箱が2つある、という状態になりました。それではスタイルシートに戻りまして既に wrapper というスタイルシートが入っています。id="wrapper" ですね。一度ブラウザで確認してみましょう。アプリケーションを切り替えて、更新そうすると、全体が灰色に染まりました。これは wrapper の箱がまだ幅が指定されていないためウィンドウ全体を塗りつぶしてしまったということになります。ですので Sublime Text に戻りwrapper に幅を指定してあげましょう。 幅は中に入っている main と sub を足して、更に余白の部分も欲しいので650 と 200 を足して余白を 50 設けるとしたいので900px としておきます。ここで一度保存をしてアプリケーションをブラウザに切り替えて確認です。更新すると 900 までで wrapper の領域が止まったことがわかります。今度は、この wrapper ごと真ん中に寄せてみましょう。Sublime Text に戻ってwrapper にblock を真ん中に寄せる書き方margin で上下が 01つ目が 0そして2つ目の数値に autoそして ; で閉じる。こうしてあげると上下が 0、左右が autoブラウザで確認してみましょう。上書き保存、ブラウザに切り替えそして更新です。そうすると、wrapper が真ん中によるということはwrapper の中に入っているmain と sub も真ん中によるということを意味します。それでは、アプリケーションを切り替えてSublime Text に戻りfloat を使って段組をしていきましょう。main の箱にfloat leftsub の箱にfloat rightそして上書き保存をしてブラウザーで確認します、更新。 そうすると、left に mainright に sub と思う通りにレイアウトできたのですがwrapper の背景色が消えてしまっています。これは main という箱とsub という箱がfloat、つまり浮んでしまったためその親である wrapper が中に何もなくなってしまったと勘違いしてしまって閉じてしまったんですね。なので、wrapper をちゃんと元に戻す、つまり高さを認識させてやる必要があります。ではブラウザからSublime Text に戻りましてwrapper の方にoverflow という新しいプロパティを使います。overflow hiddenそして閉じます。そして上書き保存。そしてブラウザで更新。そうすると、余白の部分にwrapper の背景色がしっかり入りました。この overflow hidden というのはこの main と sub の下にfooter など、もしくはfooter に変わる何かで clear ができない時親の箱、今回は wrapper という親に overflow hidden をかけるとfloat の高さを認識してくれるという仕様があるため、それを利用しました。 もし float を使っていてclear が思うようにできない時はoverflow hidden を使ってあげるとうまくレイアウトがいくと思います。このレッスンでは、wrapper を使ったレイアウト、そして float の特性をoverflow で解除するというレッスンでした。

はじめてのHTML&CSS入門

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

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

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

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

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