w3-container クラスは、W3.CSS の中で最も重要なクラスです。
w3-container クラスは、次のような HTML コンテナ要素のすべてのタイプに使用することができます：
<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form> など。
This footer is red.
This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.
w3-container クラスは、同一性を提供するのに重要です：
コンテナを使用するには、要素に w3-container クラスを加えるだけです：
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Try It Yourself ❯
色を追加するには、w3-color クラスを加えるだけです：
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Try It Yourself ❯
w3-container クラスは、ヘッダのスタイルに使用することができます：
W3.CSS の <div> と <header> 要素を処理する方法に違いはありません。.
w3-container クラスは、フッタのスタイルに使用することができます：
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Try It Yourself ❯
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself ❯
web ページの多くは、<header> と <footer> 要素の代わりに <div> 要素を使用しています。
w3-container クラスは、<article> と <section> 要素をスタイルすることに使用することができます：
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Try It Yourself ❯
web ページの多くは、<article> と <section> 要素の代わりに <div> 要素を使用しています。
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)
<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>
Try It Yourself ❯
<header class="w3-container w3-teal">
<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-teal">
<h5>Footer</h5>
</footer>
Try It Yourself ❯
w3-container クラスには、デフォルトで、左右に 16px のパディングが指定され、 上下にはパディングがありません：
通常は、段落や見出しがパディングをシミュレートするマージンを提供するので、 コンテナのデフォルトのパディングを変更する必要はありません。
I am a paragraph.
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself ❯
w3-container クラスには、デフォルトでは上下にパディングはありません。
2 つのコンテナは、間にマージンなしで表示されます：
I am a paragraph.
I am a paragraph.
w3-section クラスは、コンテナを分けるために使用でき、上下に 16px のマージンが設定されます：
I am a paragraph.
I am a paragraph.
<div class="w3-container w3-section w3-blue">
<h1>I am
a Heading</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself ❯
コンテナの Hiding または closing は容易です：
コンテナを閉じるには、右上隅の 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>
Try It Yourself ❯
閉じたコンテナをオープンするのは簡単です：
<div id="id01" class="w3-container w3-section 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.</p>
</div>
Try It Yourself ❯