@charset "utf-8";
/* cssファイルの頭に、上記の記述は必ず行ってください。それ以外は無くても大丈夫です */

/*『プロパティの働き』："値のパラメータ・記述方法"
※今回の記述の働き*/

html {
    background-color: #ffffcc; 
    /*『背景色』：用意されている規定値 or #000000(16進数) or rgb値
    ※html要素は全てを含むので、ページの背景色となる*/
}

/*----- !! 『 * (全称セレクター)』：全ての要素セレクターを選択し、装飾を同時に行えます。*/
* {
    margin: 0px auto; 
    /*『要素間の空白距離(間隔)』：上下左右(値１つ) or 上下 左右(値２つ) or 上 左右 下(値３つ) or 上 右 下 左(値４つ)
    ・px / % / rem / em / auto で値を記述します。"auto"は、例えば左右に平等にmarginを設けたい場合に自動算出を行うよう指示します。
    ※上下 0px(無し) 左右を均等に自動で*/
    width: 100%;
    /*『コンテンツの横幅』：px / % (親要素に対して、何%の表示幅を取るかを指定します。)
    ※今回は、下記のbody要素で1000pxを指定しているので、body以下の階層の要素の表示幅(width)を100%(=1000px)にします。*/
    box-sizing: border-box; 
    /*『コンテンツサイズの算出方法』：content-box / border-mox(初期値)
    ・border-boxは、要素のwidth=コンテンツ+padding+border 別でmargin と２層構造なります。
    ・もう一方の値(初期値)"content-box"は、コンテンツ・padding・border・marginがそれぞれに別の４層構造になります。
　　 ※全称セレクターなので、全ての要素のwidth(コンテンツ+padding+border)が1000pxになるようにしています。
    注：marginが左右50px設けられた場合、1000pxの外側に50pxずつのmarginが設けられるので900pxに領域が広がるので使い分けに注意してください*/
    border-radius: 0.5rem;
    /*『borderの角を丸める』：px / % / rem / em
    全ての要素に対して、borderが適用された時に丸い角になるよう設定しています*/
}
/*----- !! 『px(絶対値)』：pxで指定した場合、必ずそのサイズで表示領域(デバイス)のサイズに関わらず表示されます*/

/*----- !! 『% / em (相対値)』：親要素で適用されている値に対する相対値で表示指定を行います。
div {font-size: 30px; } p {font-size: 0.5em }と設定されていた場合、div要素を親に持つp要素のフォントサイズは、30px x 0.5 = 15pxとなります。*/

/*----- !! 『rem (ルート相対値)』：大元の親要素"html"に対しての相対値で表示指定を行います。
※一般的に各ブラウザーのフォントサイズの初期値は16pxとされております。なので、
p {font-size: 0.75rem; }と指定した場合、16px x 0.75 = 12px となります。*/

/*----- !!!!最上部において、html要素へ記述を行っていますが、一方でbody要素が全体の親要素では？となる方もいるかと思います。
body要素は、ページに"表示される"全てのコンテンツ・要素が含まれる最も上位の親要素である一方で、
あくまで表示するものを全てを含む"要素"の１つであり、その親要素にhtmlが最上位に存在します。
したがって、そこにも親子関係・「継承」が存在します。*/

body {
    width: 1000px; 
    /*『コンテンツの横幅』*/
    background-color: lightcyan;
    /*『背景色』
    ※コンテンツの表示領域の背景色を指定しています。*/
    border: 9px groove lightblue;
    /*『枠線の設置・指定』：太さ 線のスタイル 色 の３つの値を記述します。
    ・「太さ」 上下左右(値１つ) or 上下 左右(値２つ) or 上 左右 下(値３つ) or 上 右 下 左(値４つ)
    ・「線のスタイル」 solid(初期値、普通の一本の枠線) bold(太線) など１０数種類存在します。
    ・「色」 枠線の色を指定します。記述方法は、"背景色"などと同じです。
    ※コンテンツ表示領域全体に線を設けてページ背景との見た目の強弱を付けています。*/
    padding: 25px;
    /*『コンテンツの周りに空間を設ける』：上下左右(値１つ) or 上下 左右(値２つ) or 上 左右 下(値３つ) or 上 右 下 左(値４つ)
    ※コンテンツの上下左右に15pxの空間を設けて、バランスを設けています。*/
}


