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)で指定してみました。
注釈など、注意書きに使ってもいいですね。
注釈など、注意書きに使ってもいいですね。