W3.CSSケーススタディ
レスポンシブWebサイトをゼロから構築する
この章では、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="https://www.w3schools.com/w3css/4/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 class = "w3-container">）
2つの別々の<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 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>
セマンティック要素を使用する
HTML5のセマンティックの推奨事項に従う場合。してください！
<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="https://www.w3schools.com/w3css/4/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を使用すると、複数列のレスポンシブレイアウトを簡単に作成できます。
さまざまな画面サイズで表示すると、列は自動的に再配置されます。
いくつかのグリッドルール：
- 行クラス<divclass = "w3-row-padding">から始めます。
- 「w3-third」などの事前定義されたクラスを使用して、グリッド列をすばやく作成します
- テキストコンテンツをグリッド列内に配置します
この例は、同じ幅の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-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
ページナビゲーション
サイドナビゲーションでは、いくつかのオプションがあります。
- 常にページコンテンツの左側にナビゲーションペインを表示します。
- 折りたたみ可能な「完全自動」のレスポンシブサイドナビゲーションを使用します。
- ページコンテンツの左側にあるナビゲーションペインを開きます。
- すべてのページコンテンツでナビゲーションペインを開きます。
- ナビゲーションペインを開くときに、ページのコンテンツを右にスライドします。
- 左側ではなく右側にナビゲーションペインを表示します
この例では、ページコンテンツの左側にあるナビゲーションペインを開きます。
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
メニューを開いたり非表示にしたりするために使用されるJavaScript：
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}