フレックスボックスを使ったタイル状のインデックスページ、改訂版 幅を変えて段組みを簡単に変更できます。 また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。 これ、２カラム・３カラムのデザインでも使えるか（サイドバーの左右を数値ひとつかえるだけで入れ替えられますね。）
TITLE
TEST1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
TEST2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
TEST3
二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。
TEST4
二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたく。
TEST5
TEST6
TEST7
TEST8
TEST9
TEST10
TEST11
TEST12
TEST13
HTML
<div class="container_all">
<div class="header">TITLE</div>
<div class="container_main">
<a href="" class="art art1">
<div class="stitle">TEST1</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
<a href="" class="art art2">
<div class="stitle">TEST2</div>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</a>
<a href="" class="art art3">
<div class="stitle">TEST3</div>
<p>二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。</p>
</a>
<a href="" class="art art4">
<div class="stitle">TEST4</div>
<p>二度もこの丁に一つをむやみに面白い差を信じて、時間にありばは次第の天下の外国がいくら角度にもっという意見を、あたかもこうしたのです。その常雇いの男とか乙を主義にとかいう、心得の年代に集まっで三本の例へ安否に伴うだろというたく。</p>
</a>
<a href="" class="art art5">
<div class="stitle">TEST5</div>
<p></p>
</a>
<a href="" class="art art6">
<div class="stitle">TEST6</div>
<p></p>
</a>
<a href="" class="art art7">
<div class="stitle">TEST7</div>
<p></p>
</a>
<a href="" class="art art8">
<div class="stitle">TEST8</div>
<p></p>
<a href="" class="art art9">
<div class="stitle">TEST9</div>
<p></p>
<a href="" class="art art10">
<div class="stitle">TEST10</div>
<p></p>
<a href="" class="art art11">
<div class="stitle">TEST11</div>
<p></p>
<a href="" class="art art12">
<div class="stitle">TEST12</div>
<p></p>
</a>
<a href="" class="art art13">
<div class="stitle">TEST13</div>
<p></p>
</a>
</div>
<div class="footer">FOOTER</div>
</div>
CSS
/* 全体コンテナ */
.container_all{margin:auto;width:600px;}
/* ヘッダ部 */
.container_all .header{background:navy;color:white;font-size:xx-large;text-align:center;line-height:3;}
/* 中段コンテナ(FLEX) */
.container_all .container_main{
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
background:lightblue;
border:none 1px black;
justify-content:center;
}
/* 中段タイルブロック */
.container_all .container_main a{
text-decoration:none;
display:block;
height:200px;
overflow:hidden;
border-radius:8px;
margin:5px;
padding:0;
}
/* タイルブロックタイトル */
.container_all .container_main a.art div.stitle{
padding:5px;display:block;border:none;background:darkcyan;color:white;margin:0;
}
/* タイルブロック本文 */
.container_all .container_main .art p{margin:0;padding:0.5em;}
/* タイルブロック背景色 */
.container_all .container_main a.art1{background:hotpink;}
.container_all .container_main a.art2{background:lightcyan;}
.container_all .container_main a.art3{background:lightgreen;}
.container_all .container_main a.art4{background:silver;}
.container_all .container_main a.art5{background:wheat;}
.container_all .container_main a.art6{background:lavender;}
.container_all .container_main a.art7{background:lightsalmon;}
.container_all .container_main a.art8{background:tan;}
.container_all .container_main a.art9{background:tan;}
.container_all .container_main a.art10{background:tan;}
.container_all .container_main a.art11{background:tan;}
.container_all .container_main a.art12{background:tan;}
.container_all .container_main a.art13{background:tan;}
/* タイルブロック幅 */
.container_all .container_main a.art1{width:190px;}
.container_all .container_main a.art2{width:190px;}
.container_all .container_main a.art3{width:190px;}
.container_all .container_main a.art4{width:600px;}
.container_all .container_main a.art5{width:390px;}
.container_all .container_main a.art6{width:190px;}
.container_all .container_main a.art7{width:140px;}
.container_all .container_main a.art8{width:140px;}
.container_all .container_main a.art9{width:140px;}
.container_all .container_main a.art10{width:140px;}
.container_all .container_main a.art11{width:140px;}
.container_all .container_main a.art12{width:290px;}
.container_all .container_main a.art13{width:140px;}
/* タイルブロック表示順 */
.container_all .container_main a.art1{order:1;}
.container_all .container_main a.art2{order:2;}
.container_all .container_main a.art3{order:3;}
.container_all .container_main a.art4{order:4;}
.container_all .container_main a.art5{order:5;}
.container_all .container_main a.art6{order:6;}
.container_all .container_main a.art7{order:7;}
.container_all .container_main a.art8{order:8;}
.container_all .container_main a.art9{order:9;}
.container_all .container_main a.art10{order:10;}
.container_all .container_main a.art11{order:11;}
.container_all .container_main a.art12{order:12;}
.container_all .container_main a.art13{order:13;}
/* フッター部 */
.container_all .footer{background:crimson;color:white;font-size:medium;text-align:center;line-height:1.5;}
コメント