W3.CSSコンテナ
これは私のヘッダーです
これは私の記事です
この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。この記事は薄い灰色で、テキストは茶色です。
これは私のフッターです
コンテナクラス
w3-containerクラスは、任意のHTML要素に16pxの左右のパディングを追加します。
w3-containerクラスは、次のようなすべてのHTMLコンテナ要素に使用するのに最適なクラスです。
<div>、<article>、<section>、<header>、<footer>、<form>など。
コンテナは平等を提供します
w3-containerは、すべてのHTMLコンテナ要素に同等性を提供します。
- 共通マージン
- 一般的なパディング
- 一般的な配置
- 一般的なフォント
- 一般的な色
コンテナを使用するには、 w3-containerクラスを任意の要素に追加するだけです。
例
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
色を追加するには、w3-カラークラスを追加するだけです。
例
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
ヘッダーとフッター
w3-containerクラスは、ヘッダーのスタイル設定に使用できます。
ヘッダ
例
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
例
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
W3.CSSが<div>要素と<header>要素を処理する方法に違いはありません。
w3-containerクラスは、フッターのスタイル設定に使用できます。
例
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
例
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
多くの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>
多くのWebページでは、<article>要素と<section>要素の代わりに<div>要素を使用しています。
Webページの例
ヘッダ
車は、輸送に使用される車輪付きの自家動力自動車です。この用語のほとんどの定義は、車が主に道路を走行するように設計されていることを指定しています。（ウィキペディア）
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-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>
コンテナパディング
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>