"gallery"（ギャラリー）という大きな入れ物に
"main"（メイン）と"thumb"（サム）が入っている構造のページ。
教科書p194
「ギャラリーの中で使われているメインclass」という記述↓
#gallery .main {
}
子供だから半角あけたうえに、classなので.がいる
「ギャラリーの中で使われているメインclassのなかのimg」という記述だと↓
#gallery .main img {
}
フォントサイズはpx（ピクセル）で指定しないのが最近の流行り。
safariの新しいメニューで「文字を大きくする」のがあるらしい。つまりひとによって大きさを変えたい。
文字の大きさはユーザーが変えるものだ、というきょうびの考えにpx指定だと反している。
相対指定が望ましい。(remとか)
教科書はp195
ここまで--->
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoGallery</title>
<link rel="stylesheet" href="style.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="gallery">
<div class="main">
<img src="img/1.jpg" alt="参道の緑がわーい">
<p>参道の緑がひゃっほう</p>
</div>
<div class="thumb"><!--サムクラス-->
<img src="img/1.jpg" alt="参道の緑がわーい">
<img src="img/2.jpg" alt="階段きつかった">
<img src="img/3.jpg" alt="高尾山薬王院！">
<img src="img/4.jpg" alt="帰りはロープウェイでスイスイ">
<img src="img/5.jpg" alt="〆のお蕎麦です">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
--->style.css
body{
background-color: #777;
box-sizing: border-box;//横幅はボーダーを含んだ分で計算
text-align: center;
}
#gallery{
margin: auto;
padding-top: 40px;/*写真の上部にスペースをあける*/
width: 500px;
}
#gallery .main img{
border: 4px solid #fff;
box-shadow: 0px 0px 14px #000;/*真上からライトを照らしたようなシャドウ ぼかしの範囲は広い*/
width: 100%;
}
#gallery .main p {
color: #ccc;
font-size: 20px;
font-weight: bold;/*太字にする*/
}
#gallery .thumb img{ /*サムネイル部分*/
border: 4px solid #fff;
border-radius: 400px;/*角丸にするのをめちゃめちゃかけたので丸になる*/
box-shadow: 0 0 10px #000;
height: 60px;
width: 60px;
margin: 10px;
}
さらに#gallery .thumb img{}に一行追加↓
cursor: pointer;/*サムネイルにカーソルが乗るとカーソルがポインタに代わる*/
こうすることで、このサムネイルを押したらリンクっぽい雰囲気が出る。
