Webに関するメモと日記

記事内で使えるアラート表示のテンプレート3種

このブログの記事内で使っているアラート表示の装飾。ブログ記事作成に役立つ。

デモ

ボタンを押してください

この記事は2年以上前に書かれたものです。

乾燥剤は食べないでください。

文字色は背景色とのコントラス比が7.00になるように調整している。classにcautionをつければ黄色に、warningをつければ赤色になる。

ソース

HTML

<p class="alert">
ボタンを押してください
</p>

<p class="alert caution">
この記事は2年以上前に書かれたものです。
</p>

<p class="alert warning">
乾燥剤は食べないでください。
</p>

サンプルではpタグにしてあるが、記事とある程度独立した内容であればfigureタグ、よく分からない場合はdivタグでOK。

CSS

.alert {
    padding: 1em 1.25em;
    font-size: .88em;
    border-left: .4em solid;
    background: #d6efff;
    border-color: #b8daff;
    color: #1d4f87;
}
.alert.caution {
    background: #fff3cd;
    border-color: #ffdaa6;
    color: #674f19;
}
.alert.warning {
    background: #ffe1e4;
    border-color: #f5c6cb;
    color: #91202d;
}

Stylus

.alert
    padding 1em 1.25em
    font-size .88em
    border-left .4em solid
    background #d6efff
    border-color #b8daff
    color #1d4f87

    &.caution
        background #fff3cd
        border-color #ffdaa6
        color #674f19

    &.warning
        background #ffe1e4
        border-color #f5c6cb
        color #91202d