CSSデザイン警告・ヒント・注釈表示
警告表示サンプル1
2007/8/19
設置サンプルサンプルを見る
<style type="text/css">
div.exclamation1 {
margin:1em 0; padding:10px 10px 10px 35px;
border-width:2px 0;
border-style:solid;
border-color:#ff009c;
color:#666;
background:#ffebef url(/content/img/css/exclamation1.png) no-repeat 5px bottom;
font-size:11px;
line-height:1.5;
}
</style>
<div class="exclamation1">
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
</div>
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
注意しましょうというからにはちゅういしましょう。
警告表示サンプル2
注釈やヘルプ表示をお洒落に(ブロック要素に背景画像指定)
unknown
設置サンプルサンプルを見る
<style type="text/css">
/* エラー用 */
div.alert {
background-color:#FFEFEF;
margin:0 0 1em 0; padding:10px;
color:#C25338;
border:1px solid #D4440D;
line-height:1.5;
clear:both;
background-repeat:no-repeat;
background-position:5px 5px;
}
div.alert span {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/cancel_48.png', sizingMethod='scale');
width:48px; height:48px;
position:relative;
top:-5px; left:-5px;
display:block;
text-indent:-9999px;
float:left;
}
html>body div.alert { background-image:url(/content/img/css/cancel_48.png); }
html>body div.alert span { visibility:hidden; }
/* OK用 */
div.accepted {
background-color:#e2ffaa;
border-color:#76CC0B;
color:#3A9805;
}
div.accepted span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/accepted_48.png', sizingMethod='scale'); }
html>body div.accepted { background-image:url(/content/img/css/accepted_48.png); }
html>body div.accepted span { visibility:hidden; }
/* 警告用 */
div.warning {
background-color:#ffff80;
border-color:#E5A500;
color:#CC7600;
}
div.warning span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/warning_48.png', sizingMethod='scale'); }
html>body div.warning { background-image:url(/content/img/css/warning_48.png); }
html>body div.warning span { visibility:hidden; }
</style>
<div class="alert">
<span>警告</span>
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。
</div>
<div class="alert accepted">
<span>警告</span>
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。
</div>
<div class="alert warning">
<span>警告</span>
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。<br>
注釈など、注意書きに使ってもいいですね。
</div>
警告
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。
注釈など、注意書きに使ってもいいですね。
注釈など、注意書きに使ってもいいですね。
警告
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。
注釈など、注意書きに使ってもいいですね。
注釈など、注意書きに使ってもいいですね。
警告
ブロック要素に背景画像を繰返しなし(no-repeat)で指定してみました。
注釈など、注意書きに使ってもいいですね。
注釈など、注意書きに使ってもいいですね。