最初からレスポンシブWebサイトの構築
この章では、最初からW3.CSS応答ウェブサイトを構築します。
まず、最初のビューポートとW3.CSSへのリンクを、簡単なHTMLページで開始。
例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html> »それを自分で試してみてください コンテナ内の要素を入れて
今、私たちはすべての要素に共通のマージンとパディングを追加する必要があります。
これを達成するために、容器内部のあなたのHTML要素を置く（の<divクラス= "W3-コンテナ">）
それは可能性のあるヘッダのために別々のクラスを定義するようにします。 個別の<div>要素を使用して、コンテンツの残りの部分からヘッダを分離します：
例
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div> »それを自分で試してみてください カラークラス
カラークラスは、要素の色を定義します。
この例では、最初の<div>要素に色を追加します。
例
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»それを自分で試してみてください サイズクラス
サイズクラスは、要素のテキストのサイズを定義します。
この例では、両方のヘッダ要素にサイズを追加します。
例
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»それを自分で試してみてください セマンティック要素を使用します
あなたはHTML5セマンティック勧告に従うのが好きならば。 してください！
 | あなたはの<div>や<ヘッダ>を使用する場合はW3.CSSのために重要ではありません。 |
|---|
例
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html> »それを自分で試してみてください 複数列応答レイアウト
W3.CSSで、複数列応答レイアウトを作成することは容易です。
さまざまな画面サイズで見たときの列が自動的に自分自身を再配置します。
いくつかのグリッドのルール：
- 行クラスの<divクラス= "W3-行パディング">で始まります
- 迅速グリッド列を作るために「W3-第三」などの事前定義されたクラスを使用します
- あなたのテキストコンテンツは、グリッド列の内側に配置します
この例では、同じ幅の3つの列を作成する方法を示します。
例
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »それを自分で試してみてください この例では、同じ幅の4つの列を作成する方法を示します。
例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »それを自分で試してみてください 幅の異なる列
この例では、真ん中の列は最初と最後の列よりも広くなっている3列のレイアウトを作成します。
例
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »それを自分で試してみてください ナビゲーションバー
ナビゲーションバーは、ページの上部に配置されたナビゲーションヘッダです。
例
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »それを自分で試してみてください サイドナビゲーション
サイド・ナビゲーションを使用すると、いくつかのオプションがあります。
- 必ずページコンテンツの左側のナビゲーションペインを表示します。
- ページコンテンツの左部分を隠し、ナビゲーションウィンドウを開きます。
- ページコンテンツのすべてを隠し、ナビゲーションウィンドウを開きます。
- ナビゲーションウィンドウを開くときに、右にページの内容をシフトします。
この例では、ページのコンテンツの一部を隠し、ナビゲーションウィンドウを開きます。
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScriptが開き、メニューを非表示にするために使用しました：
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
»それを自分で試してみてください