多くのホームページ（最初のページ）には画面上部に『ヘッダー』があります。サイトのロゴやタイトルのほか、ナビゲーション要素のメニューやパンくずリストが配置されていることがあります。

サイドバー

　ナビゲーション要素のメニュー、ブログのカテゴリーや履歴などを中心に、ヘッダーを表示しないときはサイトのロゴやタイトルを配置します。スマートフォンなど縦長の携帯端末では配置しません。

フッター

　著作権表示や、本文に関連するページへのリンクを配置します。

デビッド・ワトソンによる開発者向けの説明　～より良い Web の構築を支援する～

とても分かりやすいと感じました

class="abc def"

　このクラスにスタイルを設定するときは次のように．（ピリオド）に続けたクラス名を２つ空白を入れずに併記します。
クラス名 abc と def の両方を持つばあいの設定を指定しますという意味です。

.abc.def {
   設定: 値;
}

　ちなみに２つのクラス名の間に空白を挟むと、左側のクラス名のなかにある右側のクラス名の部分という意味になります。

display: none;

　状況にあわせて内容を表示するのに使えるかもしれませんね。

font-weight: bold;  /* 太字 */

font-weight: normal;  /* 標準 */

色の番号は色見本のサイトで調べることができます。

WEB色見本 原色大辞典

　同じ色の濃淡が必要なときは『color: #f08300cc』『color: #f0830077』のように濃さ（透過）の設定を加えます。透過を指定しない『color: #f08300』は『color: #f08300FF』と同じです。
　色の設定とは別に、濃さ（透過）のみ（opacity:）を設定することができます。画像の透過に役立てそうです。値は0から1までの数値か、0%から100%までの割合で設定できます。1または100%が透過しないという意味になります。

①適用範囲 { ②設定: ③値; }

①適用範囲（セレクタ―）

　タグ名はそのまま入力します。クラス名は先頭に『.（ピリオド）』を付けます。アイディ名は先頭に『#（シャープ）』を付けます。全要素にするときは『*（アスタリスク）』です。
　複数の名前を空白で区切ると[または（OR）]という意味になり、適用範囲を広げられます。
　複数の名前を『,（カンマ）』で区切ると[かつ（AND）]という意味になり、適用範囲を小さくします。
　区切記号は他にも『>（不等号記号）』『+（プラス）』『~（チルダ）』があります。
　そして『[]（角括弧）』や『:（コロン）』でさらに条件を付けることができます。

②設定（プロパティ）、③値（バリュー）

　設定できる項目は決まっています。

CSS の基本 – ウェブ開発を学ぶ | MDN

HTML

<div class="cp_box">

	<input id="cp01" type="checkbox">

	<label for="cp01"></label>

	<div class="cp_container">

		<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>

		/* ここに複数行を書く */

		<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>

	</div>

</div>

CSS

.cp_box label {

	z-index: 1;

	position: absolute;

	bottom: 0;

	width: 100%;  /* グラデーションの幅 */

	height: 6em;  /* グラデーションの高さ */

	cursor: pointer;

	text-align: center;  /* ボタン内の文字の位置 */

	background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 100%);  /* 背景をサイトに合わせる */

}

.cp_box input:checked + label:after {

	content: '閉じる';  /* ボタンの名前（開いたとき） */

}

.cp_box label:after {

	z-index: 2;

	content: '続きをよむ';  /* ボタンの名前（閉じたとき） */

	position: absolute;

	line-height: 2.5em;  /* ボタンの高さ */

	bottom: 0;

	left: 50%;

	width: 16em;

	transform: translate(-50%, 0);

	letter-spacing: 0.05em;

	border-radius: 20px;

	color: #FFFFFF;  /* ボタンの文字色 */

	background: #5AA25A;  /* ボタンの背景色 */

}

.cp_box {

	position: relative;  /* ボタンの位置を内容にあわせる */

}

.cp_box input:checked + label {

	background: inherit;  /* 開いた時にグラデーションを消す */

}

.cp_box input {

	display: none;

}

.cp_box .cp_container {

	overflow: hidden;  /* 閉じているときに下の部分を隠す */

	height: 20em;  /* 閉じているときの高さ */

}

.cp_box input:checked ~ .cp_container {

	height: auto;  /* 開いたり閉じたりするときに高さが変更されるようにする */

	padding-bottom: 2.5em;  /* 閉じるボタンを下へ調整 */

}

HTML

	<div class="menu">

		<div class="current"><a href="./index.html">ホーム</a></div>

		<div><a href="./site-create/index.html">ウェブ</a></div>

		<div><a href="./system-keep/index.html">維持</a></div>

		<div><a href="./aboutus/index.html">ついて</a></div>

	</div>

CSS

.menu {

	display: flex;

	justify-content: space-between;

}



.menu div {

	list-style: none;

	width: 25%;

	height: 2rem;

	line-height: 2rem;

	text-align: center; /* 文字の位置: 中央寄せ */

	border: 1px solid white; /* 枠線 */

	background-color: #f7b977cc; /* 背景色 */

}



.menu div:hover {

	background-color: #f7b97777; /* 背景色 */

}



.menu a {

	display: block;

	color: black; /* 文字色 */

	text-decoration: none;

}



.current a {

	border: 2px solid; /* 枠線 */

	border-color: black white white black;

	background-color: #f7b977ff; /* 背景色 */

}

HTML

<div class="top">

    <div class="commuply"><a href="./index.html">カミュプリィ</a></div>

    <div class="privacypolicy"><a href="./aboutus/privacypolicy.html">個人情報保護方針</a></div>

</div>

CSS

.top {

	display: flex;

	justify-content: space-between;

}



.top div {

	margin: 0 1rem; /* 外側の余白: 上下左右*/

	list-style: none;

	height: 2rem;

	line-height: 2rem;

	text-align: center; /* 文字の位置: 中央寄せ */

}



.top .commuply {

	text-align: left;

}



.top .privacypolicy {

	text-align: right;

}