スタイルシート

最終更新時間:2010年09月10日 23時44分40秒


[css]

CSSプロフェッショナルスタイル
一番おもしろく見れた CSS 本。デザインする側の視点で書かれているのが良かった。

Link Memo


 list a:link の面白い見せ方

    • 固定幅時の list a:link の面白い見せ方が参考になった。ul li a:link 全て display: block; overflow: hidden; width:固定; hight:1em; な感じで background-image を位置決め位置変更(left top <-> left bottomとか)で上下、左右にマウスオーバーで入れ替え。
* { margin: 0; padding: 0; }

 ネガティブマージン

ネガティブマージンってこう使うのねぇ。float なレイアウトで 片側 100% - 200(任意)px を実現! margin-top ぐらいでしか使った事無かった。

(HTMLのソースでメニュー部が先にある場合)は、メニューのwidthに200px、margin-rightに-200pxを指定する。そして、本文をfloat:leftし、widthを100%にする。本文のwidthは100%なので、メニューと重ならないよう、本文の中の要素でmargin -leftを200pxとれば完成。逆に、本文を先にfloat:rightさせる場合(HTMLのソースで本文部が先にある場合)は、本文のwidth を100%、margin-leftを-200pxにする。


 折り返す

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: pre-wrap;      /* CSS3 */
word-wrap: break-word;      /* IE 5.5+ */

調べてみると、これをpre要素とかに指定しておくと、preでも(normalと違い)改行を生かしたまま折り返してくれるらしい。


  overflow:hidden;

とかと併用せんと flot とかでレイアウトが変になる事がある。

 clearfixの決定版

.clearfix:after {
        content: "";
        display: block;
        clear: both;
}

 実際の表示エリア

Mac OSX・Dock表示 の時

1024x768
Firefox 1006x603

 IE6でfixed

javascript ちらつく

これもちらついた。けど、最下部に表示が必要な時はこれか?

Dynamic property を使う。IE 用 CSS が用意出来、上部からの位置指定が可能なデザインなら ちらつく事もなくベストな感じ。

これでIE6以下用にスタイルシートを用意

<!--[if lt IE 7]> 
 IE 7 未満用 CSS
<![endif]-->

CSS は こんな感じで記述(上から50px 左から100px)

body {
  background: url(null) fixed; /* これ追加でちらつかない */
}

#hogeid {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+50));
  left: 100px;
 }

 z-index の条件

z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。



 position:absolute って

絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。


ヘルプ 検索 ソース Farm 一覧 差分 トップ ログイン