WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

3月11日作業データ カラムレイアウト

f:id:yachin29:20220311151558j:plain



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">
<title>Column-layout</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<h1>Column-layout</h1>
<div class="container">
<div class="column">
<div class="column-box">
<a href="img/01.jpg" data-lightbox="gallery"><img src="img/01.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/02.jpg" data-lightbox="gallery"><img src="img/02.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/03.jpg" data-lightbox="gallery"><img src="img/03.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/04.jpg" data-lightbox="gallery"><img src="img/04.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/05.jpg" data-lightbox="gallery"><img src="img/05.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/06.jpg" data-lightbox="gallery"><img src="img/06.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/07.jpg" data-lightbox="gallery"><img src="img/07.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/08.jpg" data-lightbox="gallery"><img src="img/08.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/09.jpg" data-lightbox="gallery"><img src="img/09.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/10.jpg" data-lightbox="gallery"><img src="img/10.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/11.jpg" data-lightbox="gallery"><img src="img/11.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/12.jpg" data-lightbox="gallery"><img src="img/12.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/13.jpg" data-lightbox="gallery"><img src="img/13.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/14.jpg" data-lightbox="gallery"><img src="img/14.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/15.jpg" data-lightbox="gallery"><img src="img/15.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/16.jpg" data-lightbox="gallery"><img src="img/16.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/17.jpg" data-lightbox="gallery"><img src="img/17.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/18.jpg" data-lightbox="gallery"><img src="img/18.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/19.jpg" data-lightbox="gallery"><img src="img/19.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus non facilis, voluptatem recusandae ratione.</p>
</div><!-- /.column-box -->
<div class="column-box">
<a href="img/20.jpg" data-lightbox="gallery"><img src="img/20.jpg" alt=""></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div><!-- /.column-box -->
</div><!-- /.column -->
</div><!-- /.Column-layout -->

<button id="more"></button>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
$('#more').on('click',function(){
$(this).toggleClass('close');
$('.column').toggleClass('click');
});
});
</script>
</body>
</html>


style.css

@charset "utf-8";

body{
background-color: #d1d1cf;
}
h1{
text-align: center;
margin: 40px 0 30px;
}
.column{
width: 90%;
columns: 4;
margin: 0 auto 30px;
}
.column-box{
background-color: #FFF;
padding: 16px;
border-radius: 6px;
margin-bottom: 20px;
break-inside: avoid;/* 文字の部分だけ改行されないようにする */
}
.column-box:hover{
background-color: #e1ebf6;
}
.column-box img{
border-radius: 6px;
margin-bottom: 10px;
}
.column-box p{
line-height: 1.5;
}

#more{
display: none;
}

@media (max-width:959px){
.column{
columns: 3;
}
}
@media (max-width:767px){
.column{
columns: 2;
}
}
@media (max-width:420px){
.column{
columns: 1;
}
/* 1列レイアウトになったら6個目以降のcolumn-boxを非表示にする */
.column-box:nth-of-type(n+6){
display: none;
}
.column.click>.column-box:nth-of-type(n+6){
/* #btnをon.clcikしたら、.columnに「click」をaddClass(toggleClass)する */
display: block;/* 非表示にしていたcolumn-boxを表示する */
}

#more{
display: block;
width: 70%;
padding: 14px 0;
margin: 0 auto 50px;
background-color: #4c64ad;
color: #FFF;
border-radius: 8px;
}
#more::before{
content: "もっと見る";
}
#more.close::before{
content: "閉じる";
}
#more::after{
display: inline-block;
content: "▶";
margin-left: 16px;
}
#more.close::after{
content: "▲";
}
}