CSSで縦分割の擬似フレームページ

  • 2006/07/09(Sun)
  • カテゴリー：CSS

なんとなくアクセス解析を眺めていると、擬似フレームに関する検索で辿り着く方がわりといらっしゃるようだったので、今回はまた擬似フレームについて。

今回は左右分割ではなく縦分割のフレームをCSSで擬似的に再現してみようと思います。

まず(X)HTMLを以下のように記述します。

  1. 　・
  2. 　＜略＞
  3. 　・
  4. <body>
  5. <div id="header">
  6. <h1>擬似フレームサンプル</h1>
  7. <p>CSSで縦分割の擬似フレームを再現。</p>
  8. </div>
  10. <div id="contents">
  11. <div id="contents-inner">
  12. <h2>コンテンツ見出し</h2>
  13. <p>以下、本文続く…</p>
  14. 　・
  15. 　・
  16. 　・
  17. </div>
  18. </div>
  20. <div id="footer">
  21. <p>コピーライト等、フッター情報…</p>
  22. </div>
  23. </body>
  24. </html>

これといったポイントはありませんが、一箇所だけ。
コンテンツボックスの内包要素として、11〜17行目に渡って<div id="contents-inner">〜</div>で囲っています。

後述しますが、これはpadding指定の為に記述しています。

次にCSSを以下のように指定します。

  1. html {
  2.     height: 100%;
  3.     overflow: hidden;
  4. }
  6. body {
  7.     height:100%;
  8.     overflow:hidden;
  9. }
  11. div#header {
  12.     width: 100%;
  13.     height: 100px;
  14.     position: absolute;
  15.     top: 0;
  16.     right: 16px;    /* スクロールバー幅 */
  17.     z-index: 2;
  18.     background: #fff;
  19. }
  21. div#content {
  22.     height: 100%;
  23.     overflow: auto;
  24.     position: relative;
  25.     z-index: 1;
  26. }
  28. div#content-inner {
  29.     padding: 100px 0 50px;
  30. }
  32. div#footer {
  33.     width: 100%;
  34.     height: 50px;
  35.     position: absolute;
  36.     bottom: 0;
  37.     right: 16px;    /* スクロールバー幅 */
  38.     z-index: 2;
  39.     background: #fff;
  40. }
  42. div#header h1,div#header p {
  43.     margin-left: 16px;
  45. div#footer p {
  46.     margin-left: 16px;
  47. }

ポイントとなるのは強調部分です。
以下、解説していきます。

まずは2,7,22行目の「height:100%」ですが、htmlとbodyの双方にも指定してやることで、高さ100%のボックスを作り出しています。
（これは標準準拠、後方互換の両モードで同様の表示を得る為です）

次にhtmlとbodyに「overflow:hidden」を指定してスクロールバーを消します。
実際に表示されるスクロールバーは、コンテンツボックスに指定した「overflow:auto」で出現させます。（23行目）

後はヘッダーとフッターの両ボックスをそれぞれ上部と下部に絶対配置させるのですが、注意点があります。
それは16行目と37行目で指定しているように、スクロールバーの幅分左にずらす必要があるということです。

これはスクロールバーが隠れてしまうのを防ぐ為ですが、詳細はサンプルの中で説明していますので、そちらを参照して下さい。

さらに、ヘッダーとフッターにはz-indexで前面に配置されるよう、レイヤーの重なり順を指定します。（17行目と38行目）

最後の注意点として、ヘッダーとフッターそれぞれに指定している背景があります。
この背景指定を抜かしてしまうと、ヘッダーとコンテンツ（フッターとコンテンツも）が重なり合って見えるので、必ず指定して下さい。

以上で縦分割の擬似フレームそのものは完成しますが、div#contents-innerにpadding（marginでも可）を指定（29行目）しないとコンテンツボックス内上部にある要素がヘッダーボックスの裏に隠れたままになってしまいます。

また、42〜47行目の指定に関しては、ヘッダーとフッターの両ボックスを左へずらしたので内包要素を右へずらし直して元の位置に戻しているだけです。

