レスポンシブWebデザインの基礎講座【職業訓練校で学んだサンプル】

レスポンシブWebデザインのHTML、CSS、JavaScriptを知りたい
職業訓練校のレスポンシブWebデザインの授業に興味がある

この記事はそんな方へ向けて書いています。

本記事では、職業訓練校で学んだレスポンシブWebデザインのサンプル（HTML、CSS、JavaScript）を公開します。
コードにコメントアウトを書いていますので、初学者でもわかりやすい記事内容です。

記事後半では、職業訓練校でのレスポンシブWebデザイン学習メモをまとめました。

記事の信頼性

2019年1月からWordPressでブログを開設（最高で月間62,000PV）
2021年6月からWebデザインの職業訓練校6ヶ月コースを学び、修了
使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」

なおレスポンシブWebデザインの「初級編」は「レスポンシブWebデザインの作り方の初級講座【職業訓練校での学び】」で解説しています。

Contents

レスポンシブWebデザインの基礎講座【サンプル：topページのHTML、CSS】
【レスポンシブWebデザインのサンプル】aboutページのHTML、CSS
【レスポンシブWebデザインのサンプル】menuページのHTML、CSS
【レスポンシブWebデザインのサンプル】cakeページのHTML、CSS
【レスポンシブWebデザインのサンプル】lessonページのHTML、CSS
- lessonページのindex.html
- lessonページのcss
【レスポンシブWebデザインのサンプル】contactページのHTML、CSS
- contactページのindex.html
- contactページのcss
レスポンシブWebデザインの学習メモ
まとめ：感想と気づき

レスポンシブWebデザインの基礎講座【サンプル：topページのHTML、CSS】

「職業訓練校8〜12日目につくったケーキ屋のサイト」をレスポンシブWebデザインで作り直しました。

topページのHTML・CSS、リセットCSS、共通のCSSのサンプルを掲載します。

topページのindex.html

index.html

<!DOCTYPE html>
<html lang="ja">
　<head>
　<meta charset="UTF-8">
　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　<title>新宿駅西口から徒歩3分のケーキ屋 | 洋菓子店○○</title>
　<meta name="description" content="新宿駅西口から徒歩3分のケーキ屋 | 洋菓子店○○">
　<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
　<link rel="stylesheet" href="css/common/rest.css">
　<link rel="stylesheet" href="css/common/common.css">
　<link rel="stylesheet" href="css/page/top.css">
</head>

<body id="top" class="home">
　<header>
　　<div class="inner">
　　　<h1 class="log">
　　　　<a href="./"><img src="img/logo.png" alt="洋菓子店〇〇のロゴ"></a>
　　　</h1>
　　　<div class="menu_btn">　
　　　　<span></span>
　　　　<span></span>
　　　　<span></span>
　　　</div>
　　　<nav>
　　　　<div class="menu_body">
　　　　　<ul>
　　　　　　<li><a href="#">当店について</a></li>
　　　　　　<li><a href="#">メニュー</a></li>
　　　　　　<li><a href="#">お菓子教室</a>
　　　　　　　<ul>
　　　　　　　　<li><a href="#">ご参加の流れ</a></li>
　　　　　　　　<li><a href="#">参加者の声</a></li>
　　　　　　　　<li><a href="#">お申込み</a></li>
　　　　　　　</ul>
　　　　　　</li>
　　　　　</ul>
　　　　</div>
　　　</nav>
　　</div>
　</header>

　<div class="key">
　　<div class="inner">
　　　<p class="sp"><img src="img/logo_white.png" alt=""></p>
　　　<div class="pc">
　　　　<p>おいしいケーキを<br>
　　　　1人でも多くの<span class="break">お客様に</span><br> /* spanタグはインライン要素 */
　　　　召し上がって<span class="break">いただきたい</span><br>
　　　　<span class="sub_title">それがケーキ屋○○の想いです</span>
　　　　</p>
　　　</div>
　　</div>
　</div>

　<div class="scroll">
　　<p>
　　　<span class="material-icons"> < !--ここから3行がGoogleiconfontのコピー -->
　　　　expand_more
　　　</span>
　　</p>
　　<p>scroll</p>
　</div>

<main class="top_main">
　　<section class="top_about row">
　　　<div class="inner">
　　　　<h2 class="title">ケーキ屋○○について</h2>
　　　　　<p>オープンして20年、振りかえれば長い道のりでした。それは、お客さまのよろこぶ顔を思い浮かべながら進んできた一歩一歩の積みかさね。変わらない、味とこだわり。進化しつづける、お客様へのサービス。どちらも大切にしてきました。これからもケーキ屋○◯は、お客様の心に懐かしく残る様な、そんな洋菓子店であり続けます。</p>
　　　　　<p class="btn"><a href="#">ケーキ屋についてもっと見る</a></p>
　　　</div>
　　</section>

　　<section class="top_menu row">
　　　<div class="inner">
　　　　<h2 class="title">メニュー</h2>
　　　　<div>
　　　　　<a href="#">
　　　　　　<figure><img src="img/menu_cake01.jpg" alt="モンブラン">
　　　　　　　<figcaption>モンブラン</figcaption>
　　　　　　</figure>
　　　　　</a>
　　　　　<a href="#">
　　　　　　<figure><img src="img/menu_cake02.jpg" alt="ショートケーキ">
　　　　　　　<figcaption>ショートケーキ</figcaption>
　　　　　　</figure>
　　　　　</a>
　　　　　<a href="#">
　　　　　　<figure><img src="img/menu_cake03.jpg" alt="チョコレートケーキ">
　　　　　　　<figcaption>チョコレートケーキ</figcaption>
　　　　　　</figure>
　　　　　</a>
　　　　　<a href="#">
　　　　　　<figure><img src="img/menu_cake04.jpg" alt="チーズケーキ">
　　　　　　　<figcaption>チーズケーキ</figcaption>
　　　　　　</figure>
　　　　　</a>
　　　　</div>
　　　　<p class="btn"><a href="#">メニュー</a></p>
　　　</div>
　　</section>

　　<section class="top_lesson row">
　　　<div class="inner">
　　　　<h2 class="title">お菓子教室について</h2>
　　　　<div>
　　　　　<p class="lesson_img">
　　　　　　<img src="img/about.jpg" alt="お菓子教室について">
　　　　　</p>
　　　　　<p class="lesson_text">毎月第1・第2土曜日にお菓子教室を開催しています。<br>
　　　　　丁寧にレクチャーしますので、小さいお子さんでも安心して参加していただけます。<br>
　　　　　家族の楽しい思い出作りに、ぜひご参加ください。</p>
　　　　</div>
　　　　<p class="btn"><a href="#">メニュー</a></p>
　　　</div>
　　</section>

<div class="bottom_contents row pb0">
　　<div class="inner">
　　　<section class="top_voice">
　　　　<h2 class="title">お客さまの声</h2>
　　　　<dl> 
　　　　　<dt><img src="img/voice01.jpg" alt="お客さまの声"></dt>
　　　　　<dd>
　　　　　　<p><time datetime="2021-07-31">2021年7月31日</time>参加</p>
　　　　　　
　　　　　　<p>結城様ご家族</p>
　　　　　　<p>おもしろかったです。初めての体験で新鮮でした。</p>
　　　　　</dd>
　　　　</dl>
　　　　<p class="btn"><a href="#">参加者の声をもっと見る</a></p>
　　　</section>

　　　<section class="top_info">
　　　　<h2 class="title">ケーキ屋からのお知らせ</h2>
　　　　<dl>
　　　　　<dt><time datetime="2021-08-02">2021年8月2日</time></dt>
　　　　　<dd><a href="#">緊急事態宣言について</a></dd>
　　　　　<dt><time datetime="2021-07-30">2021年7月30日</time></dt>
　　　　　<dd><a href="#">新メニューを発表します</a></dd>
　　　　　<dt><time datetime="2021-07-21">2021年7月21日</time></dt>
　　　　　<dd><a href="#">新スタッフのブログ更新</a></dd>
　　　　　<dt><time datetime="2021-07-08">2021年7月8日</time></dt>
　　　　　<dd><a href="#">今月のおすすめ改善メニュー</a></dd>
　　　　</dl>
　　　　<p class="btn"><a href="#">参加者の声をもっと見る</a></p>
　　　</section>
　　</div>
　</div>
</main>

