1カラムのレスポンシブデザインページ「犬の会社」
ヘッダー内にタイトルとハンバーガーボタンを横並、
画像の横並び、マップの挿入など学習します。
Brackets ➡ ファイル ➡ フォルダーを開く／15dog
index.htmlを開く
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
HTML
<head>
<meta charset="utf-8">
<title>Dog Company</title>
</head>
スマホ・タブレット表示にも対応した「レスポンシブデザイン」のサイトを作るためには、
viewport設定タグを書いておく必要があります。
詳しくは「HTMLの基本とCSS／レスポンシブ化」をチェック
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dog Company</title>
</head>
CSSフォルダーへ2つのスタイルシートが入っているので、リンクさせます。
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dog Company</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
dreamweaver:
ツール→CSS→スタイルシートの添付
スタイルシート（CSS）のトップには文字コードを入れておく
@charset "utf-8";
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
background-color: oldlace;
}
CSSに.containerの設定、index.htmlの<body>～</body>内に.containerを入れます
HTML
<body>
<div class="container">
</div>
</body>
CSS
.container {
margin: 0 auto;
max-width: 1000px;
}
1カラムのレイアウト
1000pxの.container内に「header」「nav」「main」「footer」を作成していきます。
見やすくするために、各タグの間にスペースを入れてもOKです。
HTML
<body>
<div class="container">
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
CSS
header {
background-color: #dbebc4;
}
nav {
background-color: #336600;
}
main {
padding: 30px;
background-color: #fff;
}
footer {
padding: 20px 16px 10px 16px;
background-color: #6b8e23;
}
<div class="container">の下へ<header>～</header>をマークアップ。
<header>の中に <div class="header-inner">～</div>をマークアップ。
今回はheaderのCSSは書かず、headerの中に入れる.header-innerというCSSを設定します。
.header-innerで背景カラーやPadding、横並びの指定などをしています。
<div>と<span>とは
「div」は特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。同じ意味を持つタグとして<span>タグがありますが、<span>タグはインライン要素で文章の一部として利用されます。
HTML
<body>
<div class="container">
<header>
<div class="header-inner">
</div>
</header>
</div>
</body>
CSS
.header-inner {
padding: 10px 10px 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
<h1>～</h1>に見出しを入力、<h1>のカラーはCSSで設定。
<button>～</button>のマークアップと
ハンバーガーメニューボタンのCSSの設定をします。
HTML
<header>
<div class="header-inner">
<h1>Dog Company</h1>
<button class="hamburger" id="mobile-menu"></button>
</div>
</header>
CSS
.hamburger {
border: none;
width: 50px;
height: 50px;
background: url(../images/btn.png) no-repeat;
background-size: contain;
}
ハンバーガーメニューボタンが開閉するよう
ページ下部</body>の上へJavaScriptプログラムを読み込ませる。
HTML
<script src="script.js"></script>
</body>
</html>
ナビゲーションメニューを入れていきます。メニュー項目は自由に変更してください。
HTML
<nav>
<ul class="navbar">
<li><a href="index.html">トップ</a></li>
<li><a href="second.html">会社案内</a></li>
<li><a href="second.html">製品案内</a></li>
<li><a href="second.html">サポート</a></li>
<li><a href="second.html">お問い合わせ</a></li>
</ul>
</nav>
CSS
.navbar {
display: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.navbar li a {
display: block;
padding: 10px 40px;
color: #fff;
text-decoration: none;
border-right:1px solid #cccccc;
}
.navbar li a:hover {
background: #669900;
}
PCで見た時はハンバーガーメニューを表示させない、メニューは横並びの設定をします。
CSS
@media only screen and (min-width: 768px) {
.hamburger {
display: none;
}
.navbar {
display: flex !important;
}
}
ナビゲーションのアレンジ
display: flex !important の下へ追加（ついか）する
（例）justify-content: center;
右よせ／flex-end
中央／center
均等配置1／space-around
均等配置2／space-between
１つだけ左寄せ／justify-content: 〇〇〇はDelete
.navbar li:first-child {
margin-right:auto;
}
<main>の下に画像を入れます。実際の画像サイズは1200×500pxですが
ここでは画像のリサイズをしないで、width="940" height="392"と入れます。
レスポンシブサイトなので画像もブラウザ幅に対応させるため、imgのCSS指定をします。
詳しくは ※ HTMLの基本とCSS ➡ レスポンシブ化
HTML
<main>
<p><img src="images/topimg.jpg" width="940" height="392" alt="dog company"></p>
CSS
img{
max-width:100%;
height:auto;
}
自由に文章を変更・追加してください。
HTML
<p><img src="images/topimg.jpg" width="940" height="392" alt="dog company"></p>
<p>Dog Companyではおいしいドッグフードの生産と販売をしています。添加物を使わないナチュラル志向にピッタリなフードです。<br>信頼されるドッグフードを提供していくために犬の会社ではドッグフードの安全性・品質向上を行い、犬の生活の質を高め、幸せな暮らしを考えています。</p>
14で入力した文章の下へ<h2>～</h2>の見出しを入れます
<h2>のCSSでデザインします。自由に変更してください。
HTML
<p>Dog Companyではおいしいドッグフードの生産と販売をしています。添加物を使わないナチュラル志向にピッタリなフードです。<br>
信頼されるドッグフードを提供していくために犬の会社ではドッグフードの安全性・品質向上を行い、犬の生活の質を高め、幸せな暮らしを考えています。</p>
<h2>スタッフ紹介</h2>
CSS
h2 {
margin-top: 30px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px dashed #9fc24d;
color: #006400;
font-size: 120%;
}
文章や画像や画像などのグループを横に並べるレイアウトにFlexboxを使います。
.itemという横の幅280pxのブロック（グループ）を
.bigbox
の中に入れます。.bigboxでは中に入っている.itemが横に並ぶようにdisplay:flex;を指定しています。
HTML
<div class="bigbox">
<div class="item"><img src="images/dog1.jpg" alt="Boss"><br>社長</div>
<div class="item"><img src="images/dog2.jpg" alt="General manager"><br>部長</div>
<div class="item"><img src="images/dog3.jpg" alt="Secretary"><br>秘書</div>
</div>
CSS
.item {
width: 280px;
text-align: center;
}
.bigbox {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.bigbox .item {
margin: 10px
}
次にマップ用の見出しを入れます
HTML
<div class="bigbox">
<div class="item"><img src="images/dog1.jpg" alt="Boss"><br>社長</div>
<div class="item"><img src="images/dog2.jpg" alt="General manager"><br>部長</div>
<div class="item"><img src="images/dog3.jpg" alt="Secretary"><br>秘書</div>
</div>
<h2>アクセスマップ</h2>
<h2>の下へgoogleマップやYoutubeを入れるためのCSS書きます
HTML
<h2>アクセスマップ</h2>
<div class="ggmap">
</div>
</html>
CSS
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
コピーした<iframe～>～</iframe>のコードをggmapの中にペーストしてください。
HTML
<h2>アクセスマップ</h2>
<div class="ggmap">
<iframe・・・・・・>～</iframe>
</div>
</html>
GooglemapやYoutubeをWEBページへ入れるには挿入したいページを開きます。
「共有」➡「埋め込む」➡「コピー」➡「ペースト」
サイズ変更や詳しい方法はこちら「GoogleMapを埋め込む」
※文字化けしないように「©」はコード「©」を使用しています。
CSS
.copyright {
margin: 0;
text-align: center;
}
HTML
<footer>
<p class="copyright">©Dog Company</p>
</footer>
完成したindex.htmlを開いて、
ファイル ➡ 名前をつけて保存（別名で保存）
任意の名前をつけてください。
（例）second.html／company.html／map.htmlなど
※ファイル名：英数字の小文字と数字、スペースを入れない
別名で保存したページは必要なところを書き換えて作成
リンクは新しく作ったファイル名のURLに変更します。