TOP  >  WebDesign  >  クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」
2009年06月17日

クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」

WEBを制作されている方は日々工夫をこらしているCSS。多々あるブラウザ環境の中で、統一した見た目を保つ為に色々な努力を積み重ねている事かと思います。今日紹介するのはクロスブラウザのためのCSSのテクニックを紹介するエントリー「10 astonishing CSS hacks and techniques」を紹介したいと思います。

csstipscss
Cross browser inline block

ツールチップやギャラリー表示、選択したテキストのカラーを変える等、様々なテクニックがソースコード付きで紹介されています。今日はその中からいくつか気になったテクニックを紹介したいと思います。

詳しくは以下

■Cross browser min-height property
min-heightをクロスブラウザにする最も簡単な方法

csstipscss02

selector {
min-height:500px;
height:auto !important;
height:500px;
}

 
 
 
 
 
■Cross browser pure css tooltips
javascriptを使わず、CSSだけでツールチップを使うTips

csstipscss03

a:hover {
background:#ffffff;
text-decoration:none;} /*BG color is a must for IE6*/

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}

 
 
 
 
 
■Set color of selected text (Firefox/Safari only)
文字を選択したときの色を変えるCSS、ブラウザは限られていますが、チョットした所にこだわりを見せれるTips

csstipscss04

::selection {
background: #ffb7b7; /* Safari */
}

::-moz-selection {
background: #ffb7b7; /* Firefox */
}

 
覚えておくとちょっと便利なCSSをがその他多数紹介されています。サンプル画像とCSSのソースコードを両方とも表示してくれていますので、かなり分かりやすいかと思います。

10 astonishing CSS hacks and techniques

posted 06:16  |  
Category: WebDesign   
tag: CSS webdesign

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る