２カラムのレスポンシブデザインページをゼロから作り上げていきます。
working.htmlから始めてみましょう。
01 新規ページを作る
working.htmlを開くと以下のようになっています
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
02 タイトルを入力
HTML
<title>働くぐんまちゃん</title>
03 ぐんまちゃん.txtのテキストをコピー＆ペースト
<body>～</body>の中へペースト
HTML
<body>
働くぐんまちゃん
群馬県庁前の芝生広場で働いているぐんまちゃんを見たことありますか。
群馬県のマスコットキャラクター、ぐんまちゃん達が乗った全自動芝刈り機で広場の芝生をきれいにしています。ぐんまちゃん達のおかげで芝生の管理費は１年で約200万円削減されたそうです。ありがとうぐんまちゃん！
ぐんまちゃん
ぐんま県のマスコットキャラクター／男の子、７歳らしい
みーみ
ぐんまちゃんのおともだち／女の子、ピンク
あおま
ぐんまちゃんのおともだち／男の子、ブルー
ともだち
ぐんまちゃん
みーみ
あおま
Working Gunma-chan
</body>
04 head内にCSSをリンクさせる
HTML
<title>働くぐんまちゃん</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/working.css">
</head>
05 working.cssを開いて bodyのCSSを設定
スタイルシート（CSS）のトップには文字コードが入っています。
@charset "utf-8";
この下にbodyの設定を書いていきます。
CSS
body {
font-family: sans-serif;
background-color: #b0e0e6;
font-size: 16px;
line-height: 1.8;
color:#252525;
}
06 working.cssに .containerのCSSを設定、 テキスト全部を.containerで囲む
HTML
<body>
<div class="container">
テキスト全部を囲む
</div>
</body>
CSS
.container {
margin: 0 auto 0 auto;
max-width: 900px;
background-color: #fff;
}
07 headerのCSSを設定、 テキスト「働くぐんまちゃん」をheaderで囲む
最初のワード「働くぐんまちゃん」は見出し1に使うため<h1>～</h1>で囲む（tags surrounding a string）
HTML
<header>
<h1>働くぐんまちゃん</h1>
</header>
CSS
header{
background-color:#00bfff;
padding: 20px;
}
08 footerのCSSを設定、一番下の「Working Gunma-chan」を footerで囲む
一番下ののワード「Working Gunma-chan」は特殊文字のコピーライト©を付けるここを参考にしてください
HTML
<footer>© Working Gunma-chan</footer>
CSS
footer{
background-color:#00bfff;
padding: 10px;
text-align: center;
}
09 <p>～</p>のマークアップ、<h2>～</h2>、<h3>～</h3>のマークアップ
HTML
<p>群馬県庁前の芝生広場で働いているぐんまちゃんを見たことありますか。<br>
群馬県のマスコットキャラクター、ぐんまちゃん達が乗った全自動芝刈り機で広場の芝生をきれいにしています。ぐんまちゃん達のおかげで芝生の管理費は１年で約200万円削減されたそうです。ありがとうぐんまちゃん！</p>
<br>
<h2>ぐんまちゃん</h2>
<p>ぐんま県のマスコットキャラクター／男の子、７歳らしい</p>
<h2>みーみ</h2>
<p>ぐんまちゃんのおともだち／女の子、ピンク</p>
<h2>あおま</h2>
<p>ぐんまちゃんのおともだち／男の子、ブルー</p>
<h3>ともだち</h3>
ぐんまちゃん
みーみ
あおま
10 working.cssに h1、h2，h3のCSSを設定する
見出しのデザインは自由に変更してOKです
CSS
h1 {
text-align: center;
}
h2 {
margin-top: 20px;
padding-bottom: 5px;
border-bottom: 2px solid #87ceeb;
}
h3 {
color:deepskyblue;
text-align: center;
}
11 working.cssに２カラムのCSSを設定する
CSS
section {
display: flex;
flex-flow: column;
}
main {
padding: 20px;
}
aside {
padding: 20px;
}
12 section、main、asideのタグで各カテゴリーを囲む
HTML
<section>
<main>
<p>群馬県庁前の芝生広場で働いているぐんまちゃんを見たことありますか。<br>
群馬県のマスコットキャラクター、ぐんまちゃん達が乗った全自動芝刈り機で広場の芝生をきれいにしています。ぐんまちゃん達のおかげで芝生の管理費は１年で約200万円削減されたそうです。ありがとうぐんまちゃん！</p>
<br>
<h2>ぐんまちゃん</h2>
<p>ぐんま県のマスコットキャラクター／男の子、７歳らしい</p>
<h2>みーみ</h2>
<p>ぐんまちゃんのおともだち／女の子、ピンク</p>
<h2>あおま</h2>
<p>ぐんまちゃんのおともだち／男の子、ブルー</p>
</main>
<aside>
<h3>ともだち</h3>
ぐんまちゃん
みーみ
あおま
</aside>
</section>
13 レスポンシブにするためにhead内にビューポートのメタタグを入れる
詳しくは「HTMLの基本とCSS／レスポンシブ化」をチェック
HTML
<meta charset="utf-8">
<title>働くぐんまちゃん</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
14 working.cssに メディアクエリで2カラムの設定をする（レスポンシブ対応用）
CSS
@media only screen and (min-width: 768px) {
section {
flex-flow: row;
}
main {
flex: 1 1 auto;
order: 2;
}
aside {
flex: 0 0 200px;
order: 1;
}
}
max-width: 768pxは 0～768まで
min-width: 768pxは 768～ブラウザ幅いっぱい
flex-flow:row; （左から右へ）
flex:1 1 auto; （フレキシブル） 0 0 は固定
order:1; （順番左から）
15 画像を入れていく
HTML
h1は画像に変更
<h1><img src="img/logo.png" alt="働くぐんまちゃん"></h1>
mainの下
<main>
<p><img src="img/hiroba.jpg" alt="県庁広場"></p>
<p>群馬県庁前の芝生広場で～
各紹介テキストの下へも ph1～ph4.png alt＝”～”も忘れずに
<p>ぐんま県のマスコットキャラクター／男の子、７歳らしい</p>
<p><img src="img/ph1.jpg" alt="ぐんまちゃん"></p>
<p>ぐんまちゃんのおともだち／女の子、ピンク</p>
<p><img src="img/ph2.jpg" alt="みーみ"></p>
<p>ぐんまちゃんのおともだち／男の子、ブルー</p>
<p><img src="img/ph3.jpg" alt="あおま"></p>
16 ジャンプリンクを設定するために<h1>と<h2>に id をつける
HTML
<h1 id="top"> ・・・header
<h2 id="g1"> ・・・ぐんまちゃん
<h2 id="g2"> ・・・みーみ
<h2 id="g3"> ・・・あおま
※「id」名は必ずアルファベットの小文字から
1d はエラーになります。
dreamweaver:プロパティのIDで入力可
17 大きい画像をレスポンシブにする
CSS
img{
max-width:100%;
height:auto;
}
18 サイドのテキストをリストにする
<aside>～</aside>のテキストをリストにする（参考ページ）
HTML
<aside>
<h3>ともだち</h3>
<ul>
<li>ぐんまちゃん</li>
<li>みーみ</li>
<li>あおま</li>
</ul>
</aside>
- ぐんまちゃん
- みーみ
- あおま
19 リストにリンクを付ける
リスト内のテキストには<h2>などに付けた「id」へジャンプするようリンクを設定する
HTML
<ul>
<li><a href="#g1">ぐんまちゃん</a></li>
<li><a href="#g2">みーみ</a></li>
<li><a href="#g3">あおま</a></li>
</ul>
dreamweaver:プロパティのリンクで入力可
20 リストをボタンにデザインする
ここでは「HTMLの基本とCSS／ボタンを作る」の中から「bear」を参考、自由にアレンジしてください
HTML
<ul class="btn">
<li><a href="#g1">ぐんまちゃん</a></li>
<li><a href="#g2">みーみ</a></li>
<li><a href="#g3">あおま</a></li>
</ul>
CSS
.btn {
margin: 0;
padding: 0;
list-style-type: none;
}
.btn li a {
display: block;
background: #ff6347;
padding: 10px 8px;
color: #fff;
text-decoration: none;
text-align: center;
margin-bottom: 15px;
border-radius: 10px;
}
.btn li a:hover {
background: #b22222;
color: #fff;
}
21 画像をセンターに配置する
テキストや写真をセンターへそろえる為のCSSをいれます
CSS
.naka{
text-align: center;
}
バランスよくするために、画像をセンターへ移動させます
ここでは<p>タグにセンター指定したクラス名を使います。それぞれの画像にセンター指定してください。
HTML
<p class="naka"><img src="img/ph1.png" alt="ぐんまちゃん"></p>
<p class="naka"><img src="img/ph2.jpg" alt="みーみ"></p>
<p class="naka"><img src="img/ph3.jpg" alt="あおま"></p>
22 PAGE TOPのスクロールボタンを設置する
今回はHTMLとCSSだけでボタンを作成、色やテキストなど自由に変更してください
「HTMLの基本とCSS／PAGE TOPボタンを作る」（js使用）のページも参考にしてください。
CSS
#page_top{
width: 100px;
height: 40px;
position: fixed;
right: 0;
bottom: 10px;
background: #007ab5;
opacity: 0.6;
}
#page_top a{
position: relative;
display: block;
width: 100px;
height: 40px;
text-decoration: none;
}
#page_top a::after{
content: '↑ PAGE TOP';
font-size: 14px;
font-weight: bold;
color: #fff;
position: absolute;
top: 10px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}
HTML
<div id="page_top"><a href="#top"></a></div>
<footer>©Working Gunma-chan</footer>
23 スムーススクロール
リンクボタンをクリックでスムースにページ内移動させます
CSS
html{
scroll-behavior: smooth;
}