　　　<div class="footer_left">
　　　　<ul>
　　　　　<li><a href="#">当店について</a></li>
　　　　　<li><a href="#">メニュー</a></li>
　　　　　<li><a href="#">お菓子教室</a></li>
　　　　　<ul>
　　　　　　<li><a href="#">ご参加の流れ</a></li>
　　　　　　<li><a href="#">参加者の声</a></li>
　　　　　　<li><a href="#">お申し込み</a></li>
　　　　　</ul>
　　　　</ul>
　　　</div>

　　　<div class="footer_right">
　　　　<ul>
　　　　　<li><a href="#"><img src="img/icon_fb.png" alt="Facebook"></a></li>
　　　　　<li><a href="#"><img src="img/icon_tw.png" alt="Twitter"></a></li>
　　　　　<li><a href="#"><img src="img/icon_insta.png" alt="Instagram"></a></li>
　　　　</ul>
　　　　<dl>
　　　　　<dt>Address</dt>
　　　　　<dd>
　　　　　　<address>
　　　　　　　〒160-1234<br>
　　　　　　　東京都新宿区○○○
　　　　　　</address>
　　　　　</dd>
　　　　</dl>
　　　</div>

　　</div>
　　<p class="copy"><small>©ケーキ屋</small></p>
　</div>
</footer>

<p class="to_top">
　<a href="#top">
　　<span class="material-icons">
　　　expand_less /* topに戻る上向きのアイコン*/
　　</span>
　</a>
</p>

</body>
</html>

reset.css、common.css

reset.css

/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

:where(:not(iframe,canvas,img,svg,video):not(svg*)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}ol,ul{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}

reset.cssの作成手順

手順①：「reset css 2021」で検索し、下記サイトのCSSをコピー
手順②：reset.cssファイルを作成し、ペーストする
手順③：index.htmlの<head>部分に、linkで読み込む

» 参考：2021年、モダンブラウザに適したCSSリセットのまとめ

上記サイトじゃなくてもOKです。

たとえば、下記サイトなどでも有用できます。
使い方は「Rawをクリック → 全選択 → コピー → resetcssに貼り付け」です。
» 参考：https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css

common.css

@charset 'UTF-8'; /* 文字コード指定（セミコロン必須）*/

/* 主たるブレイクポイント（目安、決まりではない）
960px
520px
*/

/*=====
全クラス共通 & 汎用クラス
=====*/
html{
　font-size: 62.5%; /* ブラウザは標準16pxが多い → 0.625でかけると10px相当 → 10pxにすれば文字サイズはremでわかりやすくサイズアップできる */
　scroll-behavior: smooth;
}

body{
　font-size: 1.6rem;
　line-height: 2;
　font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Osaka', 'ＭＳＰゴシック', 'MS PGothic', sans-serif;
　color: #333;
　margin: 0;
}
/*ダブルクォートをシングルクォートに変える（ダブルの中にダブルは入れられないから）*/

a{
　text-decoration: none;
　color: #f77237;
}

a:hover{
　opacity: 0.6;
}

.inner{
　max-width: 1000px;
　margin-left: auto;
　margin-right: auto;
}
/* レスポンシブで横スクロールが出るのは良くない → max-widthを使う */

/* 左右に余白を取りたい */
@media screen and (max-width:960px){
　.inner{
　　padding-left: 5%;
　　padding-right: 5%;
　}
}/*======max-width:960px==========*/

img{
　vertical-align: bottom;
}
/* 画像と画像の隙間を消すために入れる */

.break{
　display: inline-block; /* <span>タグはインライン要素だからインラインブロックに変える → 画面が小さくなったときにちょうどよく改行される */
}

.title{
　text-align: center;
　font-size: 2.6rem;
　line-height: 1;
　margin-bottom: 30px;
　font-weight: normal;
}

.btn{
　margin: 0; /* <p>タグのmarginをとる*/
}

