新WEB開発入門講座３実践編１の4完成コード

Contents

1 ビデオ４の完成コード

ビデオ４の完成コード

index.html

<!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>

<!DOCTYPE html>

<head>

<title>Gralley_site</title>

</head>

<body>

$(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>

<h1>Gralley_site Portal Page</h1>

</header>

<nav>

</nav>

<main>

</div>

</main>

</footer>

</div>

</body>

</html>

style.css

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;
}

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

<!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">
    <link href="./css/lightbox.css" rel="stylesheet" />
    <script src="./js/jquery-3.6.4.min.js" type="text/javascript"></script>
    <script src="./js/lightbox.js"></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='"+$("largeimg",this).text()+"' data-lightbox='image-1' data-title='"+$("caption_txt",this).text()+"'><img src='"+$("smallimg",this).text()+"'></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>

<!DOCTYPE html>

<head>

<title>album01</title>

</head>

<body>

$(function(){

$.ajax({

url: 'xml/data02.xml',

dataType: 'xml',

success : function(data){

$("row",data).each(function(){

$(".content").append("<div><a href='"+$("largeimg",this).text()+"' data-lightbox='image-1' data-title='"+$("caption_txt",this).text()+"'><img src='"+$("smallimg",this).text()+"'></a></div>");

})

}

})

</script>

<h1>Gralley_site album01 Page</h1>

</header>

<nav>

</nav>

<main>

</div>

</main>

</footer>

</div>

</body>

</html>

style_ab.css

#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;
}

#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;

}

新WEB開発入門講座３実践編１の4完成コード

ビデオ４の完成コード

index.html

style.css

album01.html

style_ab.css

1件のコメント

コメントするコメントをキャンセル

ビデオ４の完成コード

index.html

style.css

album01.html

style_ab.css

1件のコメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル