メモ

メモを入力してみよう!


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 について学んでいきます今回学んでいくのはこちらポジションとフロートではですねポジションとフロートについて説明していきたいと思いますこのポジションとフロートと妹ですねスタイルシートでこれも指定できるんですけれどもこれはボックスの配置方法の要素の配置方法ですねを指定するものになりますまたポジションから説明しますけれどもポジションに指定できるものはですね四つあります static アブソルートレラティブ X でこの四つですね一つ目んですね static ってのはこれはデフォルトの状態になります要素に対してですね伝えるシートでポジションを指定してなくてもこの static というポジションになってるということですねえふたつめの泡の音というものなんですが例えばあるホームページがあったとしてですねそれぞれ要素ボックスですねでレイアウトが組まれてるとしますそのうちの文章位置をブロックに対してアブソルートというものをスタイルシート指定した場合なんですけれどもスタイルシートに書く場合はですねこんな描き方になりますポジションとやって position Absolute にしますねポジションとよく使うのがですねと言うとか left right BOTTOM とかっていうものを使います今回は TOP 100ピクセルとなってるのではトップ上からですね上から100ピクセル動かしますボックスを動かしますよ指定方法になりますそういったして押した場合ですね実際レイアウトがどうなるかと言うとまず文章1から下の文章に345その下のすべてのボックスがですね上に全部釣れますそして肝心の文章市のボックスはどこ行ったかと言うと上から100ピクセルのところに移動して上に乗っかるような形にはどういうことかと言うとですね基本的にそのボックスをよそうというのはひとつの透明な紙のようなものですねベタベタと貼り付けられてるような形してる英訳されてるんですねそのボックスにですねポジションを指定すると透明なシートがですねもう一枚増えてそこにボックスが貼り付けられたような形になりますそしてその透明なシートが前の一つ目のシートの上に重なってるようなイメージありますのでボックスにですね position ABSOLUTE を指定するとそのボックスより下のボックスは上にずれてですねで指定されたボックスは上に浮かんでもたったボックスの上に重なるという形になります次にですね同じように今度文章1に対してポジションコードレスっているというものを指定したとします先ほどと同じように TOP 100ピクセル上から100ピクセル移動しますよというものもつけたとしますそうするとどんなレイアウトになるかと言うとですね先ほどのアブソルートの時とは違ってですね文章にから下のボックスが上にずれることはありません文章市ボックスはどこに行ったかと言うと上からまた100ピクセルのところに移動して他の文章の上に重なるという形になりますどうしてこうなるかと言うとですね俺も先ほどと同じくですねアブソルートと同じく透明なシートがもう一枚で着てそこに文章位置があるような形になりますので下の透明なシートに重なってるんですけれどもポジションで納得の場合はですね元のシートの方の元あった文章市コムボックスの領域というのは確保されたままになりますここがアブソルートとは違ってきます最後はポジションに今度フィックスを指定した場合なんですけれども同じように TOP 100ピクセルとした場合ですね本当はアブソルートの時と同じくですね文章に行こうのボックスが上にずれるような形になりますそしてですね文章市ボックスはどこに行ったかと言うとこちらもアブソルートと同じく画面の上から100ピクセルのところに上に乗っかって表示されるという形になりますまたアブソルートと違う点はですね画面をスクロールしてもこの文章位置 position fixed 指定したボックス画面上からずっと消えることはないんですね表示されたままになります横スクロールしてもですねくっついてくる広告とかあったりしますけれどもそれはこういったものを使ってるんですね他にもですねホームページのメニュー部分ですねコミ position fixed 指定するとメニューがずっと くっついてくるとし君を作ることができますね次にですねフロートというものを見ていきたいと思いますこれもですねポジションと同じくボックスの配置を指定できるものになるんですけれども例えばホームページですねこういったボックスの要素の配置になっていたとしてその要素のですねま文章市の部分にフロートを指定したとします CSS 手の描き方はこんな形になりますア float Left とかっていう形にしますフロートにはですねレフトとライトというものがあります左右いいということですねねこを指定した場合ボックスの配置がレイアウトの配置がどうなるかと言うとこんな形になりますボックスの横に並ぶんですねこれはボックスの横幅がですね画面の横幅以内に収まってる場合に横に並ぶんですけれどもこういった形ですね前の話したブロックレベル要素でもなったと思うんですけれどもそのブロックレベル要素に対してですね15まるまるの僕明日になってますので横幅を指定してあげてね画面より小さくしてあげてですねフロートをさらに指定してあげるとこういう形で横に並べることできますこれを使ったですね例えばですけれどもこれは私が運営している WordPress のテンプレート販売サイズですがこちらのメニューですねメニューも本来はリストタグというものを使って書きますたのでリスト形式なのでブロックレベル要素なんですけれどもそのに対してフロートを指定してあげることで横に並べることができます後はウェブカツのサイトですねトップのサイトにあるような形で文章を囲んでいるブロックレベル要素に対してもフロートを指定することで横に並べることができるなります以上がですねボックスの配置を決めることができるポジションというものとフロートというものになりますはいいかがだったでしょうかポジションとフロートというのはですねホームページのレイアウトを組む際に手を使えますのでチート覚えるようにしましょう