ビデオ３の完成コード
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 |
<!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"> <script src="./js/jquery-3.6.4.min.js" type="text/javascript"></script> <title>Gralley_site</title> </head> <body> <script> $(function(){ $.ajax({ url: 'xml/data01.xml', dataType: 'xml', success : function(data){ $("row",data).each(function(){ $(".content").append("<div><a href='"+$("link_filename",this).text()+"'><img src='"+$("image_filename",this).text()+"'><h2>"+$("caption_txt",this).text()+"</h2></a></div>" ); }) } }) }) </script> <div id="wrap"> <header> <h1>Gralley_site Portal Page</h1> </header> <nav> </nav> <main> <div class="content"> </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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
body { background-color: darkgrey; } #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; gap: 8px; } .content > div { flex-basis: 300px; } .content > div > a >img { display: block; width: 300px; height: calc(300px*2/3); object-fit: cover; } a { display: block; text-decoration: none; } a:hover >img { border: 5px solid red; box-sizing: border-box; border-radius: 8px; } |
album01.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 |
<!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_ab.css" rel="stylesheet" type="text/css" media="screen"> <script src="./js/jquery-3.6.4.min.js" type="text/javascript"></script> <title>album01</title> </head> <body> <script> $(function(){ $.ajax({ url: 'xml/data02.xml', dataType: 'xml', success : function(data){ $("row",data).each(function(){ $(".content").append("<div><a href='"+$("link_filename",this).text()+"'><img src='"+$("image_filename",this).text()+"'><h2>"+$("caption_txt",this).text()+"</h2></a></div>" ); }) } }) }) </script> <div id="wrap"> <header> <h1>Gralley_site album01 Page</h1> </header> <nav> </nav> <main> <div class="content"> </div> </main> <footer> </footer> </div> </body> </html> |
style_ab.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 27 28 29 30 31 32 33 |
#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; gap: 8px; align-items: flex-end; } .content > div { flex-basis: 180px; } .content > div > a >img { display: block; width: 98%; /* height: calc(370px*2/3); object-fit: cover; */ } a { display: block; text-decoration: none; } |