.btn a{
　background-image: linear-gradient(to right,#3cad5a,#307041);
　/*グラデーションを書くときに使用（線形グラデーション）*/
　/* 向き,最初の色,最後の色*/
　width:270px;
　display: block; /* aタグはインライン要素 */
　color:#fff;
　text-align: center;
　line-height: 70px;
　margin-left: auto;
　margin-right: auto;
}

.pb0{
　padding-bottom: 0!important;
}

/*===============
ヘッダー
===============*/
header{
　position: sticky; /* スクロールしても追尾する */
　top: 0;
　background-color: rgba(255, 255, 255, 0.3); /* 白、透明度0.3 */
　backdrop-filter: blur(10px); /* blur＝ぼかし→重なったところがぼける（pxが大きいほどぼかせる）*/
}

header .inner{
　display: flex;
　justify-content: space-between;
　align-items: center; / *ロゴとナビの高さを揃える（flex前提） */
}

header h1{
　margin: 0;
}

header ul{
　margin: 0;
　padding: 0;
}

header .menu_body > ul{
　display: flex;
}

header .menu_body > ul > li{
　margin-left: 30px;
}

header .menu_body > ul li ul{
　display: none;
} /* いったん消す → ホバーで出したいから */

header .menu_body > ul li:hover ul{
　display: block; /* カテゴリを下に出す */
　position: absolute; /* 高さをとる（positionとは要素の位置を決めるプロパティ）*/
}

@media screen and (max-width:960px){
　header nav{
　　position: fixed;
　　background-color: #faebdf;
　　top: 0;
　　left: 0;
　　width: 100%;
　　height: 100vh; /* vh=viewport height（表示領域）→ %にしてしまうとnavタグ分だけの指定 */
　　padding-top: 64px;
　　padding-left: 32px;
　　padding-right: 32px;
　　opacity: 0;
　　visibility:hidden; /* 後述の学習メモで詳細解説 */
　　transition: 0.5s;
　　}

header.on nav{ /* ハンバーガーメニューをクリックすると出てくる */
　visibility:visible;
　opacity: 1;
}

header .menu_body > ul{
　display: block;
　line-height: 7rem; /* スマホ用に押しやすく間隔をとる */
}

header .menu_body a{
　color: #666; /* グレー */
　display: block; /* 横でもクリックできるように */
}

header .menu_body > ul > li{
　margin-left: 0px;
　font-size: 3rem;
　border-bottom: 1px solid #666;
}

header .menu_body > ul > li:last-child{
　border-bottom: none;
}

header .menu_body > ul li ul{
　display: block;
　position: static; /* absoluteからstatic初期値に直す */
　font-size: 2rem;
　padding-left: 2rem;
}

header .menu_body > ul li ul li{
　border-bottom: 1px dotted #666;
}

header .menu_body > ul li ul li:first-child{
　border-top: 1px solid #666;
}

header .menu_btn{
　width: 24px;
　height: 24px;
　z-index: 100; /* 1でもいい、他にないz-indexがないから */
}

header .menu_btn span{
　display: block;
　height: 2px;
　width:100%;
　background-color: #333;
　transition: 0.3s;
}

header .menu_btn span:nth-child(2){
　transform: translateY(9px);
}

header .menu_btn span:last-child{
　transform: translateY(18px);
}

/*バッテンの考え方→まずは真ん中のバーを消す*/
header.on .menu_btn span:nth-child(2){
　display: none;
}

/*最下段バーを真ん中に移動*/
header.on .menu_btn span:last-child{
　transform: translateY(10px) rotate(-45deg);/*度=degree*/
}

/*最上段バーを真ん中に移動（移動する起点が違うから移動する量が違う*/
header.on .menu_btn span:first-child{
　transform: translateY(12px) rotate(45deg);
}
}/*======max-width:960px==========*/

/*===============
フッター
===============*/
footer{
　background-color: #f77237;
　margin-top: 150px;
　padding-top: 30px;
}

footer a {
　color: #fff;
}

footer ul{
　margin: 0;
　padding: 0;
　list-style: disc;
　list-style-position: inside;
　color: #fff;
}

footer ul ul{
　padding-left: 1.6rem;
}

footer .footer_logo{
　margin-bottom: 30px;
}

footer .footer_wrap{
　display: flex;
　justify-content: space-between;
}

footer .footer_right ul{
　list-style: none;
　display: flex;
}

footer .footer_right ul li{
　margin-right: 10px;
}

footer .footer_right dl{
　color: #fff;
}

footer .footer_right dt{
　border-bottom: 1px solid #fff;
}

footer .footer_right dl dd{
　margin: 0;
　line-height: 1.5;
}

footer p{
　margin: 0;
}

footer .copy{
　color: #fff;
　text-align: center;
}

@media screen and (max-width:960px){
　footer .footer_logo{
　　text-align: center;
　}

footer .footer_wrap{
　flex-direction: column-reverse; /* 縦にして逆にする */
}

footer .footer_right ul{
　justify-content: center;
}

footer .footer_right ul li:last-child{
　margin-right: 0;
}

footer .footer_left a{
　display: block;
}

footer .footer_left ul{
　list-style: none;
　font-size: 2.1rem;
　line-height: 3;
}

footer .footer_left > ul > li:not(:last-child){
　border-bottom: 1px solid #fff;
}

footer .footer_left > ul > li > ul > li{
　border-bottom: 1px dotted #fff;
}

footer .footer_left > ul > li > ul > li:first-child{
　border-top: 1px dotted #fff;
}
}/*======max-width:960px==========*/

topページのcss

top.css

/*=======
キービジュアル
=======*/
.key{
　background-image: url(../../img/key.jpg);
　height:80vh;
　background-size: cover; /*元画像の縦横比は保持して、要素をちょうどよく覆うサイズに*/
　background-position: center center;
　margin-bottom: 30px;
}

.key .sp{
　display: none ; /*スマホ版は表示させない*/
}

.key .inner{
　display: table;
　height: 80vh;
}
/*tableは中の要素の横幅、高さの思い思いをとるのが特徴*/

.key .inner .pc{
　vertical-align: middle; /*効かない → どうにかしたい → テーブルセルにするのがいい*/
　display: table-cell;
　text-align: center;
}
/*垂直方向の真ん中にするのは面倒だからtable-cellを使ってセンタリング*/

.key .inner .pc p{
　color: #fff;
　background-color: rgba(247, 114, 55, 0.5);
　font-size: 4.6rem;
　line-height: 1.5;
　font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳＰ明朝', 'ＭＳ明朝', serif;
　padding: 46px;
}

.key .inner .pc p span.sub_title{
　font-size: 2.1rem;
}

/*レスポンシブは大きい順に書かないとダメ*/
@media screen and (max-width:750px){
　.key .inner .pc p{
　　font-size: 3.6rem;
　}
}/*======max-width:750px==========*/

@media screen and (max-width:520px){
　.key .sp{
　　display: table-cell;
　　vertical-align: middle;
　}
　.key .inner .pc{
　　display: none;
　}
}/*======max-width:520px==========*/

/*=========
スクロール
=========*/
/*トップページにしかスクロールアイコンはないのでtop.cssに書いていく*/
.scroll{
　text-align: center;
}

.scroll p{
　margin: 0;
　line-height: 1;
}

.scroll p span{
　border: 1px solid #707070;
　border-radius: 50%;
}

/*=========
当店について
=========*/
.top_main .row{
　padding-top: 70px;
　padding-bottom: 70px;
}

.top_about h2+p{ /*h2の隣のpタグ*/
　max-width: 600px;
　margin-left: auto;
　margin-right: auto;
　margin-bottom: 30px;
　text-align: justify; /*右端の文字のズレを直す*/
}

/*=========
メニュー
=========*/
.top_menu .inner div{
　display: flex;
　justify-content: space-between;
　flex-wrap: wrap; /*flexアイテムをサイズダウン時に折り返す*/
　margin-bottom: 30px;
}

/* 上記だけでデフォルトのcssが効き、良さそうに見えるがいったん↓まっさらにする（padding0 margin0）*/

.top_menu .inner div a{
　width: 205px;
}

.top_menu .inner div figure{
　padding: 0;
　margin: 0;
}

.top_menu .inner div figcaption{
　text-align: center;
}

@media screen and (max-width:960px){
　.top_menu .inner div a{
　width: 48%; /*50%にすると真ん中の隙間がなくなる*/
　margin-bottom: 30px;
　}
}/*======max-width:960px==========*/

@media screen and (max-width:520px){
　.top_menu .inner div a{
　width: 60%;
　margin-left: auto;
　margin-right: auto;
　}
}/*======max-width:520px==========*/

/*=========
お菓子教室について
=========*/
.top_lesson{
　background-color: rgba(247, 114, 55, 0.5);
}

.top_lesson .inner div{
　display: flex;
　justify-content: space-between;
　margin-bottom: 30px;
}

.top_lesson .inner div .lesson_img{
　width: 40%; /*レスポンシブなので％が良い*/
　margin: 0;
}

.top_lesson .inner div .lesson_text{
　width: 55%;
　margin: 0;
}

@media screen and (max-width:520px){
　.top_lesson .inner div{
　　flex-direction: column-reverse; /* columnに縦並びで、逆順にする*/
　}
　.top_lesson .inner div .lesson_img{
　　width: 60%;
　　margin-left: auto;
　　margin-right: auto;
　　margin-bottom: 30px;
　}
　.top_lesson .inner div .lesson_text{
　　width: 60%;
　　margin-left: auto;
　　margin-right: auto;
　}
}/*======max-width:520px==========*/

/*=========
bottom_contents
=========*/
.bottom_contents .inner{
　display: flex;
　justify-content: space-between;
}

.bottom_contents .inner section{
　width: 48%;
}

/* 参加者の声 */
.top_voice dl{
　display: flex;
　margin: 0;
　margin-bottom: 30px;
}

.top_voice dl dt{
　width: 168px;/ *168pxより小さい携帯端末はないので168pxのままでOK*/
　margin-right: 20px;
}

.top_voice dl dd{
　margin: 0;
}

.top_voice dl dd p{
　margin: 0;
　line-height: 1;
}

.top_voice dl dd p:first-child{
　font-size: 1.2rem;
　margin-bottom: 5px;
}

.top_voice dl dd p:nth-child(2){
　margin-bottom: 15px;
}

.top_voice dl dd p:last-child{
　line-height: 1.5;
}

/* お知らせ */
.top_info dl dt{
　font-size: 1.2rem;
　line-height: 1;
}

.top_info dl dd{
　margin: 0;
　line-height: 1.5;
　margin-bottom: 20px;
}

.top_info dl dd:last-child{
　margin-bottom: 0;
}

.top_info dl{
　margin-bottom: 30px;
}

.top_info dl dt span{ /*newのCSS、spanタグはnew.js*/
　background-color: #f77237;
　color: #fff;
　display: inline-block;
　padding: 3px 5px;
}

/*ブレイクポイントはあくまで目安、変えてもOK*/
@media screen and (max-width:700px){
　.bottom_contents .inner{
　flex-direction: column;
　}

.bottom_contents .inner section{
　width: 80%;
　margin-left: 0;
　margin-right: 0;
　}

.bottom_contents .inner .top_voice{
　margin-bottom: 140px;
　}

}/*======max-width:700px==========*/
@media screen and (max-width:520px){
　.top_voice dl{
　　flex-direction: column;
　}

.top_voice dl dt{
　width: auto; /*初期値に戻したいauto or 100%*/
　margin-bottom: 10px; /*画像の下*/
　margin-right: 0;
　}
}/*======max-width:520px==========*/

positionについて

static：指定なし（デフォルト）
relative：通常配置される位置からの相対的な位置で指定
absolute：親要素に絶対的な位置で指定
fixed：固定配置で指定

position: absolute;を使うと、要素同士を重ねて表示できます。
サイトの左上部分を基準として、そこからの位置をtopとleftを使って指定します（rightやbottomで指定も可能）。

position: absolute;の基準位置はサイトの左上部分ですが、基準位置は変更できます。
基準としたい親要素に「position: relative;」と指定すると、要素の左上部分が基準位置に変わります。

「absolute、relativeの考え方」は、サルワカさんの記事がわかりやすいです。
» CSSのpositionを総まとめ！absoluteやfixedの使い方は？

なおpostion:fixedを使うと、常に要素を画面上の指定位置に固定できます。
位置は「top、left、right、bottom」を使って指定します。

position:relative;による位置の変更

position: relative;をtopやleftと併用すると、要素を元の位置からずらせます。

position: relative;はposition: absolute;の基準位置を決めるために使いますが、要素位置を変更するためにも使えるのです。

以下は、ボタンをクリックしたときだけ「元の位置と比較して、topから6px、leftから10px、移動」というCSSです。

style.css

.btn:active{
　position:relative;
　top:6px;
　left:10px;
}

クリック時だけボタンがへこんで見えるようにする方法

ボタンにbox-shadowをつける
クリック時（:active）にbox-shadow:none;をつける
position: relative;とtopを使い、影の分だけ位置を下げる

z-indexについて

z-indexプロパティは、数値で重なりの優先度を指定できます。

z-index：優先度;

z-indexは整数値で指定し、値が大きいほど上に表示されます。
数値は0〜1,000,000,000まで指定できます。

1、2、3などの数値で指定するより「100、200、500、1000など」ある程度の幅で指定したほうが、要素の追加などで調整するときに、既存要素の数字をずらすなどの作業を避けられます。

z-indexはpositionと併用する必要があります。

timeタグ【daytime】

timeタグは、ユーザーに日時を示すのではなく、検索エンジンに日時を示すものです。

timeタグを使用しないときに比べて、検索エンジンに日時を認識してもらえます。
SEO対策になり、「検索順位アップ」のメリットがあります。

datetime属性を使うことで、検索エンジンやコンピューター側に正確な日付を認識させられます。

HTMLの記述例

» 参考：【初心者向け】timeタグの使い方とdatetime属性の役割を解説

【レスポンシブWebデザインのサンプル】aboutページのHTML、CSS

下層のaboutページについて、HTML、CSSのサンプルを掲載します。
topページと共通の「head、header、footer、js」は省略しています。

aboutページのindex.html

index.html

　<div class="under_title">
　　<div class="inner">
　　　<h1>当店について</h1>
　　</div>
　</div>

　<div class="bread">
　　<div class="inner">
　　　<ul>
　　　　<li><a href="../">Home</a></li>
　　　　<li>当店について</li>
　　　</ul>
　　</div>
　</div>

　<main>
　　<article class="inner">
　　　<h2 class="title">ケーキ屋のこだわり</h2>
　　　<section>
　　　　<h3>安心な国産の材料を使用</h3>
　　　　<div>
　　　　　<p class="about_text">お客様に安心してケーキを楽しんでいただくために、ケーキ屋○○では、質が良く安全な、国産の卵や牛乳、生クリームを使っています。小麦粉に関しては、数ある小麦粉の中から選び抜いた、香りの良い北海道産の「ファリーヌ」にこだわっています。</p>
　　　　　<p class="about_img"><img src="../img/about01.jpg" alt=""></p>
　　　　</div>
　　　</section>
　　　<section>
　　　　<h3>新しいメニューの開発</h3>
　　　　<div>
　　　　　<p class="about_text">ケーキ屋の職人たちは、定番のケーキをおいしく仕上げる職人でありながら、常に新しいケーキを生み出し続けるクリエイターでもあります。お客様に楽しんでいただくために、毎月新しいメニューを開発しています。</p>
　　　　　<p class="about_img"><img src="../img/about02.jpg" alt=""></p>
　　　　</div>
　　　</section>
　　　<section>
　　　　<h3>アレルギーへの対策</h3>
　　　　<div>
　　　　　<p class="about_text">○○のケーキは、すべてケースの前にアレルゲン物質を書き出していますので、アレルギーをお持ちの方でも安心してお買い求めいただけます。また、小麦アレルギーの方のために、米粉を使ったケーキも販売しております。</p>
　　　　　<p class="about_img"><img src="../img/about03.jpg" alt=""></p>
　　　　</div>
　　　</section>
　　　<section>
　　　　<div>
　　　　　<h3>ケーキ作りをご自宅で</h3>
　　　　　<p class="about_text">お菓子作りの楽しさをお伝えするために第1・第2土曜日に、家族で参加できるお菓子作り教室を開催しています。お子様との楽しい思い出作りに、是非ご参加ください。</p>
　　　　　<p class="about_img"><img src="../img/about04.jpg" alt=""></p>
　　　　</div>
　　　</section>
　　</article>
　</main>

</body>
</html>

aboutページのcss

style.css

.about .under_title{
　background-image: url(../../img/about_main.jpg);
}

.about h3{
　text-align: center;
　font-weight: normal;
}

.about section{
　margin-bottom: 100px;
}

.about section div{
　display: flex;
　justify-content: space-between;
}

.about section:nth-child(odd) div{
　flex-direction: row-reverse;/*順方向の逆に並ぶ*/
}
/*nth-childは子要素、h2も含んでしまうのでに偶数番目を指定するにはeven（偶数）ではなくodd（奇数）*/

.about section div .about_text,
.about section div .about_img{
　width: 48%;
}

@media screen and (max-width:520px){
　.about .inner section div{
　　flex-direction:column-reverse;/*縦方向の逆に並ぶ*/
}
/*このまま（.about section div）ではnth-childの詳細度に負けるので.innerをつけて詳細度を上げる*/

.about section div .about_text,
.about section div .about_img{
　width: 100%;
　}
}/*======max-width:520px==========*/

Flexboxについて

FlexboxはCSSを使ったレイアウト方法の1つです。
floatで作っていた横並びを簡単に作れるようになるので便利です。
よく利用されるものを掲載しました。

要素を横並びにする

横並びにしたい要素の親要素にdisplay: flexを指定します。

横並びにした要素を画面いっぱいに広げる

画面いっぱいに伸ばしたい要素にflex: autoを指定します。

要素を2列に折り返す

折り返したい要素の親要素にflex-wrap: wrapを指定します。
折り返したい要素には列数に応じたwidthを指定します。
2列にしたい場合は、width: 50%を指定します。

画面幅を狭めたときに2列に折り返す

メディアクエリを使えばOKです。

画面幅を狭めたときに1列にする

縦に並べたい要素の親要素にflex-direction: columnを指定します。
※margin:0 auto;で中央寄せにしたり、メディアクエリと合わせて使います。

flex-direction・・・Flexboxアイテムの配置方向

row（初期値）	順方向
row-reverse	rowの逆方向
column	縦並び
column-reverse	columnの逆方向

justify-content・・・flex-direction方向に揃え・レイアウト

flex-start（初期値）	始点揃え
flex-end	終点揃え
center	中央揃え
space-between	等間隔配列
space-around	アイテム左右に等しく間隔をとる

align-items・・・flex-directionに垂直方向の揃え・レイアウト

stretch（初期値）	コンテナの高さいっぱいに広がる
flex-start	始点揃え
flex-end	終点揃え
center	中央揃え
baseline	ベースライン揃え

※Flexboxコンテナに高さの指定をしないと有効にならない点に注意

flex-wrap・・・Flexboxアイテムの折り返し設定

nowrap（初期値）	アイテムは折り返されない
wrap	コンテナの幅を超えると折り返される
wrap-reverse	アイテムは折り返され下から始まる

align-content・・・複数行の揃え・レイアウト

stretch（初期値）	コンテナの高さいっぱいに広がる
flex-start	始点揃え
flex-end	終点揃え
center	中央揃え
space-between	等間隔配列
space-around	アイテム上下に等しく間隔をとる

» 参考：Flexboxのチートシート

【レスポンシブWebデザインのサンプル】menuページのHTML、CSS

下層のmenuページのHTML、CSSのサンプルです。
topページと共通の「head、header、footer、js」は省略しています。

menuページのindex.html

index.html

　<main>
　　<section class="inner">
　　　<h2 class="title">○○のケーキ</h2>
　　　<ul class="cake_sw">
　　　　<li><a href="#this_month">今月のケーキ</a></li>
　　　　<li><a href="#basic">定番のケーキ</a></li>
　　　　<li><a href="#rice">米粉のケーキ</a></li>
　　　</ul>

　　　<div id="this_month" class="tab_contents">
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake01.jpg" alt="モンブラン">
　　　　　　<figcaption>モンブラン</figcaption>
　　　　　</figure>
　　　　</a>
　　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake02.jpg" alt="ナッツのケーキ">
　　　　　　<figcaption>ナッツのケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake02.jpg" alt="ナッツのケーキ">
　　　　　　<figcaption>ナッツのケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake02.jpg" alt="ナッツのケーキ">
　　　　　　<figcaption>ナッツのケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　</div>

　　　<div id="basic" class="tab_contents">
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake03.jpg" alt="ドーナツ">
　　　　　　<figcaption>ドーナツ</figcaption>
　　　　　</figure>
　　　　</a>
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake04.jpg" alt="ショートケーキ">
　　　　　　<figcaption>ショートケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　</div>

　　　<div id="rice" class="tab_contents">
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake05.jpg" alt="紅茶のシフォンケーキ">
　　　　　　<figcaption>紅茶のシフォンケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　　<a href="#">
　　　　　<figure>
　　　　　　<img src="../img/menu_cake06.jpg" alt="チョコレートケーキ">
　　　　　　<figcaption>チョコレートケーキ</figcaption>
　　　　　</figure>
　　　　</a>
　　　</div>
　　</section>
　</main>
</body>

menuページのcss

style.css

.menu .under_title{
　background-image: url(../../img/menu_main.jpg);
}
/*メニュー画面専用の画像*/

.menu main ul{
　display: flex;
　justify-content: center;
　margin: 0;
　padding: 0;
　margin-bottom: 30px;
}

.menu main ul li{
　border-top: 1px solid #999;
　border-left: 1px solid #999;
}

.menu main ul li:last-child{
　border-right: 1px solid #999;
}

.menu main ul li a{
　display: block;
　padding: 1rem;
　text-align: center;
　color: #999;
}

.menu main .tab_contents{
　display: flex;
　flex-wrap: wrap;
　justify-content: space-between;
}

.menu main .tab_contents a{
　display: block;
　width: 20.5%;
}

.menu main .tab_contents a figure{
　padding: 0;
　margin: 0;
}

.menu main .tab_contents::before,
.menu main .tab_contents::after{
　content:" ";
　width: 20.5%;
　height: 0;　/*他のものに影響を与えない（5つでもずれて下に行くが高さ0）*/
}

.menu main .tab_contents::before{
　order: 1;
}
/*orderは初期値0。上記のようにbeforeにorder:1を指定したので1番後ろになる*/
/*content：" " ; を入れない場合、どうなるか？ → 後述*/

@media screen and (max-width:960px){
　.menu main .tab_contents a{
　　width: 30%;
　}

　.menu main .tab_contents::before,
　.menu main .tab_contents::after{
　　width: 30%;
　}
}/*======max-width:960px==========*/

@media screen and (max-width:520px){
　.menu main .tab_contents a{
　　width: 70%; /*51以上であればOK*/
　　margin-left: auto;
　　margin-right: auto;
　}
　.menu main .tab_contents::before,
　.menu main .tab_contents::after{
　　width: 70%; /*51以上であればOK*/
　}
}/*======max-width:520px==========*/

content：" " ; を入れない場合、どうなるか

.tab_contentsについて、ケーキ写真の配置についてです。
綺麗に配置されるには擬似要素「content：" " ;」が必要です。

理解を深めるために「擬似要素『content：" " ;』を書かなかった場合、写真の配置がどうなるか」を解説します。
space-betweenが効いている前提です。

1つのとき：左端に配置 → 問題なし
2つのとき：1つ目は左端、2つ目は右端に配置 → 見た目が悪い
3つのとき：1〜3つ目が間隔が大きく配置 → 見た目が悪い
4つのとき：1〜4つ目が等間隔に配置 → 問題なし
5つのとき：1〜4つ目は等間隔に配置。改行され5つ目は左端に配置 → 問題なし
6つのとき：1〜4つ目は等間隔に配置。改行され5つ目は左端、6つ目は右端に配置 → 見た目が悪い
7つのとき：1〜4つ目は等間隔に配置。改行され5〜7つ目は間隔が大きく配置 → 見た目が悪い
8つのとき：1〜4つ目は等間隔に配置。改行され5〜8つ目も等間隔に配置 → 問題なし

2〜3つ、6〜7つのときに見た目が悪いです。

解決策

手順その①：beforeとafterにcontent:" ";を入れる
手順その②：beforeをorder:1; にする

順番にどうなるかを解説します。

手順その①：beforeとafterにcontent:" ";を入れる

1つのとき：計3つになり、中央に1つ配置 → 問題なし
2つのとき：計4つになり、中央に2つ等間隔に配置 → 問題なし
3つのとき：計5つになり、左端が1つ空で、3つが等間隔に配置 → 見た目が悪い
4つのとき：計6つになり、左端が1つ空で、3つが等間隔に配置。改行され4つ目が左端に配置 → 見た目が悪い
5つのとき：計7つになり、左端が1つ空で、3つが等間隔に配置。改行され4つ目、5つ目は左端から間隔を開けて配置。6つ目は空で右端に配置 → 見た目が悪い
6つのとき：計8つになり、左端が1つ空で、3つが等間隔に配置。改行され5〜7つ目は左端から等間隔に配置。8つ目は右端に空で配置 → 見た目が悪い
7つのとき：計9つになり、左端が1つ空で、3つが等間隔に配置。改行され5〜8つ目は間隔で配置。改行され9つ目は空で左端に配置 → 見た目が悪い
8つのとき：計10個になり、左端が1つ空で、3つが等間隔に配置。改行され5〜8つ目は間隔で配置。改行され9つ目は左端に配置、10個目は空で右端に配置 → 見た目が悪い

この時点では3つ以上になると、すべて見た目が悪くなります。

手順その②：beforeをorder:1; にする

beforeの空contentをorder1にすると、1番後ろに配置されます。
orderの初期値は0だからです。
他の要素より順番が後になるのです。

以下になり、すべて「問題なし」です。

1つのとき：計3つになり、左端に1つ配置。空contentは中央と右端に配置されているが見えない → 問題なし
2つのとき：計4つになり、左端から2つ等間隔に配置。空contentは2つ配置されているが見えない→ 問題なし
3つのとき：計5つになり、3つが等間隔に配置。空contentは右端に1つと、改行されて左端に1つ配置されているが見えない → 問題なし
4つのとき：計6つになり、4つが等間隔に配置。改行され空contentは5つ目が左端、6つ目が右端に配置されているが見えない → 問題なし
5つのとき：計7つになり、4つが等間隔に配置。改行され5つ目が左端、6〜7つ目の空contentは中央と右端に配置されているが見えない → 問題なし
6つのとき：計8つになり、4つが等間隔に配置。改行され5〜6つ目が左端から等間隔、7〜8つ目の空contentは隣に等間隔に配置されているが見えない → 問題なし
7つのとき：計9つになり、4つが等間隔に配置。改行され5〜7つ目が左端から等間隔、8つ目の空contentは右端、9つ目空contentは改行され左端に配置されているが見えない → 問題なし
8つのとき：計10個になり、4つが等間隔に配置。改行され5〜8つ目が等間隔に配置。改行され9〜10個目の空contentは左端、右端にに配置されているが見えない → 問題なし

以上で、すべて問題なしになりました。
画像の数が増えても問題ありません。

【レスポンシブWebデザインのサンプル】cakeページのHTML、CSS

下層のcakeページのHTML、CSSのサンプルです。
topページと共通の「head、header、footer、js」は省略しています。

cakeページのindex.html

index.html

<body id="top" class="menu cake">
　<div class="under_title">
　　<div class="inner">
　　　<h1>ナッツのケーキ</h1>
　　</div>
　</div>

　<div class="bread">
　　<div class="inner">
　　　<ul>
　　　　<li><a href="../../">Home</a></li>
　　　　<li><a href="../"></a>メニュー</a></li>
　　　　<li>ナッツのケーキ</li>
　　　</ul>
　　</div>
　</div>

　<main>
　　<article>
　　　<div class="inner">
　　　　<div class="cake_desc">
　　　　　<h2 class="title">ナッツのケーキ</h2>
　　　　　<p>コーヒー風味のパウンドケーキに、くるみ、落花生、カシューナッツ、アーモンドをたっぷり使った、贅沢なケーキです。クリームには、ベルギー産のチョコレートを作っています。</p>
　　　　　<dl>
　　　　　　<dt>価格</dt>
　　　　　　<dd>440円（税込み）</dd>
　　　　　</dl>
　　　　　<dl>
　　　　　　<dt>カロリー</dt>
　　　　　　<dd>324kcal</dd>
　　　　　</dl>
　　　　</div>
　　　　<p class="cake_img">
　　　　　<img src="../../img/menu_cake02_large.jpg" alt="ナッツのケーキ">
　　　　</p>
　　　</div>
　　</article>
　</main>

</body>

cakeページのcss

style.css

.cake main article{
　overflow: hidden; /*はみ出した部分を消す*/
}

.cake main article .inner{
　display: flex;
　justify-content: space-between;
　position: relative;　/*inner内の左上に戻ってくる*/
　padding: 50px;
}

.cake main article .inner::before,
.cake main article .inner::after{
　content: " ";
　width: 100%;
　height: 100%;
　position: absolute;
　background-color: rgba(247,114,55,0.2);
　top: 0;
　left: 0;
　z-index: -10; /* z-indexを使わないと画像や文字に色が重なってしまうから */
}

.cake main article .inner::before{
　border-radius: 500px 200px 600px 200px / 200px 500px 200px 300px;
　/*X方向（左上、右上、右下、左下） / Y方向（左上、右上、右下、左下） → 後述*/
　/*transform: skewX(-10deg); やtransform: skewX(10deg); で平行四辺形をつくるのもあり*/
}

.cake main article .inner::after{
　border-radius: 200px 500px 200px 300px / 500px 200px 600px 200px;
}

.cake main article .inner .cake_desc{
　width: 40%;
}

.cake main article .inner .cake_img{
　width: 50%;
}

.cake main article .inner h2{
　text-align: left;
}

.cake main article .inner p{
　margin-bottom: 50px;
}

.cake .cake_desc dl{
　display: flex;
　margin: 0;
}

.cake .cake_desc dl dt{
　width: 5em;
/*5文字分、環境により文字の大きさが変わってもOK、remでもOKだけど1.6×5文字分=8remにする必要がある、面倒なのでem使用*/
}

.cake .cake_desc dl dd::before{
　content: ' : ';
　padding-right: 0.5em; /*右なのは、：の右側だから*/
}

.cake .cake_desc dl dd{
　margin: 0;
}

.cake .cake_desc dl dd::before{
　content: ' : ';
　padding-right: 0.5em;
}

@media screen and (max-width:520px){
　.cake main article .inner{
　flex-direction: column;
}

.cake main article .inner .cake_desc{
　width: 100%;
}

.cake main article .inner .cake_img{
　width: 100%;
}

}/*=======max-width:520px=======*/

articleについて

articleとsectionの違い

article：記事を表す
section：区分を表す（見出し必要）
aside：補足情報を表す

article要素は、範囲がセクションで独立していて、それだけで完結していることを示す要素です。
ただarticleはムリに使わなくていいタグです。

タグを使う基準は明らかに間違っていなければOKです。
コミュニケーションとして成り立っていればいいのです。

整理すると独立して成り立つのが記事（article）で、いくつかが一緒になって成立するのが区分（section）です。

なおasideは、以などの補足情報を示します。

バナー広告
関連記事
補足情報
サイドバーのカテゴリ一覧

asideは複数使用できます。
asideの入れ子にasideは使えません。

border-radiusで角を丸くする

角を丸めるには、border-radiusプロパティです。
ボタンや枠の角を丸めて「角丸」を作れ、数字が大きいほど角が丸くなります。

書式

border-radius：角のアール（丸み）;

たとえば、四隅を同じ丸みにするには「border-radius：10px ;」と書けばOKです。
半径10pxの円をベースにした丸みができます。

各頂点で違う丸みを作るには、以下のようにそれぞれを指定すればOKです。

border-top-left-radius：10px
border-top-right-radius：5px
border-bottom-right-radius：15px
border-bottom-left-radius：8px

ショートハンドでも書けます（左上を基準に、左上 → 右上 → 右下 → 左下）。
%でも書けます。

border-radius：10px 5px 15px 8px ;

値を半角スペースで区切ると「横の半径　縦の半径」を指定できます（楕円もつくれます）

border-top-left-radius：10px 30px
border-top-right-radius：5px 5px
border-bottom-right-radius：15px 18px
border-bottom-left-radius：8px 18px

ショートハンドでは、サンプルのcssのようにスラッシュ／で区切って書きます。

border-radius: 500px 200px 600px 200px / 200px 500px 200px 300px;
/*　X方向＝横の値（左上、右上、右下、左下） / Y方向＝縦の値（左上、右上、右下、左下）　*/

transform: skewで平行四辺形をつくる

CSSで平行四辺形をつくるには、transform:skewプロパティです。
斜めに引き伸ばしたい要素に「transform: skew(数値); 」をつけるだけです。

書式

transform: skew(数値);

skewを使うと、要素を斜めに引き伸ばせます。
数値がプラスで左に、マイナスで右に引き伸ばせます。

skewXと書くこともありますが、skewと同じです。
skewの英語の意味は「斜め、歪ませる」などです。

なおskewの中の文字を斜めにしない方法は、疑似要素（before または after）を使うことです。

【レスポンシブWebデザインのサンプル】lessonページのHTML、CSS

下層lessonページのHTML、CSSのサンプルです。
topページと共通の「head、header、footer、js」は省略しています。

lessonページのindex.html

index.html

<body id="top" class="lesson">
　<div class="wrapper inner">
　　<main>
　　　<section class="lesson_box">
　　　　<p><img src="../img/lesson01.jpg" alt="お子様と楽しい思い出を"></p>
　　　　<div>
　　　　　<h2 class="title">お子様と楽しい思い出を</h2>
　　　　　<p>材料や道具はお店でご用意いたします。難しいことは考えずに、お子様と一緒にケーキを作り楽しい思い出を作ってください。</p>
　　　　</div>
　　　</section>
　　　<section class="lesson_box">
　　　　<p><img src="../img/lesson02.jpg" alt="ご自宅でも楽しめる"></p>
　　　　<div>
　　　　　<h2 class="title">ご自宅でも楽しめる</h2>
　　　　　<p>一緒に作るケーキの材料は、近くのスーパーで買えるものを使っているので、ご自宅でも作っていただけます。</p>
　　　　</div>
　　　</section>
　　　<section class="lesson_box">
　　　　<p><img src="../img/lesson03.jpg" alt="食を通じた学び"></p>
　　　　<div>
　　　　　<h2 class="title">食を通じた学び</h2>
　　　　　<p>楽しむだけではなく、一緒にケーキを作ることで、様々な学びを得られるよう、レシピ・カリキュラムを作っています。</p>
　　　　</div>
　　　</section>
　　　<section class="gaiyou">
　　　　<h2>教室概要</h2>
　　　　<table>
　　　　　<tr>
　　　　　　<th>教室概要</th>
　　　　　　<td>お菓子作り</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　<th>開催日時</th>
　　　　　　<td>毎月第1・第2土曜日の10時〜12時</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　<th>定員</th>
　　　　　　<td>3組（お子様3名までとご両親）</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　<th>料金</th>
　　　　　　<td>1組6,000円</td>
　　　　　</tr>
　　　　</table>
　　　　<p class="btn"><a href="#">お菓子教室にお申込み</a></p>
　　　</section>
　　</main>

　　<div class="side">
　　　<ul>
　　　　<li><a href="#">お菓子教室</a></li>
　　　　<li><a href="#">ご参加の流れ</a></li>
　　　　<li><a href="#">参加者の声</a></li>
　　　　<li><a href="#">お申込み</a></li>
　　　</ul>

lessonページのcss

style.css

.lesson .under_title{
　background-image: url(../../img/lesson_main.jpg);
}

.lesson .side ul li:first-child a{
　background-color: #f77237;
　color: #fff;
}

.lesson .lesson_box{
　display: flex;
　flex-wrap: wrap;
　justify-content: space-between;
　margin-bottom: 30px;
}

.lesson .lesson_box > p{
　margin: 0;
　width: 46%;
}

.lesson .lesson_box div{
　width:49%;
}

.lesson .lesson_box h2{
　margin: 0;
　text-align: left;
}

.lesson .gaiyou{
　margin-top: 70px;
}

.lesson .gaiyou table{ /*tableタグは内側のコンテンツ量で勝手に横幅をつくる*/
　width: 100%;
}

.lesson .gaiyou table{
　margin-bottom: 30px;
}

.lesson .gaiyou table th,
.lesson .gaiyou table td{
　padding: 15px; /*上下左右*/
　border: 1px solid #999;
}

.lesson .gaiyou table th{
　font-weight: normal;
　background-color: #f77237;
　color: #fff;
}

@media screen and (max-width:520px){
　.lesson .lesson_box{
　　flex-direction: column;
　}

　.lesson .lesson_box > p{
　　width: 100%;
　　margin-bottom: 20px;
　}

　.lesson .lesson_box div{
　　width: 100%;
　}

　.lesson .gaiyou table th,
　.lesson .gaiyou table td{
　　display: block;
　　border: none;
　}

　.lesson .gaiyou table th{
　　text-align: left;
　　padding-top: 5px;
　　padding-bottom: 5px;
}

.lesson .gaiyou table td{
　　margin-bottom: 20px;
　}
}/*======max-width:520px==========*/

【レスポンシブWebデザインのサンプル】contactページのHTML、CSS

下層contactページのHTML、CSSのサンプルです。
topページと共通の「head、header、footer、js」は省略しています。
lessonページと共通の「side」も省略しました。

contactページのindex.html

index.html

<div class="contact">
　　　　<form action="check.php" method="POST">　
　　　　
　　　　　<dl>
　　　　　　<dt><label for="daihyou">代表者のお名前</label></dt>
　　　　　　<dd><input type="text" name="daihyou" id="daihyou"></dd>
　　　　　</dl>
　　　　　<dl>
　　　　　　<dt><label for="email">メールアドレス</label></dt>
　　　　　　<dd><input type="email" name="email" id="email"></dd>
　　　　　</dl>
　　　　　<dl>
　　　　　　<dt>参加される保護者</dt>
　　　　　　<dd>
　　　　　　　
　　　　　　　
　　　　　　　　<input type="radio" name="hogo" id="hogo1" value="ご両親">
　　　　　　　　<label for="hogo1">ご両親</label><br>

<dl>
　　　　　　<dt>好きなケーキを選んでください</dt>
　　　　　　<dd>
　　　　　　　
　　　　　　　<input type="checkbox" name="cake[ ]" id="cake1" value="チョコレートケーキ">
　　　　　　　<label for="cake1">チョコレートケーキ</label><br>

　　　　　　　<input type="checkbox" name="cake[ ]" id="cake2" value="ショートケーキ">
　　　　　　　<label for="cake2">ショートケーキ</label><br>

　　　　　　　<input type="checkbox" name="cake[ ]" id="cake3" value="ナッツのケーキ">
　　　　　　　<label for="cake3">ナッツのケーキ</label><br>

　　　　　　　<input type="checkbox" name="cake[ ]" id="cake4" value="モンブラン">
　　　　　　　<label for="cake4">モンブラン</label><br>
　　　　　　</dd>
　　　　　</dl>

<dl>
　　　　　　<dt><label for="date">ご参加日時</label></dt>
　　　　　　<dd>
　　　　　　　<select name="date" id="date">
　　　　　　　　<option value="">選択してください</option>
　　　　　　　　<option value="8月7日">8月7日</option>
　　　　　　　　<option value="8月14日">8月14日</option>
　　　　　　　</select>
　　　　　　　
　　　　　　</dd>
　　　　　</dl>

　　　　　<button>この内容で次へ</button>
　　　　</form>
　　　</div>
　　</main>
　</div>
</body>

contactページのcss

style.css

.flow_area{
　display: flex;
　margin: 0;
　padding: 0;
　justify-content: space-evenly; /*等間隔*/
　margin-bottom: 30px;
}

.flow_area li{
　border: 1px solid #f77237;
　width: 90px;
　text-align: center
　line-height: 90px;
　border-radius: 45px;
}

.flow_area .current{
　background-color: #f77237;
　color: #fff;
}

.contact dl{
　margin: 0;
　margin-bottom: 30px;
}

.contact dl dd{
　margin: 0;
}

/*inputが他にもあるからtype属性で指定*/
.contact dl input[type="text"],
.contact dl input[type="email"]{
　border: 1px solid #ccc;
　width: 400px;
　padding: 1rem;
}

.contact select{
　padding: 1rem;
}

.contact textarea{
　width: 400px;
　height: 100px;
}

.contact button{
　border: none;
　background-color: #3cad5a;
　color: #fff;
　width: 270px;
　height: 70px; /*buttonタグの場合は勝手に真ん中になるのでline-heightじゃなくてOK*/
　cursor: pointer;
　transition: 0.3s;
}

.contact button:hover{
　opacity: 0.5;
}

@media screen and (max-width:960px){
　.contact dl input[type="radio"]{
　　display: none;
　}

　.contact dl input[type="radio"] + label{
　　width: 170px;
　　display: block;
　　border: 1px solid #f77237;
　　text-align: center;
　　line-height: 50px;
　　color: #f77237;
　　margin-bottom: 10px;
　}

　.contact dl input[type="radio"] + label + br{
　　display: none;
　}

　.contact dl input[type="radio"]:checked + label{
　　color: #fff;
　　background-color: #f77237;
　}

　.contact dl input[type="checkbox"] {
　　display: none;
　}

　.contact dl input[type="checkbox"] + label{
　　width: 170px;
　　display: block;
　　border: 1px solid #333;
　　text-align: center;
　　line-height: 50px;
　　color: #333;
　　margin-bottom: 10px;
　}

　.contact dl input[type="checkbox"] + label + br{　　
　　display: none;
　}

　.contact dl input[type='checkbox']:checked + label{
　　color: #fff;
　　background-color: #3cad5a;
　}
}/*======max-width:960px==========*/

レスポンシブWebデザインの学習メモ

HTML、CSSはどちらから書いてもOK

疑問点：HTMLから一気に書くか、HTMLの区分ごとにCSSを書いていくのか。

結論、どちらでもOKです。

ただCSSを用途に応じて分けるのが吉です。
全ページをCSS1枚で書くと記述量が長くなるからです。

レスポンシブはCSSの記述が多くなります。
通常の2倍とまではいかないですが、PC版の1.5倍にはなるのが普通なのです。

CSSは用途別（ページ別）に分けたいです。

タイトルタグとメタディスクリプション

タイトルタグに何を書くかは重要

タイトルタグはGoogle検索で重要度が高いからです。
集客のために、Google検索で上位表示されることが必要なのです。

<title>タグはGoogle検索で優先順位が高い
<title>タグにSEOキーワードを入れることが重要
<title>タグの言葉がGoogle検索結果に表示される

「どんなキーワードで引っかかったらサイトが儲かるのか」を考えるのが大事です。
ユーザーに「クリックされやすいタイトル」をつけることも重要です。

たとえば、ケーキ屋であれば「店名」だけでなく「駅から徒歩何分のケーキ屋○○」などです。

店舗名で検索する人は少ないので「地域名（駅名）＋ケーキ屋」などもありです。

HTML

<title>新宿区から徒歩3分のケーキ屋 | 洋菓子店○○</title>

SEOとは「検索エンジン最適化」です。
サイトをGoogleの検索エンジンに最適化して、上位表示をねらう技術です。

サイトで稼ぐには「グーグル検索で上位を取ること」が本質です。

メタディスクリプションも重要

Google検索結果の説明文に表示されるので（されない場合もあり）、クリックされやすい説明文を書きます。

メタディスクリプションはブログで700記事以上、書きました。

メタディスクリプションの型は以下です。

問題提起
記事を読む価値
読者の行動

たとえば「【初心者向け11選】Webデザインギャラリー・参考サイトのまとめ」の記事のメタディスクリプションは以下です。

Webデザインの参考サイトを知りたいですか？
本記事は、最新のデザインや技術のトレンド、情報設計の参考になるWebデザインギャラリー・参考サイトをまとめました。
この記事を読むことで初心者でも使えるWebデザインの参考サイト11選がわかります。

ただし、タイトルもメタディスクリプションは正解はありません。
Googleの公式発表や成功例、失敗例をたくさん見て、テストし続けるしかないです。

Googleはアメリカの会社なので、SEOキーワードは「タイトル前方に入れたほうが良い」という意見もあります。

英語では結論が前に来るから
タイトルは左から読むだから

逆に「そこまで意識せずに、ユーザーファーストがすべて」という意見もあります。

最適解は「テストし続けること」です。

font-size 62.5%の理由【rem】

文字サイズをpxで決めるより、相対的な書き方の62.5%としました。

理由は、以下です。

ブラウザは標準で16pxになっていることが多い
↓
16pxを0.625でかけると、10px相当になる
↓
10pxにすれば、以降の文字サイズはremでわかりやすくサイズアップできる

rem（レム）は「root em」の略で、名前のとおり「最上位階層の『em（エム）』」です。

最上位のHTML要素である「HTML」の文字サイズを基準とした相対値で文字サイズを規定します。

メリットは2つです。

親要素の指定の影響を受ける「%やem」に比べ、要素の文字サイズが設定しやすい
HTML要素の文字サイズの調整で、サイト全体の文字サイズ変更にも対応しやすい

シンプルに「親要素の影響を受けない」です。

ユーザースニペット登録

ユーザースニペット登録とは「ショートカットをつくる」に似ています。

よく利用するコードや長いコードは、毎回書くのが大変です。
したがって、よく利用するコードはスニペットを登録しておくのが吉です。

スニペット登録しておくと、必要なときに簡単にソースコードを呼び出して展開できます。
作業効率が上がります。

スニペット（sunippet）は「断片」という意味です。
プログラミングなどで再利用可能なソースコードを表すIT用語です。

ユーザースニペット登録のやり方（CSS版）

Codeメニュー
↓
基本設定
↓
ユーザースニペット
↓
cssで検索
↓
css.jsonをクリックしてファイルをつくる（HTMLの場合は、html.jsonでファイル作成）
↓
デフォルトの記述例「 // "Print to console": { 」以下をコピー&ペースト
↓
以下のように書き換える

一例は、以下です。

css.json

"ゴシック体": { /* 名前はなんでもOK */
　　　"prefix": "sans", /* 他と被らないように名前をつける */
　　　"body": [ /*配列*/
　　　　"font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'Osaka', 'ＭＳＰゴシック', 'MS PGothic', sans-serif;"]
　　　}, /*カンマが必要*/

登録後はprefixで指定したコードを入力するだけで、配列が出力されます。

配列については「【基礎】JavaScriptの配列の定義方法【今日の日付を出力】」で解説しています。

他サイトですが、下記記事も参考になりました。
見ているだけでWeb制作の引き出しが増えます。

header navのアニメーションについて

下記は「画面サイズ960px以下になったとき、ナビゲーションをどう表示させるか」のHTMLです。

「padding-right: 32px;」までの記述は、ナビの固定、位置、色、表示領域を表しています。

index.html

header.on nav{ /* ハンバーガーメニューをクリックすると出てくる */
　　visibility:visible;
　　opacity: 1;
　}

やりたいことは「クリックでパッと出てくるから、アニメーションをつけたい」です。

ダメなやり方は「display:none → display:block」で表示させることです。
間が存在しないからです。
間が存在しないものは、たとえ「transition 0.5s」を入れてもパッと切り替わるだけです。

違う方法を取るしかないです。

解決策は上記コードのとおり「opacity:0 → opacity;1」とすること。
opacityであれば間が存在するから、移り変わりを表現できます。

ただし、opacityではリンクをクリックできてしまうのが難点です。
ドラえもんの「石ころ帽子」みたいです。
解決策は、visibility:hidden;とvisibility:visible;を追記して、クリックさせないようにします。

要素はあるけど見えない状態です。
display:noneは要素も取得されず、完全に存在しない扱いです。

パスを簡単に直す方法は、置き換え

たいていのエディタには置き換え機能がついています。

VSCodeでのやり方

CTR+F（find）で検索を出す
検索の脇にある〉を押すと、置換に変わる

一気に変えられます。

大量のimg画像のパスを変えるときに重宝しました。
知らないと1つ1つ、画像の名前を変えることになり重労働です。

Emmet（エメット）のメモ

Emmet（エメット）とは簡潔な書き方で、コードを展開できる方法です。
ショートカットのように作業を省エネ化するので覚えておいて損はありません。

覚えたEmmetは3つです。

展開前
span＊3
↓
展開後
<span></span>
<span></span>
<span></span>

展開前
li＊3 > a
↓
展開後
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

展開前
li＊3 > a[href=#]
↓
展開後
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

「エメット　チートシート」で検索すると、他にもたくさん出てきます。
» 検索結果を見る

まとめ：感想と気づき

細かい論理の積み重ねで作っていく感じがしました。
スニペット登録のやり方は覚える必要があります。
タブレットはマウスオーバーがないことに気づけなかったです。
ハンバーガーアイコンの考え方を再現できるように復習します。
JavaScriptが入ると混乱しそうですが、論理を理解していきたいです。

ナビが1番重たい作業、ここをクリアすればあとはサラッと進みがちです。
Javascript、table-cellの使い方、インライン要素、ブロック要素など、要復習と感じました。
グラデーションボタンやアニメーション、スマホ用に押しやすくするリンクの間隔など新しく学ぶことが多かったです。

flex-wrap、timeタグ、datetimeなどを学びました。
デフォルトでcssが効いているものを、いったんまっさらにするという考えを忘れないようにします。
「168pxより小さい携帯端末はないので168pのままでOK」というのが印象的でした。
last-child、last-of-type、rowの使い方、pb0、!importantなど再度復習します。
HTML、CSSを学んでから1ヶ月以降なので、ちょうど良い復習のタイミングだと感じました。

参考サイト

以上です。

P.S. レスポンシブWebデザインは慣れです。