メモ

メモを入力してみよう!


Lesson 15「positionとfloat」

学習概要

CSSでボックスの配置を指定できる「position」「float」を学んでいきます!

補足

この動画での説明では、position指定時に「画面上部から100px」という形で説明していますが、実際は「position:relative;」を指定されている親の要素から100pxという指定方法になります。
そのため、もし文章2の要素を囲う親要素を追加して、その要素にrelativeを指定してあげるとその要素の左上端から100pxの位置になります。
「position:relative;」が親より上の要素のどこにも指定されていなかった場合に限り、画面上部からの距離になります。

■CSSのバージョン
詳しくはコチラ

■CSSの継承
詳しくはコチラ

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 15「positionとfloat」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツ講師の斉藤です。こちらの部活ではHTML&CSSについて学んでいきます。
今回学んでいくのこちら。
positionとfloat

positionとfloatについて説明していきたいと思います。このpositionとfloat、スタイルシートでこれも指定できるんですけれどもこれはボックスの配置方法、要素の配置方法を指定するものになります。まずpositionから説明しますけれどもpositionに指定できるものは4つあります。static・absolute・relative・fixedこの4つですね.

1つ目のstaticは、これはデフォルトの状態になります。要素に対してスタイルシートでpositionを指定してなくてもこのstaticというpositionになってるということですね。

2つめのabsoluteというものなんですが、例えばあるホームページがあったとしてそれぞれ要素ボックスでレイアウトが組まれてるとします。そのうちの文章1のブロックに対してabsoluteというものをスタイルシートで指定した場合なんですけれどもスタイルシートに書く場合はこんな描き方になります。position:absolute; にします。positionとよく使うのがtop,left,right,bottomを使います。今回はtop:100px;となってるのでtop,上から100pxボックスを動かしますよ、という指定方法になります。そういった指定をした場合実際レイアウトがどうなるかと言うと、まず文章1から下の文章2345、その下のすべてのボックスが上に全部ずれます。そして肝心の文章1のボックスはどこ行ったかと言うと上から100pxのところに移動して上に乗っかるような形になります。これはどういうことかと言うと基本的にそのボックス、要素というのはひとつの透明な紙のようなものにペタペタと貼り付けられてるような形でレイアウトされてるんですね。そのボックスにpositionを指定すると透明なシートがもう一枚増えて、そこにボックスが貼り付けられたような形になります。そしてその透明なシートが前の一つ目のシートの上に重なってるようなイメージになります。なのでボックスにposition:absolute;を指定するとそのボックスより下のボックスは上にずれて指定されたボックスは上に浮かんで元あったボックスの上に重なるという形になります。
次に同じように今度文章1に対してposition:relative;というものを指定したとします。先ほどと同じようにtop:100px;、上から100px移動しますよ、というものをつけたとします。そうするとどんなレイアウトになるかと言うと、先ほどのabsoluteの時とは違って文章2から下のボックスが上にずれることはありません。文章1のボックスはどこに行ったかと言うと、上からまた100pxのところに移動して他の文章の上に重なるという形になります。どうしてこうなるかと言うとですねこれもabsoluteと同じく、透明なシートがもう一枚できてそこに文章1があるような形になります。なので下の透明なシートに重なってるんですけれども、position:relative;の場合は元のシートの方の元あった文章1、このボックスの領域というのは確保されたままになります。ここがabsoluteとは違ってきます。
最後はpositionに今度fixedを指定した場合なんですけれども同じようにtop:100px;とした場合、absoluteの時と同じく文章2以降のボックスが上にずれるような形になります。そして文章1のボックスはどこに行ったかと言うとこちらもabsoluteと同じく画面の上から100pxのところに上に乗っかって表示されるという形になります。absoluteと違う点は画面をスクロールしてもこの文章1、position:fixed;を指定したボックス、画面上からずっと消えることはないんですね。表示されたままになります。よくスクロールしてもくっついてくる広告とかあったりしますけれども、それはこういったものを使ってるんですね。他にもホームページのメニュー部分ですね、ここにもposition:fixed;を指定するとメニューがずっとスクロールしてもくっついてくるという仕組みを作ることができます。
次にfloatというものを見ていきたいと思います。これもですねpositionと同じくボックスの配置を指定できるものになるんですけれども例えばホームページですねこういったボックスの要素の配置になっていたとしてその要素の文章1の部分にfloatを指定したとします。CSSでの書き方はこんな形になります。float:Left;とかっていう形にします。floatには、leftとrightというものがあります。左右というものですね。こう指定した場合ボックスの配置、レイアウトの配置がどうなるかと言うとこんな形になります。ボックスの横に並ぶんですね。これはボックスの横幅がですね画面の横幅以内に収まってる場合に横に並ぶんですけれどもこういった形で、前にお話したブロックレベル要素というものがあったと思うんですけれども、そのブロックレベル要素に対して1行まるまるのボックスになってますので横幅を指定してあげて画面より小さくしてあげてfloatをさらに指定してあげるとこういう形で横に並べることもできます。これを使った例えばですけれどもこれは私が運営しているWordPressのテンプレート販売サイトなんですが、こちらのメニューも本来はリストタグというものを使って書きます。リスト形式なのでブロックレベル要素なんですけれどもそれに対してfloatを指定してあげることで横に並べることができます。あとはウェブカツのサイトですねトップのサイトにあるような形で文章を囲んでいるブロックレベル要素に対してもfloatを指定することで横に並べることができるようになります。
以上がボックスの配置を決めることができるpositionというものとfloatというものになります。

はいいかがだったでしょうか。
positionとfloatというのはホームページのレイアウトを組む際に結構使えますのできちんと覚えるようにしましょう。
ではまた次回お会いしましょう、さよなら。