方法-ウェブサイトを作成する
すべてのデバイス、PC、ラップトップ、タブレット、および電話で機能するレスポンシブWebサイトを作成する方法を学びます。
ゼロからウェブサイトを作成する
「レイアウトドラフト」
Webサイトを作成する前に、ページデザインのレイアウトドラフトを作成することをお勧めします。
ナビゲーションバー
サイドコンテンツ
いくつかのテキストいくつかのテキスト。
メインコンテンツ
いくつかのテキストいくつかのテキスト。
いくつかのテキストいくつかのテキスト。
いくつかのテキストいくつかのテキスト。
フッター
最初のステップ-基本的なHTMLページ
HTMLはWebサイトを作成するための標準のマークアップ言語であり、CSSはHTMLドキュメントのスタイルを記述する言語です。HTMLとCSSを組み合わせて、基本的なWebページを作成します。
注: HTMLとCSSがわからない場合は、HTMLチュートリアルを読むことから始めることをお勧めします。
例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
例の説明
<!DOCTYPE html>
宣言は、このドキュメントをHTML5として定義しています- この
<html>
要素は、HTMLページのルート要素です。 - 要素には
<head>
、ドキュメントに関するメタ情報が含まれています - この
<title>
要素は、ドキュメントのタイトルを指定します <meta>
要素は、文字セットをUTF-8として定義する必要があります- name = "viewport"の
<meta>
要素により、すべてのデバイスと画面解像度でWebサイトの見栄えが良くなります <style>
要素には、Webサイトのスタイル(レイアウト/デザイン)が含まれています<body>
要素には、表示されているページコンテンツが含まれています<h1>
要素は大きな見出しを定義します<p>
要素は段落を定義します
ページコンテンツの作成
ウェブサイトの要素内で、<body>
「レイアウトドラフト」を使用して以下を作成します。
- ヘッダー
- ナビゲーションバー
- メインコンテンツ
- サイドコンテンツ
- フッター
ヘッダ
ヘッダーは通常、Webサイトの上部(または上部のナビゲーションメニューのすぐ下)にあります。多くの場合、ロゴまたはWebサイト名が含まれています。
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
次に、CSSを使用してヘッダーのスタイルを設定します。
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
ナビゲーションバー
ナビゲーションバーには、訪問者がWebサイトをナビゲートするのに役立つリンクのリストが含まれています。
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
CSSを使用してナビゲーションバーのスタイルを設定します。
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
コンテンツ
「サイドコンテンツ」と「メインコンテンツ」に分割された2列のレイアウトを作成します。
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
CSSFlexboxを使用してレイアウトを処理します。
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
次に、メディアクエリを追加して、レイアウトをレスポンシブにします。これにより、すべてのデバイス(デスクトップ、ラップトップ、タブレット、電話)でWebサイトの見栄えが良くなります。ブラウザウィンドウのサイズを変更して、結果を確認します。
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
ヒント:別の種類のレイアウトを作成するには、フレックス幅を変更するだけです(ただし、合計が100%になるようにしてください)。
ヒント: @mediaルールがどのように機能するのか疑問に思いますか?詳細については、CSSメディアクエリの章をご覧ください。
ヒント:フレキシブルボックスレイアウトモジュールの詳細については、CSSフレックスボックスの章をお読みください。
ボックスサイジングとは何ですか?
3つのフローティングボックスを簡単に並べて作成できます。ただし、各ボックスの幅を拡大するもの(パディングや境界線など)を追加すると、ボックスが壊れます。このbox-sizing
プロパティを使用すると、ボックスの全幅(および高さ)にパディングと境界線を含めることができ、パディングがボックスの内側に留まり、壊れないようになります。
ボックスサイズ設定プロパティの詳細については、CSSボックスサイズ設定チュートリアルをご覧ください。
フッター
最後に、フッターを追加します。
<div class="footer">
<h2>Footer</h2>
</div>
そしてそれをスタイリングします:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
おめでとう!レスポンシブウェブサイトをゼロから構築しました。
W3Schoolsスペース
独自のWebサイトを作成し、.htmlファイルをホストする場合は、 W3schoolsSpacesと呼ばれる無料のWebサイトビルダーを試してください。