![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmHpCGSyS_2ik8stMi3NN956lfXNNSaHAQlr-t0OCLMILQRCJ8mAtatepKAL086YEUj93E4_ZJ1wGqmo22w1kj1op_0RR02ROGcS2lKf7NiDWHZBSGy44P8YoSSREzGnSsXWvIhtwiXoJVIMBlHIB5aItaOIj16wAdFry_x-nEx16HtGEMJrZRZdy/s1600-rw/css.png)
今回は、display:gridを手早く使うスニペットを掲載しています。
ホームページを作る時に、画像やカード的な物を並べる一覧リスト的な表示が必要な場合があります。
リスト表示と一言で言っても、色んな種類があり、次のようなパターンをそれぞれの用途で使い分けるようにしています。
リスト型
- リスト-1
- リスト-2
- リスト-3
- リスト-4
- リスト-5
テーブル型
# |
Name |
Type |
Level |
1 |
HTML |
Cording |
★☆☆ |
2 |
CSS |
Cording |
★☆☆ |
3 |
Javascript |
Programing |
★★☆ |
4 |
PHP |
Programing |
★★★ |
カード型
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTy841Oz8Sj1tPEFLAyQYXgobz0pNQ6IanfNl3Q51IyEe1B1PsWUJOYTuy3lNsuSLj0Zue1e8WkI1XnRQkrNtwlXTCU1SPBYO52TnM-6vROVFnrDB0BfSSscbcnOwvdvCRUN6tAqsTX1EehWLyBKA4EzFY9U6ib4_7SkZqwp9n8qdzF0duQk06orCundQ/s1600-rw/books.png)
Book
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTlURUXX426IjkjuAHzWTq8BHi6djHkpUC7w5y-BXY-fk6UnyMYFsenRWm_6-adxUZ9Hc8z83w84_uttKkebl54ItpDH8pIwadQj5N50AWwixUATTOS4_bVThd7SpvExNCz5UgLPHhWTEsuYE9MFUFMG0W8qVIVuVsgM40i8fznK0uyvTWW-9vhRY4ZM/s1600-rw/link.png)
Link
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh26gSSZnsyAhlgz8Kq3BzPwDDFhRS3hspfj585pLrHMlGf8Kf90LqBgAcVIdbr8rVCb9ODaBD7V5KvJNnbHPGt4VblH3XfdjxXJYeWe8gHIOCP9uz2M4JFw76dJtN15vKCJZoyyWm_U68znU4dazaATPzJpgC2k0vWyu5_6qR8p1PxHzJG5gz0C3I-1Y/s1600-rw/mail.png)
Mail
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVScFS2q5vCtQX3ngou92oEpIS8T5HaTI0is_YDMwqK8QCNPEjztBDnj6niuSwf9psjCAFlTcnIBz5WAOzh_8FP0AxMSkCjEwfBX-qMfp50dEwlJ2aHWA0AumqUKdVgEHSufkS3NEK3HFvnFvGWLm5bBKL1Dzx1_ZxOsi6o52B9bGYyBo27NsA9lx5IrQ/s1600-rw/news.png)
News
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M3q7AjK1vu84Z3IC9h1f9h2NO8N1pwtqcQZWUevrppBORlz_J_NJXEnCS-wsIba1ACrT9Ql-hq-5EEdXy3t9gjfgfebuGeQ66vyvyG82DtzZI5atcjx-swSUnCReAR32EVtvJIdSW1ZiLYSKnqzk_KiJ9iHg2OdlYIaRwltO54sqE41jktQP8BXozrA/s1600-rw/school.png)
School
カード型の難易度を知る
実際にコーディングしたことがある人はわかると思いますが、カード型と一言で言っても実は様々な難しさがあります。
この形式をよく見かけるのは、
ECサイトや、
画像一覧を表示するような場合に使いますが、難しさのポイントとしては、
横幅に応じて横並び人表示するカードの個数が変更されるような場合です。
一定の数を、固定値で表示する場合は難しくもないんですが、いわゆるレスポンシブ表示をする場合には、どのように組み立てればいいかという難しさに直面するでしょう。
そのコーディングにも、何パターンもやり方が存在しています。
ちなみに、Tableタグで記述すると、横並びの個数が固定されてしまうので、今回のパターンからは外しています。
パターン1. display:inline-block
パターン2. display:flex
パターン3. display:grid
以下に、それぞれのパターン別のサンプルを表示してみるので、ブラウザサイズを変更して、お気に入りを見つけてください。
パターン1. display:inline-block
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTy841Oz8Sj1tPEFLAyQYXgobz0pNQ6IanfNl3Q51IyEe1B1PsWUJOYTuy3lNsuSLj0Zue1e8WkI1XnRQkrNtwlXTCU1SPBYO52TnM-6vROVFnrDB0BfSSscbcnOwvdvCRUN6tAqsTX1EehWLyBKA4EzFY9U6ib4_7SkZqwp9n8qdzF0duQk06orCundQ/s1600-rw/books.png)
Book
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTlURUXX426IjkjuAHzWTq8BHi6djHkpUC7w5y-BXY-fk6UnyMYFsenRWm_6-adxUZ9Hc8z83w84_uttKkebl54ItpDH8pIwadQj5N50AWwixUATTOS4_bVThd7SpvExNCz5UgLPHhWTEsuYE9MFUFMG0W8qVIVuVsgM40i8fznK0uyvTWW-9vhRY4ZM/s1600-rw/link.png)
Link
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh26gSSZnsyAhlgz8Kq3BzPwDDFhRS3hspfj585pLrHMlGf8Kf90LqBgAcVIdbr8rVCb9ODaBD7V5KvJNnbHPGt4VblH3XfdjxXJYeWe8gHIOCP9uz2M4JFw76dJtN15vKCJZoyyWm_U68znU4dazaATPzJpgC2k0vWyu5_6qR8p1PxHzJG5gz0C3I-1Y/s1600-rw/mail.png)
Mail
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVScFS2q5vCtQX3ngou92oEpIS8T5HaTI0is_YDMwqK8QCNPEjztBDnj6niuSwf9psjCAFlTcnIBz5WAOzh_8FP0AxMSkCjEwfBX-qMfp50dEwlJ2aHWA0AumqUKdVgEHSufkS3NEK3HFvnFvGWLm5bBKL1Dzx1_ZxOsi6o52B9bGYyBo27NsA9lx5IrQ/s1600-rw/news.png)
News
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M3q7AjK1vu84Z3IC9h1f9h2NO8N1pwtqcQZWUevrppBORlz_J_NJXEnCS-wsIba1ACrT9Ql-hq-5EEdXy3t9gjfgfebuGeQ66vyvyG82DtzZI5atcjx-swSUnCReAR32EVtvJIdSW1ZiLYSKnqzk_KiJ9iHg2OdlYIaRwltO54sqE41jktQP8BXozrA/s1600-rw/school.png)
School
.inline-frame{
text-align:center;
}
このパターンは、表示する画面幅(親要素の幅)に応じて、エレメントが自動で改行してくれるので、良い感じに表示できるかと思われますが、
デフォルトの状態では、左寄せになってしまい、
text-alignをcenterをセットすると、最下段に改行された要素が中心に表示されてしまいます。
カード表示の場合は、最下段は、上段の位置に合わせた左寄せにしたいんですよね。
パターン2. display:flex
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTy841Oz8Sj1tPEFLAyQYXgobz0pNQ6IanfNl3Q51IyEe1B1PsWUJOYTuy3lNsuSLj0Zue1e8WkI1XnRQkrNtwlXTCU1SPBYO52TnM-6vROVFnrDB0BfSSscbcnOwvdvCRUN6tAqsTX1EehWLyBKA4EzFY9U6ib4_7SkZqwp9n8qdzF0duQk06orCundQ/s1600-rw/books.png)
Book
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTlURUXX426IjkjuAHzWTq8BHi6djHkpUC7w5y-BXY-fk6UnyMYFsenRWm_6-adxUZ9Hc8z83w84_uttKkebl54ItpDH8pIwadQj5N50AWwixUATTOS4_bVThd7SpvExNCz5UgLPHhWTEsuYE9MFUFMG0W8qVIVuVsgM40i8fznK0uyvTWW-9vhRY4ZM/s1600-rw/link.png)
Link
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh26gSSZnsyAhlgz8Kq3BzPwDDFhRS3hspfj585pLrHMlGf8Kf90LqBgAcVIdbr8rVCb9ODaBD7V5KvJNnbHPGt4VblH3XfdjxXJYeWe8gHIOCP9uz2M4JFw76dJtN15vKCJZoyyWm_U68znU4dazaATPzJpgC2k0vWyu5_6qR8p1PxHzJG5gz0C3I-1Y/s1600-rw/mail.png)
Mail
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVScFS2q5vCtQX3ngou92oEpIS8T5HaTI0is_YDMwqK8QCNPEjztBDnj6niuSwf9psjCAFlTcnIBz5WAOzh_8FP0AxMSkCjEwfBX-qMfp50dEwlJ2aHWA0AumqUKdVgEHSufkS3NEK3HFvnFvGWLm5bBKL1Dzx1_ZxOsi6o52B9bGYyBo27NsA9lx5IrQ/s1600-rw/news.png)
News
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M3q7AjK1vu84Z3IC9h1f9h2NO8N1pwtqcQZWUevrppBORlz_J_NJXEnCS-wsIba1ACrT9Ql-hq-5EEdXy3t9gjfgfebuGeQ66vyvyG82DtzZI5atcjx-swSUnCReAR32EVtvJIdSW1ZiLYSKnqzk_KiJ9iHg2OdlYIaRwltO54sqE41jktQP8BXozrA/s1600-rw/school.png)
School
.flex-frame{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.flex-frame > *{
flex:1;
min-width:80px;
max-width:80px;
}
この方式はうまく言っているようにも見えますが、改行されたitemが2つになった時に、全体のカード配置のバランスが崩れてしまいます。
min,maxのサイズ制限設定を無くすと、よりカードが伸縮されて全体のバランスは良くなるんですが、やっぱり改行がうまくいきません。
パターン3. display:grid
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTy841Oz8Sj1tPEFLAyQYXgobz0pNQ6IanfNl3Q51IyEe1B1PsWUJOYTuy3lNsuSLj0Zue1e8WkI1XnRQkrNtwlXTCU1SPBYO52TnM-6vROVFnrDB0BfSSscbcnOwvdvCRUN6tAqsTX1EehWLyBKA4EzFY9U6ib4_7SkZqwp9n8qdzF0duQk06orCundQ/s1600-rw/books.png)
Book
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTlURUXX426IjkjuAHzWTq8BHi6djHkpUC7w5y-BXY-fk6UnyMYFsenRWm_6-adxUZ9Hc8z83w84_uttKkebl54ItpDH8pIwadQj5N50AWwixUATTOS4_bVThd7SpvExNCz5UgLPHhWTEsuYE9MFUFMG0W8qVIVuVsgM40i8fznK0uyvTWW-9vhRY4ZM/s1600-rw/link.png)
Link
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh26gSSZnsyAhlgz8Kq3BzPwDDFhRS3hspfj585pLrHMlGf8Kf90LqBgAcVIdbr8rVCb9ODaBD7V5KvJNnbHPGt4VblH3XfdjxXJYeWe8gHIOCP9uz2M4JFw76dJtN15vKCJZoyyWm_U68znU4dazaATPzJpgC2k0vWyu5_6qR8p1PxHzJG5gz0C3I-1Y/s1600-rw/mail.png)
Mail
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVScFS2q5vCtQX3ngou92oEpIS8T5HaTI0is_YDMwqK8QCNPEjztBDnj6niuSwf9psjCAFlTcnIBz5WAOzh_8FP0AxMSkCjEwfBX-qMfp50dEwlJ2aHWA0AumqUKdVgEHSufkS3NEK3HFvnFvGWLm5bBKL1Dzx1_ZxOsi6o52B9bGYyBo27NsA9lx5IrQ/s1600-rw/news.png)
News
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M3q7AjK1vu84Z3IC9h1f9h2NO8N1pwtqcQZWUevrppBORlz_J_NJXEnCS-wsIba1ACrT9Ql-hq-5EEdXy3t9gjfgfebuGeQ66vyvyG82DtzZI5atcjx-swSUnCReAR32EVtvJIdSW1ZiLYSKnqzk_KiJ9iHg2OdlYIaRwltO54sqE41jktQP8BXozrA/s1600-rw/school.png)
School
.flex-frame{
display:grid;
grid-template-columns:1fr 1fr 1fr
}
@media(max-width:600px){
.flex-frame{
grid-template-columns:1fr 1fr
}
}
@media(max-width:400px){
.flex-frame{
grid-template-columns:1fr
}
}
横幅を自動で改行させるわけではないですが、@media(メディアクエリ)を使って、カードの横並びの数を調整するだけで、見た目は一番しっくりくる形になってるので、この方法が最適かな〜と思いました。
あとがき
ホームページを作るのを専門職としてやっている身としては、こうした技術に迷いがある時点で、自分のクオリティはまだまだだな〜と感じてしまう一方。
こうしてやり方が確率していくことで、より効率の良いホームページ制作が出来上がっている感覚を感じることができています。
でも、ホームページで実際に一番時間がかかるポイントって、こういうコーディングじゃなくて、文章や、画像素材などの内容クオリティなんですけどね。
0 件のコメント:
コメントを投稿