CSS Archive

メニューボタンが画像で、それをCSSの背景画像で制御してロールオーバーさせるやつ。よくあるあれ。仕事でもけっこう使うのに、毎回思い出すのにちょっと時間をロスっているのでメモ。

マウスのロールオーバーで切り替わる画像は同一の画像で作成。いわゆるCSS SPRITEというやつ。（実際のそれはもっとたくさんの画像を一つにしてるけど）背景画像の表示位置を変化させることでロールオーバー効果を得ている。
CSS

#globalNavi a{
    display: block; /* こうしてblock要素に指定しないとa要素は背景を表示しない */
    width: 108px; /* 背景画像と同じサイズを指定して表示領域の確保 */
    height: 40px;
    text-indent: -200px; /* テキストはマイナスインデントで表示領域外へ */
    overflow: hidden; /* 表示領域外のものはhidden */
}

#globalNavi a.home{
    background: url(/statics/pc/btnGlobalNaviHome.gif);
}

#globalNavi a:hover.home{
    background-position: 0 -40px;

}

(x)html

<ul id="globalNavi">

    <li><a href="#" title="ホーム" class="home">ホーム</a></li>

<#-- /globalNavi --></ul>

ブラウザごとのCSSによる見栄えの差異を初期化するために、
Yahoo! UI Library:YUI の YUI Reset CSS をメモ。

Continue reading

ブラウザごとの文字サイズや見栄えの違いを合わせるために YUI Fonts CSS を利用。そのためのメモ。
（それプラス、この書籍を参考に）

Continue reading

これもEmotional Webさんのエントリー。

*{ margin : 0 }はもう古い！？

エントリー直後にけっこうSBMで目立ってたから内容自体は既読なんだけど、あらためて自分でも意識して実作業に取り入れていこうということでメモ。

アスタリスクを使ったユニヴァーサルセレクタによる全スタイルのリセットには弊害、とまではいわなくとも、よろしくない面もあるよと。（そのまま活かせるデフォルトのスタイルまでリセットしていることとか）

YUIのYUI Reset CSSなんかを参考にして、自分なりのCSS libraryを、そろそろちょろっとでも用意しておきたいところ。

JavaScriptは使用せず、CSSとだけで実装できるので軽快でシンプル。レッツFC2ブログさんのところで紹介されていたものをちょっと改造して自分用にメモ。

Continue reading

このブログエントリーをグイグイと参考にさせていただいて、自分用の簡易CSSライブラリに加える為、メモる。

Continue reading

3カラムのリキッドレイアウト（Three percentage columns）。
仕事で組む必要があったので、ついでにメモ。
＊下記CSSソース以外にもreset.cssを併用するのが前提

Continue reading

リモートロールオーバーをJavaScriptじゃなくてCSSで。
（こういうのをそう呼ぶって今日ググってて初めて知った）

小さいサムネール画像の上にポインタをのせると左側のでっかい表示部分にそのサムネールの拡大画像が表示されるっていうやつ。

Continue reading

ヘッダ部で表示するサイトのロゴを画像で。それをクリックするとホームへ、っていうよくあるやつ。SEOのことを考慮して、背景画像を表示するけど、ソース内にはテキストがあって、CSSをdisableにするとそのテキストが表示されるっていう、よく使うやつ。（h1をリンクで囲ってその中にサイト名やキーワードも記述）

Continue reading