その他、24〜25行目の指定は、z-indexによる重なり順を指定する為に「position:relative」、「z-index:1」としていますが、無くても支障はないと思います。

その他詳細については縦分割の擬似フレームサンプルをご覧下さい。

【関連記事】
CM:16  |  TB:0  |  ▲

画像ポップアップリンク

  • 2006/07/01(Sat)
  • カテゴリー：CSS

スクリプト不要、CSSのみでテキストリンクにポップアップ画像を表示させてみようと思います。

例えばサイトのリンク集ページ等で、リンク先のサイトがどんなサイトなのかを前もって知っておけるようにすると、クリックに対する不安は軽減すると思います。

また、文章で説明するよりも、サムネイル画像の方がイメージしやすく、わかりやすい場合もあると思います。

まず(X)HTMLに以下のように記述していきます。

  1. <dl>
  2. <dt>検索・ポータルサイト</dt>
  3. <dd><a href="http://www.yahoo.co.jp/" title="Yahoo! JAPAN">Yahoo! JAPAN<span class="yahoo">(http://www.yahoo.co.jp/)</span></a></dd>
  4. <dd><a href="http://www.google.co.jp/" title="Google">Google<span class="google">(http://www.google.co.jp/)</span></a></dd>
  5. <dt>ブログ</dt>
  6. <dd><a href="http://wemolog.blog61.fc2.com/" title="WeMo">WeMo<span class="wemo">(http://wemolog.blog61.fc2.com/)</span></a></dd>
  7. <dd><a href="http://yoshiyukinet.blog10.fc2.com/" title="よしゆき.blog">よしゆき.blog<span class="yoshiyukiblog">(http://yoshiyukinet.blog10.fc2.com/)</span></a></dd>
  8. </dl>

特別なことはあまりしていません。
ポイントとしては、強調部分で示した通り、<span>タグで囲った部分のみです。

その他は、別にサンプルコードのように<dl>タグでなくても、見出しタグ（<h1>〜<h6>）と<ul>タグを使ってもいいですし、好きなようにマークアップして大丈夫です。

また、<span>タグの中身も、別にリンク先URLである必要はありません。
サンプル内で後述しますが、文字列は別の物でもかまいません。

後はこれに対してCSSでいくつか指定してやればオーケーです。

  1. dd a { position: relative; }
  3. dd a span {
  4.     display: block;
  5.     visibility: hidden;
  6.     width: 128px;
  7.     height: 128px;
  8.     position: absolute;
  9.     top: -130px;
  10.     left: 30px;
  11. }
  13. dd a:hover { background: #fff; }    /* この指定を抜かすとうまくポップアップされません */
  15. dd a:hover span {
  16.     visibility: visible;
  17.     text-indent: -10000px;
  18. }
  20. span.yahoo { background: url(画像パス); }
  21. span.google { background: url(画像パス); }
  22. span.wemo { background: url(画像パス); }
  23. span.yoshiyukiblog { background: url(画像パス); }

まずa要素に対する「position:relative」ですが、これはポップアップ画像の表示位置を絶対指定する為に、a要素がその基準位置となるよう指定しています。

「visibility:hidden」と「visibility:visible」はテキストリンクに対してオンマウスか否かで表示・非表示を切り替える為の指定です。

a:hoverに対する背景指定ですが、これがないとポップアップ表示そのものがされなくなります。
ただし#fff（白色）である必要はないので、ページ背景色等と併せて指定してもらえば大丈夫です。

最後に「text-indext:-10000px」ですが、これは画像置換の常套手段で、これも大きなマイナス値であればサンプル通りである必要はありません。
（インデントを大きなマイナス値にすることで、テキストを画面外に飛ばしています）

実際の表示と詳細については、ポップアップリンク集サンプルをご覧下さい。

また、今回のサンプルにはサイトサムネイルの自動生成サービスのSimple APIを利用させて頂きました。

CM:1  |  TB:0  |  ▲

垂直マージンの相殺

  • 2006/04/21(Fri)
  • カテゴリー：CSS

CSSでレイアウトをしていくと、ボックス要素の指定において、縦方向のmarginがうまく反映されずに困ることがあります。

これは、隣接するボックスの垂直マージンを相殺するという仕様に基づくもののようです。
例として以下のようにソースを書きます。

  1. h1 {
  2.     margin-bottom:15px;
  3. }
  5. p {
  6.     margin-top:10px;
  7. }

この例の(X)HTMLではh1要素の直後にp要素を記述しているものとして考えます。

この場合、h1要素とp要素の間は15pxと10pxを合わせた25pxになると思いがちですが、実際には大きい方の値である15pxしか空きません。

この例で示したような垂直マージンの相殺は、以下のような仕様になっています。

  • 隣接するマージンが互いに正の値の場合、その最大値（二つのうちの値が大きい方）が相殺後のマージン値とされる。
  • 隣接するマージンに正負が混在する場合、双方を足し合わせた値がマージン値とされる。（相殺されない）
  • 隣接するマージンが互いに負の値の場合、その最小値（二つのうちのマイナス値が大きい方）が相殺後のマージン値とされる。

つまり、h1の下方マージンが15px、pの上方マージンが-10pxなら、h1要素とp要素の間は5pxになります。
またh1の下方マージンを-15px、pの上方マージンを-10pxと指定した場合には、-15pxがマージン値とされます。

このことを念頭に置いてレイアウトすれば縦方向の調整で混乱することはなくなると思いますが、そもそもこの垂直マージンの相殺を回避して表示させることは可能なのでしょうか。

これらは、borderやpaddingを隔てずに接する場合、接するmarginの最大値が適用されるというものなのです。

ちなみに、borderやpaddingを隔てた場合は折りたたみの対象にはなりません。今回のようにpx指定ではなく、emなどの相対値を指定しても同様の結果になります。

2nose>CSS Lab.>垂直marginの折りたたみ（margin collapse）

borderやpaddingの指定で相殺を回避できるとのことなので、以下のように指定し直してみます。

  1. h1 {
  2.     margin-bottom:15px;
  3.     border:1px solid #ccc;
  4. }
  6. p {
  7.     margin-top:10px;
  8.     border:1px solid #ccc;
  9. }

垂直マージンの相殺回避の検証サンプル
（サンプルでは便宜上、両ボックスともp要素に置き換えて検証しています）

ところが、うまくマージンの相殺を回避できていません。

borderの代わりにpaddingを指定してみても同様の結果でした。
何か指定の仕方が間違っていたのでしょうか。ちょっとわかりませんんが…

垂直マージンの相殺を回避する方法については、わかり次第改めて書いていこうと思いますが、今回はとりあえず垂直マージンは相殺されるということを念頭に置いてレイアウトを組むことをお勧めしておきます。

CM:0  |  TB:0  |  ▲

CSSで擬似フレームページ

  • 2006/04/12(Wed)
  • カテゴリー：CSS

今回はフレームページをCSSによって擬似的に再現する方法についてですが、まずはフレームについて少し触れておきます。

以前は多く見られたフレームページですが、今ではわりと少なくなったように思います。
これにはフレームの利用に伴う弊害を嫌う傾向が強まり、その利点と比べて欠点が大きいと判断される風潮が背景にあると思います。

ですが、やはりフレームページのようにメニュー位置を固定して表示する方が閲覧しやすい場合もあります。

そこで、あくまで擬似的にですがCSSを工夫してフレームページを再現してみようと思います。

まず(X)HTMLを以下のように記述します。

  1. 　・
  2. 　＜略＞
  3. 　・
  4. <body>
  5. <div id="main">
  6. <h1>擬似フレームサンプル</h1>
  7. <p>CSSで擬似フレームを再現。</p>
  8. <h2 id="menu1">メニュー１見出し</h2>
  9. <p>以下、本文続く…</p>
  10. 　・
  11. 　・
  12. 　・
  13. </div>
  14. <div id="navi">
  15. <ul>
  16. <li><a href="#menu1" title="メニュー１">メニュー１</a></li>
  17. <li><a href="#menu2" title="メニュー２">メニュー２</a></li>
  18. <li><a href="#menu3" title="メニュー３">メニュー３</a></li>
  19. </ul>
  20. </div>
  21. </body>
  22. </html>

コンテンツボックスとナビゲーションボックスにそれぞれidを付ける他は特にポイントとなる部分はありません。
各ボックスの記述順も、コンテンツが先でもナビゲーションが先でもかまいません。

次にCSSを以下のように指定します。

  1. html {
  2.     _overflow:hidden;
  3. }
  5. body {
  6.     _height:100%;
  7.     _overflow:hidden;
  8. }
  10. div#main {
  11.     margin-left:200px; /* ナビゲーションボックスの幅の分マージンを取る */
  12.     height:100%;
  13.     _overflow:auto;
  14. }
  16. div#navi {
  17.     width:200px;
  18.     height:100%;
  19.     position:fixed;
  20.     _position:absolute;
  21.     top:0px;
  22.     left:0px;
  23. }

ポイントとなるのは強調部分の記述です。
以下、解説していきます。

順序が前後しますが、まずは19行目と20行目のposition設定について。
ここが今回一番のポイントとなる部分です。

まず「position:fixed」をサポートするブラウザ向けに19行目の指定を行い、ナビゲーションボックスを固定します。
次にWinIE用にアンダースコア・ハックを利用して絶対位置でナビゲーションボックスの位置設定を行います。

さらにコンテンツボックス（div#main）に、WinIE用の「overflow:auto」を指定します。（13行目）

後はWinIE用に体裁を整えるように色々と指定してやるだけです。

2行目と7行目の「overflow:hidden」は、スクロールバーの二重表示を回避する為に指定しておきます。
（Win IEではすでに13行目に指定した「overflow:auto」でスクロールバーが表示されるようになっています）

6行目と12行目の「height:100%」は、これを指定しないとWinIEではスクロールができなくなります。（スクロールバー自体が表示されません）

以上でCSSを用いた擬似フレームは完成しますが、18行目の「height:100%」がないと、ナビゲーションボックスが画面下部まで続かず、内容に合わせた高さになってしまいますので、背景などを使ってコンテンツとナビゲーションを区別させて表示させたい時には忘れずに指定した方がいいでしょう。

その他詳細については擬似フレームサンプルページをご覧下さい。

【関連記事】
CM:0  |  TB:0  |  ▲

アンダースコア・ハック(Underscore Hack)

  • 2006/04/09(Sun)
  • カテゴリー：CSS

アンダースコア・ハック(Underscore Hack)とは、CSSの特殊な記述によるブラウザ振り分けの方法のひとつです。

全てのブラウザがCSSの仕様に対して正確に解釈をするわけではなく、現在はWeb標準完全サポートへの過渡期であるので、その現状でもできるだけ多くのブラウザで意図した通りの同様の表示を求める為に、裏技的な役割を持つCSSハックと呼ばれる技術が編み出されたようです。

今回のアンダースコア・ハックはその中でも特に簡単なもののひとつで、WinIEのみにCSSの指定を適用させる為のものです。

  1. p {
  2.     color:#f00; /* WinIE以外 */
  3.     _color:#00f; /* WinIE用 */
  4. }

上記のように同じプロパティの指定を繰り返し、それぞれ値を変えて記述しますが、この時後に記述する方のプロパティに「_」（アンダースコア）を付けてやります。
（※記述順に注意）

プロパティの前にアンダースコアを付ける記述は正しい記述ではないので、WinIE以外のブラウザではこの指定を完全に無視します。

ところがWinIEだけは無視せずにこれを解釈する為、後に書いた記述が優先されるというCSSの規則から、color:#f00;の指定をcolor:#00f;で上書きされた状態になります。

これによってWinIEに対してのみにCSSの指定をしてやることができるので、WinIE特有のバグに対処できる、ということになります。

ただし、冒頭で述べたようにCSSハックはあくまで裏技的である上、正しい記述の仕方ではありません。
今後Web標準へのサポートが進むにつれ、ハックが無効になる恐れもあるので、多用することは避け、「どうしても」という時にのみ使用するようにしなければ、後になって修正が大変になると思います。

【関連記事】
CM:0  |  TB:0  |  ▲

<< prev