Category Archives: 小ネタ

CSS 角丸グラデーションボックス

CSS 角丸グラデーションボックス

html

<div class="box_01">
<div class="box_02">
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
</ul>
</div>
</div>

css

.box_01 {
	background: url(images/box_01.gif) no-repeat top;
	width: 261px;
	padding: 5px 0 0 0;
}

.box_02 {
	background: url(images/box_02.gif) no-repeat bottom;
	padding: 10px;
}

角丸グラデーションを使ったボックスの作り方。
2枚の画像を使って作ります。
divを入子にしてbox_01に角丸上部分の画像を指定。box_02に背景部分から下の角丸部分の画像を指定します。

注意:box_02に指定している背景画像の高さ以上に中身がある場合は途中で画像が切れてしまいます。

当サインプルは高さを2000pxまで表示可能です。

サンプルDLはこちら

CSS javascriptを使わずmin-heightをIEで使えるようにするCSS

CSS javascriptを使わずmin-heightをIEで使えるようにするCSS

今はjavascriptでやるのが主流?
とりあえず今回はCSSで対応しました。

div {
    min-height: 100px;
    height:auto !important;
    height: 100px;
}

CSS Firefoxのリンクの線を消す方法

CSS Firefoxのリンクの線を消す方法

CSSにて背景画像(画像置換)をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。
そこでこのアウトラインを表示させない方法のご紹介。

a {
outline: none;
}

CSS 背景画像(画像置換)を使わないロールオーバー

CSS 背景画像(画像置換)を使わないロールオーバー

前々から画像置換を使ったボタンってどうなの!?って思っていました。
そこでjavascriptを使わずにロールオーバーする方法のご紹介。

サンプルはこちら

CSS PDFなどのアイコンを自動で表示する裏技

CSS PDFなどのアイコンを自動で表示する裏技

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。
とっても便利なのでゼヒ使ってみましょう。
※IE6では表示されないのでjavascriptと組み合わせる必要があります。

サンプルはこちら

CSS リストを使わなくても簡単にリスト風になるtext-indent

CSS リストを使わなくても簡単にリスト風になるtext-indent

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。

サンプルはこちら