Search
  1. 警告表示サンプル1
  2. 警告表示サンプル2〔注釈やヘルプ表示をお洒落に(ブロック要素に背景画像指定)〕

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

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women