はてなブックマーク

マウスオーバーの際に画像の輝度を上げ、ロールオーバーしたように見せる方法です。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプルをみる opacityはCSS3で追加される予定の透明度に関するプロパティになります。 ただし、IEを除くモダンブラウザでは先行実装している為、使用しても正常に動作します。 IEはfilterを使いalphaを変更することにより透明度を変更することが可能です。 この方法を使用するとマウスーオーバーの際に透明度が下がり輝度が上がったように見えるため、ロールオーバーが行われたように表示されます。 注意点としては

画像置換-visibilityはimg要素がhoverのときにvisibility:hidden;を行い背景の画像を表示する手法になります。 サンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css/"><img src="css_a.gif" alt="css" /></a></li> <li class="htmBtn"><a href="/html/"><img src="html_a.gif" alt="h

既にIE7をインストールしたPCではIE6をインストールできない為、通常の方法では検証ができません。 検証を行うにはいくつかの方法がありますが、スタンドアローン版のIE6を利用するのがお手軽でしょう。 スタンドアローン版とは単体で起動できる、つまりインストールせずに使用できるソフトになります。 スタンドアローン版はbrowsers.evolt.orgで配布されています。 IE3～IE6などの古いバージョンのIEが配布されていますのでさまざまなブラウザで検証ができます。 IE6はie6eolas_nt.zipからダウンロードできます。 ※スタンドアローン版はcookieの保存ができません。

vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; vertical-align:middle; } としてしま

透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。 IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります 記述するcssコード div.alpha{ width:100px; height:200px; background:url("alpha.png"); } * html div.alpha{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; } サンプル div.alphaの記述はすべてのブラウザに対して適応されます。 その後にスターハックを使用して透過pngをサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィ

画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="/html/">html</a></li> </ul>

画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。 画像置換の仕方 たとえば以下のような(X)HTMLソースがあります。 <p>とあるWEBクリエイターのblog</p> この(X)THMLソースに以下のようなCSSを適応させるとにより、テキストを画像で表現することが可能です。 p{ width:400px; height:50px; text-indent:-9999px; background:url("logo.gif") top left no-repeat; } サンプル ロールオーバーイメージ 画像置換がクローズアップされたのは、JavaScriptを使わずにCSSのみでロールオーバーイメージ（マウスが上にくると画像が変わるテクニック）を行うことができたからです。 ロールオーバ

table要素の中に、半角スペースなどの区切り文字が存在しない英数字を入れると、td要素やth要素に設定しているwidthプロパティの長さ以上に、tableが膨張されてしまいます。 サンプル 特に、Firefoxは記号を区切り文字として認識しない為、長いURLなどを入力するとすぐに発生します。 サンプル これについていくつか解決方法があります。 table要素ではなく、div要素で書く まず、最初にためすべき方法です。 table要素に固執する必要がなければ、このようなことで頭を悩ませる必要はありません。 改行したい所にbr要素やスペース 抜本的な解決方法になります。 しかし、当然表示をコントロールする為に構造をいじることは、web標準の考えからは反します。 word-break:break-all; IEの場合はword-break:break-all;を指定することにより回避できます。

vertical-alignの使い方でline-heightでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmarginを使いp要素の中央とdiv要素の中央が同じ位置になるように変更します。 ポ

(X)HTMLにおいてブロックレベル要素のheightプロパティに対して%で値を指定した場合反映されません。 サンプル CSSの仕様上%は親要素のheightに対しての割合で反映されるので、親要素に対して明示的にheightが指定されていない場合、height:autoが継承されるためです。 html要素とbody要素のheightプロパティに対して100%と明示的に指定しておく事によりheight100%のdiv要素を作成する事ができます。 html,body{ height:100%; } div{ height:100%; } サンプル

CSSでロールオーバーボタン(マウスが上にくると画像が変わるボタン)を実装する際に、プリロードを行っていないと、マウスオーバー画像が読み込まれるまでに若干のチラツキが発生します。 プリロードはjavascriptで行うの方法が一般的ですが、CSSで行うとデザイン時に同時にプリロードの処理を行うことができて便利です。 (X)HTMLに記述するコード <p class="button"> <a href="#">sample</a> </p> CSSに記述するコード p.button{ background:url("img01/a_img.gif") no-repeat; } p.button a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px;

ボタンなどを text-indent:-9999px; を使い画像置換した場合、Firefoxでは、リンクをクリックした際に点線が画面外まで出ます。 一般的にはfocusプロパティを利用して点線そのものを消してしまいます。 a:focus{ outline:none; } また、oveflowプロパティを利用してリンク領域の外にはみ出ている点線を消す方法もあります。 (MacIE5.x対策としてホーリーハックで記述) a { /**/ overflow: hidden; /**/ }

CSSでデザインしていく際に、ブラウザによりデフォルトのスタイルが異なる為困ることがあります。 有名なものではbody要素が持つデフォルトの余白を、FireFoxやIEはmargin属性で再現しているのに対して、Operaはpadding属性で再現しています。 その他にの要素もブラウザ特有のスタイルがデフォルトで指定されているものがあります。 そこで、あらかじめすべての要素に対して特定のスタイルを指定することにより、ブラウザのデフォルトのスタイルの違いを吸収できます。 よく使われるのは以下のようなスタイルの初期化 * { margin: 0; padding: 0; font-style: normal; font-weight: normal; font-size : 100%; } これは*(ユニバーサルセレクタ)を使い、すべての要素に対して初期化を行っております。 font-styl