のんびりいこう

宝塚歌劇・ミュージカルときどきWEBデザイナーの徒然日記。a-blog cmsをカスタマイズする時の覚書。脳脊髄液減少症・リウマチと闘い中!

最初に現れる要素にのみ適用させるCSS

すぐに忘れてしまうので覚書で…

h3:first-child {
 margin-top: 0;
 margin-bottom: 10px;
 padding-left: 10px;
 border-left: 5px solid #5790E8;
 color: #5790E8;
 font-size: 110%;
}

最初のh3要素にだけ指定したスタイルが適用されます。

2つ目以降のh3要素には他で指定しているスタイルもしくは元々のスタイルが適用されます。
私はブログなどを書く時に最初のh3見出しのmargin-topは0pxにし、2つ目以降のh3見出しの時はmargin-top:30pxを適用させたい時等に使っています。
もちろんh3のみならずp要素等にも適用できますよ。


IE7用

*:first-child+html #hogehoge {
      :
  [IE7用のスタイルを記述]
      :
}

IE8に適用するCSSハック

IE8が普及してから大分経つけど自分のPCが今までIE7だったので気にしてなかった^^;

が、今回購入した新PCであるWindows7は最初からIE8ブラウザがインストールされていた訳で…今までのサイトを見たら…愕然とした訳で^^;

前置きはこれくらいにしてっと…

ブラウザ:IE8、Firefox、Opera、Safari

html>/* */body selector
or
head~/* */body selector

全く、どのブラウザも統一してくれ…
で、前のバージョンを継承するようにしてくれ…


リストナビゲーション(横編)

XHTML

<div>
 <ul>
  <li>navi1</li>
  <li>navi2</li>
  <li>navi3</li>
  <li>navi4</li>
  <li>navi5</li>
 </ul>
</div>

CSS

div {
    width: ○○px;/*リキッドにするには逆にwidthの設定は不要*/
}

ul {
    overflow:hidden;
    margin: 0px;
    padding: 0px;
    height: ○○px;
    list-style: none;
}

li {
    float: left;
    width: ○○px;/*MacIE5対策*/
    margin: 0px;
    padding: 0px;
}

a {
    display: block;
    width:100%;
}

エントリーリスト

カテゴリーリスト

タグクラウド