コンテナクラス
W3-コンテナクラスはW3.CSSクラスの中で最も重要です。
W3-コンテナクラスは、のようなHTMLコンテナ要素のすべてのタイプのために使用されます。
<div>、<ヘッダ>、<フッタ>、<記事>、<セクション>、<BLOCKQUOTE>、<フォーム>、およびより多くの。
このヘッダーは緑です。
このフッターは赤です。
この記事では、ライトグレーで、テキストは茶色です。
コンテナは平等を提供します
W3-コンテナクラスは、平等を提供するために重要です：
- 一般的な余白
- 一般的なパディング
- 共通の垂直アラインメント
- 共通の水平アラインメント
- 一般的なフォント
- 一般的な色
例
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
»それを自分で試してみてください 色を追加するには、ちょうどw3- カラークラスを追加します。
例
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
»それを自分で試してみてください ヘッダーとフッター
W3-コンテナクラスは、ヘッダーのスタイルを使用することができます。
見出し1
W3-containerクラスはフッターのスタイルを使用することができます。
例
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
»それを自分で試してみてください 記事とセクション
W3-コンテナクラスは、スタイル<記事>と<section>の要素に使用することができます。
例
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> »それを自分で試してみてください  | 多くのWebページの<div>要素の代わりに<記事>と<section>の要素を使用しています。 |
|---|
ノート、パネル、および引用
W3-コンテナクラスは、ノートのすべての種類を表示するために使用することができます。
例
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> »それを自分で試してみてください W3-コンテナクラスは、パネルのすべての種類を表示するために使用することができます。
ロンドンはイギリスの首都です。 これは、1300万人の住民の首都圏で、イギリスで最も人口の多い都市です。
例
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div> »それを自分で試してみてください W3-コンテナクラスは、引用符のすべての種類を表示するために使用することができます。
例
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
»それを自分で試してみてください 章に行くW3.CSS罫線表示ノート、パネル、および引用符についての詳細を学ぶために。
組み合わせ
ヘッダ
車は輸送に使用される車輪付き、セルフパワーの自動車です。 用語のほとんどの定義は、車は道路上で主に実行するように設計されていることを指定します。 （ウィキペディア）
HTMLの<div>要素を用いて、実施例
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> »それを自分で試してみてください HTMLセマンティックな要素を用いて実施例
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> »それを自分で試してみてください コンテナパディング
W3-コンテナクラスは、デフォルトの左に16px、右パディング、ノー上部または下部のパディングを持っています。
段落や見出しがパディングをシミュレートしますマージンを提供するため、通常は、コンテナのデフォルトのパディングを変更する必要はありません。
私は1を見出しています
私は段落です。
例
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
»それを自分で試してみてください コンテナセクショニング
W3-コンテナクラスには、デフォルトの上部または下部の余白を持っていません。
二つの容器は、それらの間のマージンをwothout表示されます。
私は1を見出しています
私は段落です。
私は1を見出しています
私は段落です。
W3-部クラスがコンテナを分離するために使用することができます。それは16pxに上部と下部の余白を持っています。
私は1を見出しています
私は段落です。
私は1を見出しています
私は段落です。
例
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
»それを自分で試してみてください （クロージング）コンテナを非表示にします
非表示またはコンテナを閉鎖するのは簡単です：
このコンテナを閉じるには、右上隅のXをクリックしてください。
例
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
»それを自分で試してみてください コンテナを開きます
密閉容器を開くことは簡単です：
例
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
»それを自分で試してみてください