CSSにおいて最も困難だと言われる技。それは、
コンスキ
奥義！“画面幅に応じた列数の変更“
といっても、どんなものなのかわからないと思います。
こんな感じの技のことです。
これのやり方を紹介します。
画面幅に合わせて画像の列数を変える方法
上の動画で使われているHTMLとCSSを見ていただきましょう。
作るのが大変な方は、これをコピペして画像だけ変えればOKです。
まずは、HTMLから。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
header
</header>
<!-- 画面幅に応じて列数が変わる -->
<div class="container">
<div class="list">
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample.png" alt="">
</article>
</a>
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample2.png" alt="">
</article>
</a>
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample.png" alt="">
</article>
</a>
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample2.png" alt="">
</article>
</a>
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample.png" alt="">
</article>
</a>
<a href="" class="wrap-element">
<article>
<img width="341" height="192" src="./sample2.png" alt="">
</article>
</a>
</div>
</div>
<!-- 画面幅に応じて列数が変わる -->
</body>
</html>次はCSSです。
@charset "UTF-8";
* {
margin: 0;
padding: 0;
font-family: fantasy;
}
header {
box-sizing: border-box;
padding: 35px;
height: 100px;
background-color: #a9beae;
text-align: center;
font-size: 24px;
color: #f9f9f9;
}
/* 画面幅に応じて列数を変える */
.container {
width: 90%;
margin: 8% auto;
}
.container .list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.container .list .wrap-element {
padding: 0;
max-width: 32%;
display: inline-block;
margin-bottom: 1%;
transition: all 0.5s 0s ease;
}
.container .list .wrap-element article {
display: inline-block;
}
.container .list .wrap-element article img {
width: 100%;
height: auto;
}
@media screen and (max-width: 1023px) {
.container .list .wrap-element {
max-width: 48%;
}
}
@media screen and (max-width: 480px) {
.container .list .wrap-element {
max-width: 100%;
}
}
/* 画面幅に応じて列数を変える */画面幅によって列数が変わる仕組み
仕組みははっきり言ってよくわかりません。
おそらく他の方法でもできます。
ただ、HTMLとCSSをこのような構造にすると画面幅に応じて列数が変わることがわかっています。
いろいろ試した結果、この方法が一番楽に感じました。
列数が変わるタイミングの変更方法
「この画面幅になったら２列にしたい」
このように、列の数を変えたいタイミングは人それぞれです。
そんなときにどう設定するのかを説明します。
上で紹介したCSSの最後の部分に注目してください。
@media screen and (max-width: 1023px) {
.container .list .wrap-element {
max-width: 48%;
}
}
@media screen and (max-width: 480px) {
.container .list .wrap-element {
max-width: 100%;
}
}１行目と６行目で、列数が変わる画面幅を設定しています。
これを変えれば、列数が変わるタイミングを変更できます。
max-width: 480px は「画面幅が480px以下のときに適用する」という意味です。
画面幅が481pxになった瞬間に画像が2列に変わります。
max-width: 1023px は「画面幅が1023px以下のときに適用する」という意味です。
今度は、画面幅が1024pxになると３列に並ぶようになります。
具体例
ということで、例えば、721pxになったら２列にしたい場合は次のようにします。
@media screen and (max-width: 720px) {
.container .list .wrap-element {
max-width: 48%;
}
}
@media screen and (max-width: 480px) {
.container .list .wrap-element {
max-width: 100%;
}
}
コメント