@charset "UTF-8"; /* CSSファイルの文字コード指定。 */ /* -------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------------------------- */ /* すべてのWebページに適用される設定。 */ html { /* の中身はすべて以下の書式が適用される。 */ font-family: sans-serif; /* fontの種類をsans-serif（ゴシック体）に設定する。明朝体ならserifに設定する。 */ } html * { /* タグに挟まれたすべてのタグを対象とする設定。 */ box-sizing: border-box; /* すべてのタグのボックスモデルをborder-boxに設定する。 */ /* スマホ表示に対応（レスポンシブデザイン）するため，この設定を行った。 */ } body { /* の中身はすべて以下の書式が適用される。 */ margin: 0 0 0 0; /* 本体のマージンを，上 右 下 左の順に，それぞれ0pxとする。 */ background-color: #eeece9; /* 背景色を#eeece9に設定する。 */ } .wrapper { /*
部分に適用される設定。 */ margin: 0 auto 0 auto; /* マージンを上と下は0とし，左右はautoと設定した。左右のautoで，ページが中央揃えに設定できる。 */ max-width: 960px; /*
の部分の最大幅を960ピクセルに設定する。 */ } /* ボックスモデル：コンテンツを囲み，パディング，外側にボーダー，さらに外のマージンで構成される多層構造。 */ /* ブロックボックス：コンテンツが少なくても，ウィンドウ横幅いっぱいのボックスを作るボックスモデル。（対義語：インラインボックス，テキストの行内に，コンテンツが収まる最小限のボックスを作る。） */ /* box-sizing: border-box;が設定された要素（htmlやbody，h2など)で適用される。 */ /* ボックス領域は，外から内へ，マージン→ボーダー→パディング→コンテンツとなっている。 */ /* background-colorは，パディングとコンテンツが塗りつぶされる。 */ /* ボーダーは枠線をつけるための領域。 */ /* マージンは隣接するボックスとの間隔を設定する領域。 */ /* widthは左マージンと左ボーダーの境目から右ボーダーと右マージンの境目で設定される。heightも同様。 */ h2 { /*

の中身はすべて以下の書式が適用される。 */ color: #3f5170; /* 文字色を#3f5170に設定する。 */ font-size: 22px; /* 文字サイズを22ピクセルに設定する。 */ border-bottom: 3px dotted #3f5170; /*

のボックスの下端に，太さ3pxの点線（dotted，他にsolid，dashed，none）を色#3f5170で設定する。 */ /* borderとするとボックスの周囲，border-topでボックスの上端，border-left，border-rightは左右それぞれに設定ができる。 */ margin-top: 20px; /*

ボックスの上端にマージン20pxを設定。 */ padding-top: 5px; /*

ボックスの上端のマージン→ボーダー→パディング→コンテンツ領域のうちのパディングを5pxに設定。 */ margin-right: 0px; padding-right: 5px; margin-left: 0px; padding-left: 5px; margin-bottom: 20px; padding-bottom: 20px; } h3 { /*

の中身はすべて以下の書式が適用される。 */ color: #3f5170; /* 文字色を#3f5170に設定する。 */ font-size: 18px; /* 文字サイズを18ピクセルに設定する。 */ margin-top: 20px; /*

ボックスの上端にマージン20pxを設定。 */ padding-top: 5px; /*

ボックスの上端のマージン→ボーダー→パディング→コンテンツ領域のうちのパディングを5pxに設定。 */ margin-right: 0px; padding-right: 5px; margin-left: 0px; padding-left: 5px; margin-bottom: 20px; padding-bottom: 20px; } h4 { /*

の中身はすべて以下の書式が適用される。 */ color: #3f5170; /* 文字色を#3f5170に設定する。 */ font-size: 14px; /* 文字サイズを18ピクセルに設定する。 */ margin-top: 20px; /*

ボックスの上端にマージン20pxを設定。 */ padding-top: 5px; /*

ボックスの上端のマージン→ボーダー→パディング→コンテンツ領域のうちのパディングを5pxに設定。 */ margin-right: 0px; padding-right: 5px; margin-left: 0px; padding-left: 5px; margin-bottom: 20px; padding-bottom: 20px; } p { /*

の中身はすべて以下の書式が適用される。 */ line-height: 1.6; /* 行の高さを，フォントサイズの1.6倍に設定した。 */ } img { /* の中身はすべて以下の書式が適用される。 */ max-width: 100%; /* を入れ子にしているボックス（
のようなボックス）の幅に合わせて，画像が伸縮する。ただし，100%の横幅を超えない。 */ height: auto; /* 画像の縦横比を維持する。 */ } /* 擬似クラス：要素（タグ等）が特定の状態にあるときだけ，その要素を選択してスタイルを適用するセレクター。 */ /* 例えば，について，通常の文字色，リンクを踏んだ後の文字色，リンクにマウスポインターを重ねたときの文字色等を設定できる。 */ /* 設定には，a:linkのようにスペースを入れずに入力する。スペースを入れないと，かつ:link状態の要素のスタイルが変更される。 */ /* もしもa :linkのように，aと:linkにスペースを入れると，の入れ子で:link要素を探すことになり，何も起こらない。 */ /* 擬似クラスはスマホではうまく動作しないことが大半。 */ a:link { /* 通常のタグについて設定する。 */ color: #d25833; /* 文字色を#d25833に設定する。 */ } a:visited { /* リンク先が訪問済みの場合のリンクの文字について設定する。 */ color: #d25833; /* 文字色を#d25833に設定する。 */ } a:hover { /* マウスポインターがリンクの文字に乗っている場合について設定する。 */ color: #e3937a; /* 文字色を#e3937aに設定する。 */ } a:active { /* マウスボタンが押されている間の場合について設定する。 */ color: #ff6a3b; /* 文字色を#ff6a3bに設定する。 */ } .logo { /*

のように，class="logo"とある部分について設定する。 */ margin: 50px 0 40px 0; /* class="logo"とある部分のマージンについて，上 右 下 左の順に，50px，0px，40px，0pxと設定する。 */ line-height: 0; /* 高さ0の行の中に，ロゴ画像だけ無理やり挿入するため(?)。 */ text-align: center; /* ウィンドウの中央に配置する。 */ } .top_nav li { /* 中の
  • に対して行う設定。 */ display: inline; /*
  • 部分を，ウィンドウ幅いっぱいのブロックボックスから，インラインボックスへ変更する。 */ /* インラインボックス：テキスト業内に，コンテンツが収まる最小限のボックスを作るボックスモデル。（対義語：ブロックボックス。） */ list-style-type: none; /* リスト行頭につく「・」を別の記号へ変更する。noneで，記号を省略する。 */ padding-right: 30px; /* それぞれのリスト項目が隣接しないよう，右に30pxの余白（パディング）を設定する。 */ } .top_nav ul { /* 中のに対して行う設定。 */ margin: 0 0 0 0; /* マージンを上 右 下 左の順に，すべて0pxに設定する。 */ padding: 20px 10px 15px 20px; /* パディングは，上 右 下 左の順に，20px，10px，15px，20pxと設定する。 */ background-color: #000248; text-align: center; /* background-image: url(../images/menu-bg.png); /* 設定している部分の背景画像を設定する。相対パスは，CSSファイルを起点として設定する。 */ /* background-repeat: repeat-x; /* 背景画像をx方向（水平方向）へ繰り返す。縦横に繰り返す場合はrepeat，縦に繰り返す場合はrepeat-y，繰り返さない場合はno-repeatとする。 */ } /* スタイルの上書きを行う。 */ /* 上記のa:link {}で，htmlファイル中すべてのについて設定を行ったが，.nav a:link {}とすることで，選択する要素をより絞り込んでいることから，当該部分についてはこちらが優先される。 */ /* すべてのよりも，