W3.CSS Alerts

❮ 前章へ 次章へ ❯

アラートの表示

×

Danger!

Red often indicates a dangerous or negative situation.

×

Warning!

Yellow and orange often indicates something that needs attention.

×

Success!

Green often indicates something successful or positive.

×

Info!

Blue often indicates a neutral informative change or action.

アラートは、色付きの w3-panelw3-container を使用して作成することができます:

<div class="w3-panel w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 
Try It Yourself ❯

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or negative situation.</p>
</div> 
Try It Yourself ❯

W3.CSS の色

アラートは、通常、強い色で表示しますが、あらゆる色を使用することができます:

Danger!

Red often indicates a dangerous or negative situation.

Danger!

Warning!

Yellow often indicates something that needs attention.

Warning!

Success!

Green often indicates something positive.

Success!


アラートを閉じる

コンテナを閉じるには、右上隅の X をクリックしてください:

×

Danger!

Red often indicates a dangerous or potentially negative action.

×

Warning!

Yellow often indicates something that needs attention.

×

Success!

Green often indicates something successful or positive.

w3-closebtn 上の onclick イベントを使用して、アラートを閉じることができます:

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
Try It Yourself ❯

&times; は、文字 "x" よりも閉じるボタンに適したアイコンの HTML エンティティです。


角丸のアラート

コーナを丸めるには、w3-round クラスを使用します:

w3-round

w3-round-large

w3-round-xxlarge

<div class="w3-panel w3-green w3-round">
Try It Yourself ❯

カードのようなアラート

Danger!

<div class="w3-panel w3-red w3-card-8">
Try It Yourself ❯

❮ 前章へ 次章へ ❯