ビデオ１の完成コード
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!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"> <link href="./css/style.css" rel="stylesheet" type="text/css" media="screen"> <title>Gralley_site</title> </head> <body> <div id="wrap"> <header> <h1>Gralley_site Portal Page</h1> </header> <nav> </nav> <main> <div class="content"> <div> <a href="./album01.html"> <img src="./images/sample.jpg"> <h2>サンプル１</h2> </a> </div> <div> <a href="./album01.html"> <img src="./images/sample01.jpg"> <h2>サンプル２</h2> </a> </div> <div> <a href="./album01.html"> <img src="./images/sample02.jpg"> <h2>サンプル３</h2> </a> </div> <div> <a href="./album01.html"> <img src="./images/sample03.jpg"> <h2>サンプル４</h2> </a> </div> <div> <a href="./album01.html"> <img src="./images/sample04.jpg"> <h2>サンプル５</h2> </a> </div> </div> </main> <footer> </footer> </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#wrap { width: min(98%,1280px); margin: 0 auto; } h1 { font-size: clamp(1.5rem, 0.8901rem + 2.6374vw, 3rem); } h2 { font-size: clamp(0.8rem, 0.5154rem + 1.2308vw, 1.5rem); } .content { display: flex; flex-wrap: wrap; justify-content: center; } .content > div { flex-basis: 370px; } .content > div > a >img { display: block; width: 98%; } a { display: block; text-decoration: none; } |
