W3.CSSアラート
w3-panelクラスは、すべてのタイプのアラートを表示するのに最適なクラスです。
危険！
赤はしばしば危険または否定的な状況を示します。
アラートは、多くの場合、強い色を使用して表示されます。
危険！
赤はしばしば危険または否定的な状況を示します。
例
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
警告を表示する
警告！
黄色は、注意が必要な可能性のある警告を示すことがよくあります。
警告！
黄色は、注意が必要な可能性のある警告を示すことがよくあります。
例
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
成功を表示する
成功！
緑は、成功またはポジティブなことを示すことがよくあります。
成功！
緑は、成功またはポジティブなことを示すことがよくあります。
例
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
情報を表示する
情報！
青は、中立的な有益な変更またはアクションを示すことがよくあります。
情報！
青は、中立的な有益な変更またはアクションを示すことがよくあります。
例
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
コンテナの使用
w3-containerクラスは、アラートを表示するためにも使用できます。
例
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
すべての色のアラート
アラートは多くの場合、特別な色で表示されますが、任意の色を使用できます。
危険！
赤はしばしば危険または否定的な状況を示します。
危険！
赤はしばしば危険または否定的な状況を示します。
危険！
赤はしばしば危険または否定的な状況を示します。
危険！
赤はしばしば危険または否定的な状況を示します。
危険！
赤はしばしば危険または否定的な状況を示します。
例
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
クロージングアラート
警告ボックスを閉じるには、右上隅のXをクリックします。
危険！
赤はしばしば危険または否定的な状況を示します。
アラートを閉じるXを作成するには、クラス w3-buttonとonclickイベントを含む<span>要素を追加します。
例
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
ヒント： HTML ＆times; エンティティは、（文字「X」ではなく）閉じるボタンの優先アイコンです。
丸められたアラート
角を丸くしたい場合は、 w3-roundクラスを使用してください。
成功！
ここではw3-roundが使用されています。
成功！
ここではw3-round-largeが使用されています。
成功！
ここでは、w3-round-xxlargeが使用されています。
例
<div class="w3-panel w3-green w3-round">
カードとしてのアラート
アラートをカードとして表示する場合は、 w3-cardクラスを使用します。
警告！
黄色は、注意が必要なことを示すことがよくあります。
例
<div class="w3-panel w3-yellow w3-card-4">