この章では、ゼロから W3.CSS レスボンシブ Web サイトを構築します。
まず、初期のビューポートと 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.w3schools.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>
Try it Yourself ❯
全ての要素に、共通のマージンとパディングを追加する必要があります。
これを行うには、コンテナ (<div class="w3-container">) の中に HTML 要素を配置します。
そうすることで、ヘッダー用に別なクラスを定義できるようになります。その他のコンテンツからヘッダーを分けるため、 別々な <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>
Try it Yourself ❯
Color クラスは、要素の色を定義します。
この例では、最初の <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>
Try it Yourself ❯
Size クラスは、要素のテキストサイズを定義します。
この例では、両方のヘッダー要素にサイズを追加します：
<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>
Try it Yourself ❯
HTML5 セマンティック勧告に従うのが好きであれば。どうぞそうしてください！
If you like to follow the HTML5 semantic recommendations. please do!
<div> を使うか <header> を使うかは、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.w3schools.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>
Try it Yourself ❯
W3.CSSで、段組みのレスポンシブ・レイアウトを作成するのは簡単です。
いろいろな画面サイズで見ると、カラムは自動的に自分自身を再配置します。
グリッド・ルール：
この例は、同じ幅の 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>
Try it Yourself ❯
この例は、同じ幅の 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>
Try it Yourself ❯
この例は、真ん中の列が最初と最後の列よりも広くなっている 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>
Try it Yourself ❯
ナビゲーションバーは、ページの上部に配置されたナビゲーション・ヘッダです。
<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>
Try It Yourself ❯
サイド・ナビゲーションには、いくつかのオプションがあります：
この例は、ページのコンテンツの一部を隠し、ナビゲーションウィンドウを開きます：
<nav class="w3-sidenav w3-black w3-card-2" style="display:none"
id="mySidenav">
<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.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
Try It Yourself ❯