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】SEO対策について。初心者すぎて何からどうしたらいいか皆目わかりません(+ +;)
SEO対策とは、簡単に言うと「ホームページを検索で上位に来させる対策」と言われています。 でも・・・ ≫続きを読む
-
-
【Q】ホームページをCMSにするとSEO対策に不利と聞きましたが・・・・。普通のHTMLで作って置いた方がいいんでしょうか?
「アドレスがhtmlじゃなくなると検索に不利なのでは・・?」「CMSで作った動的ページはSEOで不利 ≫続きを読む
-
-
【ホームページの作り方】病院・歯科医院のホームページ作成
歯科医院のホームページは、院長・スタッフ紹介、治療内容、医院の紹介と受付時間・交通アクセスなど、だい ≫続きを読む
-
-
Q:FBページを作りました。書いたブログを自動的にリンクさせたいのですが・・・
A:結論からいうと、facebookの自動投稿はおすすめできません クライアント様から質問をいただい ≫続きを読む
-
-
【Q】SEO対策しませんか?という電話がありました。どこで調べたのか私の個人情報も結構知っていて不安です。
●●グループから電話がかかってきましたか? しつこい営業でけっこう悪名高いところなので無視していただ ≫続きを読む
-
-
(WEB制作入門4)WordPressって何?
WordPressは、無料で配布されているブログを作るソフトです。 普通のソフトは、ワードとかExc ≫続きを読む
-
-
グーグルアナリティクスGA4への切り替え
来年7月1日からGoogle Analytics4への移行があるということで、まだ未設定の場合は下記 ≫続きを読む
-
-
阿智村商工会主催 ホームページ勉強会と相談会
「WEBサイトを作ったけど、自己流なのでどうしたら良いかわからない。 効果を上げられるホームページっ ≫続きを読む
-
-
AIのチャットロボット「ChatGPT」登録方法と使い方
またもやすごいAIが登場。「ChatGPT」のWebアプリ版。現在は無料で使えるということで、早速使 ≫続きを読む
-
-
【Q】サーバーとかドメインとか言われてもよくわからないのですが・・・
webの森では、サイト制作をご依頼したお客様に、毎回サーバーとドメインの管理を今後どうするかをお聞き ≫続きを読む