W3.CSSパネル
私はパネルです。
私はパネルです。
私はコンテナです。
私はコンテナです。
パネルクラス
w3-panelクラスは、任意のHTML要素に16pxの上下の余白と16pxの左右のパディングを追加します。
例
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
ノートのパネル
w3-panelクラスは、メモを表示するのに最適です。
メモは淡い色で表示されることがよくあります。
ロンドンはイギリスで最も人口の多い都市であり、900万人以上の人口を抱える大都市圏があります。
例
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
W3.CSSノートの詳細については、 W3.CSSノートの章をご覧ください。
引用のためのパネル
w3-panelクラスは、引用符を表示するのに最適です。
例
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
W3.CSS見積もりの詳細については、 W3.CSS見積もりの章をご覧ください。
アラートのパネル
w3-panelクラスは、アラートの表示に最適です。
アラートは、多くの場合、強い色を使用して表示されます。
危険！
赤はしばしば危険または否定的な状況を示します。
例
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
W3.CSSアラートの詳細については、 W3.CSSアラートの章をご覧ください。
カードとしてのパネル
ロンドンはイギリスで最も人口の多い都市であり、900万人以上の人口を抱える大都市圏があります。
例
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
丸みを帯びたパネル
ロンドンはイギリスで最も人口の多い都市であり、900万人以上の人口を抱える大都市圏があります。
例
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
パネルを非表示（閉じる）
パネルを隠すのは簡単です。
Xをクリックして、このパネルを閉じます。
Xをクリックして、このパネルを閉じます。
例
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
パネルを表示（開く）
（非表示の）パネルを表示するのは簡単です。
例
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>