PC、ノートパソコン、タブレット、携帯電話など全てのデバイスで動作する、 早くて素晴らしいレスポンシブな Web サイトの作成方法を学習します。
web サイトを構築する前に、常にページをデザインするためのレイアウト草案を描くのは賢明なことです。
「レイアウトの草案」を持っていると、web サイトを簡単に作成できます：
Description if the band
Description if the band
Description if the band
doctype では、ページを HTML5 の文書として定義する必要があります：
<!DOCTYPE html>
meta タグで、文字セットを UTF-8 に定義する必要があります：
<meta charset="UTF-8">
viewport meta タグでは、Web サイトを全てのデバイスと画面解像度で動作するようにする必要があります：
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS は、すべてのスタイルへのニーズや、全てのデバイスとブラウザの違いを処理しなければなりません：
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
W3.CSS によるスタイルの詳細については、W3.CSS チュートリアルご覧ください。
最初の空な web ページの外観は、次のようになります：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3.css">
<body>
<!-- Content will
go here -->
</body>
</html>
web サイトの <body> 要素の中で、"Layout Picture" を使用して以下を作成します：
HTML5 には、いくつかの新しいセマンティック要素が導入されました。セマンティック要素は、Web ページの構造を定義し、 スクリーンリーダや検索エンジンがページを正しく読み取るのを手助けするので重要です。
最も一般的なセマンティック HTML 要素のいくつかを次に示します：
<section> 要素は、関連したコンテンツを持つ web サイトの一部を定義するために使用することができます。
<article> 要素は、個別のコンテンツを定義するために使用することができます。
<header> 要素は、見出し（文書、section、article の）を定義するために使用することができます。
<footer> 要素は、フッタ（文書、section、article の）を定義するために使用することができます。
<nav> 要素は、ナビゲーションリンクのコンテナを定義するために使用することができます。
このチュートリアルでは、セマンティック要素を使用します。
ただし、代わりに <div> 要素を使用するかどうかは、あなた次第です。
「レイアウト草案」にはナビゲーション・バーがあります。
ナビゲーション・バーの場合、リンクの順序なしリストが使用できます：
<!-- Navigation -->
<nav>
<ul class="w3-navbar w3-black">
<li><a
href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Band</a></li>
<li><a href="javascript:void(0)">Tour</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</nav>
ナビゲーション・リンクのコンテナとして、<nav> か <div> 要素を使用できます。
w3-navbar クラスは、ナビゲーション・リンクのスタイルを設定します。
w3-black クラスは、ナビゲーション・バーの色を定義します。
javascript:void(0) は、リンクされないようにします（プロジェクトが開発中のため）。
「レイアウトの草案」には「スライドショー」があります。
スライドショーには、<section> または <div> を画像コンテナとして使用できます：
<!-- Slide Show -->
<section>
<img class="mySlides" src="img_la.jpg"
style="width:100%">
<img class="mySlides" src="img_ny.jpg"
style="width:100%">
<img class="mySlides" src="img_chicago.jpg"
style="width:100%">
</section>
3 秒ごとに画像を変更するには、JavaScript を少し追加する必要があります：
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel,
3000);
}
「レイアウトの草案」を見ると、次のステップは article を作成することです。
先ず、バンド情報を設定する <section> か <div> 要素を作成します：
<section class="w3-container w3-center"
style="max-with:600px">
<h2 class="w3-wide">THE
BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
</section>
w3-container クラスは、標準のパディングを設定します。
w3-center クラスは、コンテンツを中央に配置します。
w3-wide クラスは、幅の広い見出しを設定します。
w3-opacity クラスは、テキストの透過度を指定します。
max-width スタイルは、バンドの description セクションの最大値を設定します：
次に、バンドを説明する段落を追加します：
<section class="w3-container w3-content w3-center"
style="max-with:600px">
<p class="w3-justify">
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
w3-justify クラスは、テキストの右と左のマージンを均等にします。
次に、各バンドメンバーに関する <article> または <div> を持つ、 <section> または <div> を作成します：
<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
<article class="w3-third">
<p>Paul</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
<article class="w3-third">
<p>Ringo</p>
<img src="img_bandmember.jpg" alt="Random
Name" style="width:100%">
</article>
</section>
最後に、<footer> または <div> クラスを使用してフッタを作成します：
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-black
w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i
class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
Powered by <a href="http://www.w3schools.com/w3css/default.html"
target="_blank">w3.css</a>
</p>
</footer>
fa fa クラスは、Font Awesome アイコンのクラスです。
このクラスを使用するには、Font Awesome ライブラリにリンクする必要があります：
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
アイコンの使用方法の詳細については、アイコン・チュートリアルをご覧ください。