eclucifer blog

このブログは本家へ吸収されました。

本家 を 『 WordPress 』 化しましたので、こちらのブログは移転という形になり、今後一切凍結されます。

RSS フィード を登録くださっている方は、お手数ですが http://eclucifer.net/feed/ へ修正をお願いいたします。 その他、RSS フィードについての詳細は、『 RSS フィードについて 』 をご覧ください。

背景が真っ白なのは仕様です。

ではなく、WP 化する際に誤って画像データを削除してしまい、復旧出来なかったためです。 また、内部（本家）リンクもほぼ稼動していません。 凍結するブログにはお似合いの末路 ＼（＾o＾）／ という訳でこのままにしておきます。

新生 eclucifer をどうぞよろしくお願いいたします。

関連リンク

dt の方が高さがある場合の dt と dd の横並び 2 fixed レイアウト編

  1. dt の方が高さがある場合の dt と dd の横並び 1 liquid レイアウト編
  2. dt の方が高さがある場合の dt と dd の横並び 2 fixed レイアウト編

本文の幅を指定しない liquid レイアウトの場合は 前回のやり方 で可能だけれど、よくある幅を固定して中央に寄せている fixed レイアウトの場合は 『 （ body の margin と同値の ） left: 1.8em 』 という左端からの位置指定が出来ないし （ 中央寄せのレイアウトはウインドウの幅によって本文の位置が変わるため ）、どうしたら良いのだろう？

という訳で、『 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips 』 （ 5章 position プロパティを利用したレイアウト 5-2 絶対配置を利用したレイアウト 5-2-2 絶対配置の基点を変える ） を参考に実践してみました。

【 サンプル 】
dt の方が高さがある場合の dt と dd の横並び 2 fixed レイアウト編

Web 上で position を完全に理解出来る解説には出会えていなかったのですけれど （ 意味を理解せずそういうものだと無理矢理頭に突っ込んだ感じ ）、こういうときのためのホップ本ですよ！ という訳で早速目次にかじりついてみた （ まだ全部読み終えていないのでorz ）。

そうしましたらば、『 5章 position プロパティを利用したレイアウト 5-2 絶対配置を利用したレイアウト 5-2-2 絶対配置の基点を変える 』 に求めていた解説がありました。

position プロパティに指定できる relative は、ボックスを相対配置にするためのキーワードですが、絶対配置にする際、祖先ボックスの中から構造的に関係の近いボックスに relative を指定して基点にすることで、より頑丈で柔軟性のあるレイアウトを組むことができます。

div#navi の親要素である div#content に position: relative を指定し、div#navi が絶対配置する際の基点になるように設定します。

この文章だけ読むと 「？」 かもしれませんけれど、CSS の解説が細かいのでパッと見ただけでも理解出来て 「 本ってすげぇ 」 と感動（笑） （ だって Web の本買ったことなかったのだもの ） （ 本が凄いというよりホップ本が凄いのかしら ）

つまり、（ 今回のサンプルの場合 ） 中央に寄せた本文を包む固定幅の div に position: relative を指定すれば、その div の left: 0px の場所に dt が置けるとそういうことなのですね先生！

「 おおー！ 出来たー！」 と一人キャッキャとはしゃいで恥ずかしいことこのうえないのだけれど、誰も見ていないから良しとする。 こ、これが実践の喜び！

この記事へのコメント

※ スパム対策のため、『 www. 』 を禁止ワードに設定してあります。

Comment Form

この記事のトラックバック

TB*URL