1カラムのレスポンシブデザインページ「ネコの会社」
ナビゲーションメニューを作成します
01 新規ページを作る
Brackets ➡ ファイル ➡ フォルダーを開く／neko
index.htmlを開く
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
02 head内にタイトルを入力
HTML
<head>
<meta charset="utf-8">
<title>Cat's Company</title>
</head>
03 head内にビューポートのメタタグを入れる
スマホ・タブレット表示にも対応した「レスポンシブデザイン」のサイトを作るためには、
viewport設定タグを書いておく必要があります。
詳しくは「HTMLの基本とCSS／レスポンシブ化」をチェック
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cat's Company</title>
</head>
04 head内にCSSをリンクさせる
CSSフォルダーへ2つのスタイルシートが入っているので、リンクさせます。
HTML
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
dreamweaver:
ツール→CSS→スタイルシートの添付
05 style.cssを開いて bodyのCSSを設定
スタイルシート（CSS）のトップには文字コードを入れておく
@charset "utf-8";
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
}
06 .containerのCSSを設定
CSSに.containerの設定、index.htmlの<body>～</body>内に.containerを入れます
HTML
<body>
<div class="container">
</div>
</body>
CSS
.container {
margin: 0 auto;
max-width: 800px;
}
1カラムのレイアウト
800pxの.container内に「header」「nav」「main」「footer」を作成していきます。
07 headerのCSSを設定
<header>のCSSを設定とマークアップ。
HTML
<body>
<div class="container">
<header>
</header>
</div>
</body>
CSS
header {
padding: 10px 0 5px 20px;
background: #f0e68c;
}
08 navのマークアップをする
HTML
<body>
<div class="container">
<header>
</header>
<nav>
</nav>
</div>
</body>
CSS
スタイルシートは15で設定します
09 mainのCSSを設定
<main>の設定とマークアップ
HTML
<body>
<div class="container">
<header>
</header>
<nav>
</nav>
<main>
</main>
</div>
</body>
CSS
main {
padding: 20px;
background: #fffde3;
}
10 footerのCSSを設定
HTML
<body>
<div class="container">
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
CSS
footer {
padding: 10px;
background: #8b4513;
color: #fff;
}
11 <h1>～</h1>をheaderに入れる
<h1>をheader内にマークアップして、今回はテキストの代わりに画像を入れます。
HTML
<header>
<h1><img src="images/logo.png" alt="Cat's Company"/></h1>
</header>
12 <main>～</main>に見出しと画像を入れる
自由にテキストを変更したり、追加してOK。
HTML
<main>
<h2>Let's do it!</h2>
<p><img src="images/punch.gif" alt="がんばろう！"/></p>
<br>
<br>
</main>
13 copyrightのCSSを設定、<footer>にテキストを入れる
※文字化けしないように「©」はコード「©」を使用しています。
CSS
.copyright {
margin: 0;
text-align: center;
}
HTML
<footer>
<p class="copyright">©Cat's Company</p>
</footer>
14 ナビゲーションメニューの作成
まずはPC用のメニューのマークアップをします。
<nav>～</nav>の中に入れましょう。
HTML
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
</ul>
</nav>
15 CSSでナビゲーションのデザイン
ナビゲーションのデザイン(CSS）をして、対応するようマークアップします。
HTML
<nav>
<ul class="navbar">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
</ul>
</nav>
CSS
.navbar {
display: flex;
flex-wrap:wrap;
margin: 0;
padding: 0;
list-style-type: none;
background: #665a1a;
}
.navbar li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
background: #622d18;
}
16 ナビゲーションの並びを変更する/justify-content
例えば、センター揃えにしたい時は
justify-content:center; を追加します。
CSS
.navbar {
display: flex;
flex-wrap:wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
background: #665a1a;
}
.navbar li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
background: #622d18;
}
17 その他のアレンジ
センター揃えの他に右寄せ、均等配置など自由に変更できます。
右よせ／ justify-content:flex-end
中央／ justify-content:center
均等配置1／ justify-content:space-around
均等配置2／ justify-content:space-between
18 １つだけ左寄せ
上のように１つだけ左に、他は右に配置する場合
削除
justify-content: 〇〇〇
追加
.navbar li:first-child {
margin-right:auto;
}
CSS
.navbar {
display: flex;
flex-wrap:wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
background: #665a1a;
}
.navbar li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.navbar li a:hover {
background: #622d18;
}
.navbar li:first-child {
margin-right:auto;
}