header {
    text-align: center;
    /*『テキストの配置』：left(初期値) / center / right
    ※テキストの配置を中央揃えにしています。*/
}
footer {
    text-align: center;
}
.wrapper {
    margin: 50px auto 0;
    /* ※body要素の直下(子要素)にあたる要素同時が密着せぬよう上部に50pxの空白を設けるよう設定しています。*/
}
.content {
    padding: 0.75rem 0.5rem;
}
.mt-0 {
    margin-top: 0;
    /* ※wrapperクラスでbody直下の子要素間で空間を設けるようmarginを上部に設けているが、
    ページトップは、無い方が見た目が良いためそれを調整する為に設定。
    +@ 状況によって他の要素間では空間無しで配置したいときに再利用できる。*/
}
.bg-white {
    background-color:white;
    /*『テキストの色』：背景色と記述方法は同じ
    ※ページトップタイトルの文字色を装飾しています。*/
}
.grey-white {
    color:white;
    background-color: lightgrey;
}
.yellow-blue {
    background-color: yellow; /*style属性から移動*/
    color: blue;
}
.code-box {
    display: block;
    background-color: darkgray;
    color: white;
    font-size: 15px;
    padding: 10px 0;
}
/*----- !! クラスを使用する際には、自分なりの『ネーミングルール』を考えると再利用や新たなクラスを設ける時に役立ちます。
例えば、"mt-0"は、プロパティ名の"m"argin-"t"opを値"0"で装飾していることが分かるようしています
"grey-white"や"yellow-blue"は"背景色-文字色"と組み合わせのルールで設定しやすいようにしています。
このようにすれば、cssファイル内での検索や余計な記述などを避けられますし、コーディングの複雑化を抑えることができます。
絶対にとは言いませんが、使用頻度が高い装飾内容には何かルールを設けて作業を行うことをおすすめします*/

/*----- !! 「wrapper」クラス・「container」クラスなど、クラスの名称は任意であるものの、共通認識としての多くの方が利用するクラス名があります。
理由としては、
・装飾先の要素の特徴(wrapperであればbody直下のグループ母体の要素)や作業場所のイメージを分かりやすい
・本書では触れませんが、flexレイアウトやgridレイアウトを行う為に必要なこと
・パターン化で複数人での作業時でのレイアウトの保持・修正の簡易化すること
・他の人が紹介するソースを参照・利用しやいこと

などがあります。公用語みたいなものなので、余裕があれば適用することをお勧めします。*/

/*----------フレックスレイアウト----------*/
.flex-row-justify {
    display: flex;
    flex: justify;
    /*『兄弟要素の配置方法』：block / inline / inline-block / flex / grid etc
    ※今回は、画像(img要素)とdiv要素を横並びに配置するように指定してます。*/
}
/*[END]----------フレックスレイアウト----------*/

/*----------グリッドスタイルレイアウト----------*/
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 25px;
    grid-auto-rows: minmax (200px,auto);
}
.grid-1256 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.grid-3 {
    grid-column: 3 / 4;
    grid-row: 1; 
}
.grid-4 {
    grid-column: 4 / 5;
    grid-row: 1;
}
.grid-7 {
    grid-column: 3 / 4;
    grid-row: 2;
}
.grid-8 {
    grid-column: 4 / 5;
    grid-row: 2;
}
.text-center {
    text-align: center;
}

/*[END]----------グリッドスタイル----------*/

/*----- !! 『display』プロパティについて
要素の配置に大きく影響するプロパティです。cssの装飾を行う前に先ほどのページを見てみてください。
全ての要素が縦並びになっているたかと思います。
これは基本的に要素は「display: block; 」の初期値を設定されているからです。
各要素がブロックのような四角形で領域を持ち、縦に積み重なるよう配列される特徴を持ちます。
一方で、横並びにしたい、番地のような配置にしたい、という場合もあると思います。
これらには、『flexレイアウト(display: flex; )』『gridレイアウト(display:grid; )』を利用する必要があります。
構築が少々複雑で、今回は紹介しきれませんのでサンプルだけ準備させていただきました。
興味のある方は、他の参考書や説明を行っているサイトで学習してみてください。

/*----------ページ移動ボタン----------*/
.button {
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.2s;
    cursor: pointer;
}
.button-deco1 {
    background-color: lightgrey;
    border: 1px hidden;
}
.button-deco1:hover {
    background-color: white;
    color: grey;
    font-weight: bold;
}
.button-deco2 {
    background-color: rgb(18, 205, 238);
}
.button-deco2:hover {
    background-color: white;
    color: rgb(18, 205, 238);
    font-weight: bold;
}
/*[END]----------ページ移動ボタン----------*/