cssのpositionはあまり使いません
モモンガの森で、世界一わかりやすいポジションの使い方という記事を書いたところかなりたくさんの方から「ほんとに一番わかりやすかった」とコメントをいただきました。
>モモンガの森: 日本一わかりやすいpositionの使い方解説
それでもやっぱり難しいことが多いようで、下記のようなご質問をいただきましたのでお返事します。
長文失礼します。
CSS初心者のくせにとても複雑な配置のWEBページをPOSITIONで作ろうとしています。10日間、取り組んで、うまく行ってませんでした。ここの説明は、とてもわかりやく思いました。
しかし、私の頭が悪いのかもしれませんが、各要素の親子関係は、何によって決まるのですかがわかりません。cssに書いた順に影響を受けるのでしょうか。
画面全体を、3つに大きく区切り、左から順にid要素#A,#B,#C とします。
真ん中の#Bのところで、ホームページを見せるようにしたい。
(#Aと#C には何も表示しない。)さらに、#B を上から3つに区切り、上から順に #D と#E と#F とします。
#Bの横幅を800pxとします。縦幅は指定しない。しかし必要なら、縦幅3000px
#一番上の#Dの縦幅は200px,一番下の#Fの縦幅は200px,中央の#Eの縦幅は指定しない。
しかし必要なら#Eの縦幅2300px。
D,E,Fの横幅はすべて800px (境界線の幅はすべて0px)この#Dは縦に2つに区切ります。#Eは横に3つに区切ります。#Fは縦に2つに区切ります。
上の部分#Dを縦に2つに区切り、上の部分を#P と 下の部分を#Q に分けます。
#Pと#Qは、横幅が#Dや#Bと同じです。縦幅はそれぞれ100px です。さらに、#E を3つに区切り、左から順に #G と #H と #I とします。
横の幅はそれぞれ100px,600px,100pxとします。
縦幅はできたら指定したくないですが、必要ならいずれも2300px。さらに、#Fの2つに区切り、上から順に #J と #K とします。
縦の幅は、400pxと100pxとします。横の幅は、FやBと同じ800px上の配置のことを補足しながらもう一度言ってみます。
#Bが実際にホームページを見せるところで、幅は800px です。縦幅が必要なら、縦幅3000px
それを上から、順に3つに大きく区切り、3つのうち、一番上の高さ200pxの#D のところを更に2つに区切り、上半分の#P(高さ100px)でホームページやそのページのテーマ画像を表示します。下半分の#Q(高さ100px)で、メニュー(目次)の画像を表示します。[メニューは画像ファイルで作って横に並べます。]
#Bを縦に、3つに大きく区切った、上から2番めの部分#Eは、左右に3つに区切り、左の部分から順に、#G,#H,#I とします。その横幅は、それぞれ100px,600px,100pxで、高さは指定する必要があるなら、2300px
#Gは、サイドバーのところで、そこに上から順にメニュー(目次)を表示します。
ここは、画像ボタンを使いません。横幅100px、縦幅はBと同じ。#Hは、本体のところで、本文を表示します。横幅600px。縦幅はBと同じ。
#I は、右のサイドバーのところで、そこで少し発展的内容にリンクするボタンを表示します。横幅100px。
これら3つは縦幅は同じ。指定が必要なら、2300pxとします。
3つに分けた下部Fを、上下で2つに区切り、上をJ、下をKとします。
Jで、補足的、まとめ的、締めくくりを記述して、リンクを張ったりします。
Jは縦幅400px,横幅800pxKは縦幅100px,横幅800px
・これを回答してください、というのも、いや、
掲載してくださいというさえ、無茶な話ですね。・ afk より。
せっかくこんなに苦労して長文で質問を書いていただいたのでその努力を無駄にしては気の毒だと思って、きちんとお返事させていただきたいのですが、実はあっさりヒトコトで回答できてしまうのですが・・・・
「ポジションはそういう時に使うものではない」ということです。
このレイアウトを実現するには、普通のやり方で、フロートを使うべきであって、ポジションはもっと限定的な場所に使います。
たとえばお部屋の間取り、玄関とリビングとキッチンと子供部屋を仕切るのは、ブロックの順番と、そのフロートで設定し、キッチンの中の、シンクの場所、これもたいていフロートか、マージンなどで設定します。
シンクの中の、包丁の位置や、まな板の位置を指定したいときだけ、ポジションをつかいます。
その場合、親になるブロックはシンクです。例えばシンクに#シンクという名前をつけて、その#シンクがposition:relative;なんです。
そして、まな板と包丁は、それぞれposition : absolute;で、#シンクからの距離などを指定します。
そうすれば、まんいちまな板が半分シンクからはみ出るようなデザインだったとしても指定できますし、部屋全体の模様替えがあって、シンクの位置が移動してしまった場合でも、シンクからまな板までの距離は固定されているので動かず安心、とかそんな時に使います。
ポジションはこのようなサイト全体の枠をつくるときには滅多に使いませんので、今後参考にしてみてください。
せっかく長文で書いてくださったので一応、図に描いてみました。
例えば私だったら、上記でいうと、#Pの中のさらに内側にあるロゴの位置と、電話番号の位置を指定するときにポジションを使うかもしれませんが、余程のことがない限り使わないです。
理由はポジションを使うと、場所ががちっと固定されてしまうため、レスポンシブデザインがやりにくくなるので、PCでちゃんと見えてもスマホで快適に表示できなくなってしまうという理由があります。
例えば事例として、車のポッキリ屋さんを見てみると・・・
>各要素の親子関係は、何によって決まるのですかがわかりません。
というご質問にお答えすると、下記のサイトが参考になると思います
http://digilog.client.jp/css/zindex.html
z-index 【要素の重なり順を指定する】 – digilog.CSS
- 前の記事
- 伊那市のグリーンファームへ行ってきました!
- 次の記事
- 一番簡単なスマホ対応ページの作り方
関連記事
-
-
【Q】ネットショップが完成しました、これから何をしていけば良いでしょうか
たくさんの労力・時間をかけてやっとオープンしたネットショップ。 webの森にリニューアルをご依頼いた ≫続きを読む
-
-
(WEB制作入門5)ショッピングカートって何?
WEB制作入門1から4までで、独自ドメインの大事さ、WordPressがどれだけすぐれているかを書い ≫続きを読む
-
-
【Q】ネットショップには「ランディングページが大事」と聞きました。ランディングページって何ですか?
まずはランディングページ、見てみてください。こんなページのことです。ランディングページのリンク集 テ ≫続きを読む
-
-
【Q】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)
SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・ ≫続きを読む
-
-
Canvaを使ってみました。「イラレやフォトショがなくても、簡単な画像くらいなら自分で作成したい」方のための….
私はEC実践会の自主勉強会や、お客様の指導で、HPの作り方をレッスンすることもあるのですが、そんなと ≫続きを読む
-
-
エックスサーバーをおすすめします
今回、つくづくエックスサーバーにしていてよかったという事件に出くわしたので紹介します。 エックスサー ≫続きを読む
-
-
【Q】ホームページをCMSにするとSEO対策に不利と聞きましたが・・・・。普通のHTMLで作って置いた方がいいんでしょうか?
「アドレスがhtmlじゃなくなると検索に不利なのでは・・?」「CMSで作った動的ページはSEOで不利 ≫続きを読む
-
-
メール設定サポートでよくある質問と答え
webの森ではたくさんのクライアント様のサーバー保守もしていますので、「メールが読めなくなったんです ≫続きを読む
-
-
信州EC実践会・飯田 水上浩一出版記念セミナー H31年1月28日
SEOに強い!ネットショップの教科書 信州EC実践会の水上浩一講師の新刊「SEOに強い!ネットショッ ≫続きを読む
-
-
【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?
携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む