css position
で検索するといろんな解説サイトが出てきますが
positionプロパティとすべての値との関係を列挙してあるページは、やっぱり初心者には「難解！」なわけです。
ということで小難しい解説や基礎知識は別ページを見ていただくとして、
すごーいおおざっぱにざっくりと解説するとこんな感じです。
一番よく使うパターンを図式にしてみました。
要点はこれだけ
１）親ボックスの基準点を決める
基準点を持ってる親ボックスに、position:relative;を入れておく
２）位置を確定したいボックスには、width height top leftの４点セットで
幅、高さ、基準点からの距離を指定する。
このボックスに position : absolute; をつける
というわけです。
簡単でしょ？
floatで制御できなくて四苦八苦してる時にこれを使いこなせると結構便利です。
ちゃんと使いこなそうと思ったら、全部の値の意味や指定方法を知らないといけないかもしれませんが、ぶっちゃけ難しいのでpositionプロパティを全部理解しようと思うと、使おうと思う前に挫折します。（ってわたしがそうだったΣ(;・∀・)ヾ
position解説ページ
参考になったよ！って方はwebの森のfacebookページへイイネをしてね(v^ー゜)
10 件のコメント:
おお、これは分かりやすいですね！
たぶん、使うときの認識はこれで90%カバーできてるんじゃないでしょうか・・ｗ
わ～。えどさん、
良かった、師匠にお墨付きをもらえてかなりほっとしました(^o^)／
師匠てΣ(￣□￣;
そんな大層なもんじゃござんせんよ(;´д｀)
どもども。
今日、webの勉強をしている友人が
positionが分からないーと言っていたので
ここを教えたんですが、そんときに聞かれて「おや？」と思ったのでコメントしました。
サンプルで提示されている図、
position: relative で基準になっているのに中に配置されている position: absolute のボックスが基準点からの距離になってないみたいです・・ｗ
ほんとだ！！
えどさん、するどい！
・・ていうか、友人さんがするどいんですね。
修正しときます。しばしお待ちを(;・。・A
えどさん、
レイヤーが統合されたキャプチャしか残ってなかったのでむりやり修正したら汚くなってしまいました。
おまけに最初から作りなおした方が時間かからなかったかも？？？
長文失礼します。
CSS初心者のくせにとても複雑な配置のWEBページをPOSITIONで作ろうとしています。１０日間、取り組んで、うまく行ってませんでした。ここの説明は、とてもわかりやく思いました。
しかし、私の頭が悪いのかもしれませんが、各要素の親子関係は、何によって決まるのですかがわかりません。cssに書いた順に影響を受けるのでしょうか。
画面全体を、３つに大きく区切り、左から順にid要素#A,#B,#C とします。
真ん中の#Bのところで、ホームページを見せるようにしたい。
(#Aと#C には何も表示しない。)
さらに、#B を上から３つに区切り、上から順に #D と#E と#F とします。
#Bの横幅を800pxとします。縦幅は指定しない。しかし必要なら、縦幅3000px
#一番上の#Dの縦幅は200px,一番下の#Fの縦幅は200px,中央の#Eの縦幅は指定しない。
しかし必要なら#Eの縦幅2300px。
D,E,Fの横幅はすべて800px (境界線の幅はすべて0px)
この#Dは縦に２つに区切ります。#Eは横に3つに区切ります。#Fは縦に２つに区切ります。
上の部分#Dを縦に２つに区切り、上の部分を#P と 下の部分を#Q に分けます。
#Pと#Qは、横幅が#Dや＃Bと同じです。縦幅はそれぞれ100px です。
さらに、#E を３つに区切り、左から順に #G と #H と #I とします。
横の幅はそれぞれ100px,600px,100pxとします。
縦幅はできたら指定したくないですが、必要ならいずれも2300px。
さらに、#Fの２つに区切り、上から順に #J と #K とします。
縦の幅は、400pxと100pxとします。横の幅は、FやBと同じ800px
上の配置のことを補足しながらもう一度言ってみます。
#Bが実際にホームページを見せるところで、幅は800px です。縦幅が必要なら、縦幅3000px
それを上から、順に３つに大きく区切り、３つのうち、一番上の高さ200pxの#D のところを更に２つに区切り、上半分の＃P（高さ100px）でホームページやそのページのテーマ画像を表示します。下半分の#Q(高さ100px)で、メニュー（目次）の画像を表示します。[メニューは画像ファイルで作って横に並べます。]
#Bを縦に、３つに大きく区切った、上から２番めの部分＃Eは、左右に３つに区切り、左の部分から順に、#G,#H,#I とします。その横幅は、それぞれ100px,600px,100pxで、高さは指定する必要があるなら、2300px
#Gは、サイドバーのところで、そこに上から順にメニュー（目次）を表示します。
ここは、画像ボタンを使いません。横幅100px、縦幅はBと同じ。
#Hは、本体のところで、本文を表示します。横幅600px。縦幅はBと同じ。
#I は、右のサイドバーのところで、そこで少し発展的内容にリンクするボタンを表示します。横幅100px。
これら３つは縦幅は同じ。指定が必要なら、2300pxとします。
３つに分けた下部Fを、上下で２つに区切り、上をJ、下をKとします。
Jで、補足的、まとめ的、締めくくりを記述して、リンクを張ったりします。
Jは縦幅400px,横幅800px
Kは縦幅100px,横幅800px
・これを回答してください、というのも、いや、
掲載してくださいというさえ、無茶な話ですね。
・ afk より。
afkさん、コメントありがとうございます。
なるほど、、初心者さん向けにかなり（細部を省いて）わかりやすく書いたつもりだったんですが、まだまだ初心者の方にもわかりにくい部分がいっぱいあったようですね。
ということで、解説を私のサイトのブログで書きました。こんなので答えになっていれば良いんですが・・・・cssのコツのようなものです。
http://webnomori.net/2016/06/04/post-1420/
Kokue Yukaさん、
びっくりしました。
ページまで作って回答してくださって、本当にありがとうございました。
なんて親切なんでしょう。
図に描いていただいたとおりです！
明快に答えてくださってありがとうございました。
わかりました。ブックマークさせていただきました。
左右に３つに分けるときは、左部のidをfloatで左に寄せて、
中央と右を合併したidをfloatで右に寄せたらいいということですね。
よかったです・・返信ご確認いただけて。
>左右に３つに分けるときは、左部のidをfloatで左に寄せて、
>中央と右を合併したidをfloatで右に寄せたらいいということですね。
はい、#Gと#Hをひとつのブロックで囲んでたとえば#primaryにして左に寄せ
#Iをフロートで右に寄せるような方法にすることは多いです。
最初から自分だけのデザインでサイトを作ろうとしないで、一番最初は、基本のチュートリアルのようなものを見ながら、そのとおりに作って完成させると
最適な方法がわかってくるかと思います。
コメントを投稿