オリジナルflexテーブルのテスト

目次だよ

オリジナルメニューボックス
攻略用テーブルのテスト

オリジナルメニューボックス

画像は必ずセンターにする
リンクを貼る時は先にリンクを設定してから文字を入れないとバグる。もしくは　文字事リンクすると良い
背景はbgc-dddなどで設定されてるCSSを使う
テーブルで画像使うときはサイズ大きめにする

背景色の種類

bgc-fff

bgc-ddd

bgc-111

bgc-rune

bgc-rune1

bgc-sisetu

bgc-sisetu1

bgc-acs

bgc-acs1

bgc-sekiban

bgc-sekiban1

bgc-stmp

bgc-stmp1

bgc-emblem

bgc-emblem1

bgc-sekizou

bgc-sekizou1

bgc-chara

bgc-chara1

bgc-buki

bgc-buki1

bgc-fff

flexメニューのテンプレート

<div class="block100 bgc-111 padding2 border-radius8  linkBox100">
<ul class="flex flex1">

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20897" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/F5173544-7860-423F-89B4-CFCA03D5DA81.png" alt="" width="320" height="180">キャラ</a></li>

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20898" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/D3F43942-D0F7-4CBC-89B5-16E09E27ABB9.png" alt="" width="320" height="180">武器</a></li>

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20875" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/354FF841-9036-4DE1-9B5F-D28FDE6C899C.png" alt="" width="320" height="180">ノーマル</a></li>

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20876" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/11FE8621-4C40-4D47-86D7-5331068E1D66.png" alt="" width="320" height="180">ハード</a></li>

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20877" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/B5576CFD-B517-4F5F-BB38-F1C3B232C95B.png" alt="" width="320" height="180">ナイトメア</a></li>

<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 "><a href="https://an-blog.xsrv.jp/post-20913"><img class="aligncenter size-full wp-image-20901" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/A2E5001C-DD90-48A1-88A6-FD5C3386DFAE.png" alt="" width="320" height="180">協力イベント</a></li>

</ul>
</div>

リスト版スマホ2列それ以外3列

<div class="block100 bgc-111 padding2 border-radius8  linkBox100">
<ul class="flex flex1">
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
<li class="bgc-fff margin1 flex-basis48 flex-basistab31 center border-radius8 ">ー</li>
</ul>
</div>

リスト版 2列・３列

<div class="block100 bgc-111 padding2 border-radius8  linkBox100">
<ul class="flex flex1">
<li class="bgc-fff margin1 flex-basis48 center border-radius8 ">ー </li>
<li class="bgc-fff margin1 flex-basis48 center border-radius8 ">ー </li>
<li class="bgc-fff margin1 flex-basis31 center border-radius8 "> ー</li>
<li class="bgc-fff margin1 flex-basis31 center border-radius8 "> ー</li>
<li class="bgc-fff margin1 flex-basis31 center border-radius8 "> ー</li>
</ul>
</div>

通常版

タイトル等

ー

<div class="block100 bgc-111 padding2 border-radius8  linkBox100">
<p class="center">タイトル等</p>
<div class="flex flex1">
<div class="bgc-fff margin1 flex-basis100 center border-radius8 ">ー </div>
<div class="bgc-fff margin1 flex-basis48 center border-radius8 ">ー </div>
<div class="bgc-fff margin1 flex-basis48 center border-radius8 ">ー </div>
<div class="bgc-fff margin1 flex-basis31 center border-radius8 ">ー </div>
<div class="bgc-fff margin1 flex-basis31 center border-radius8 ">ー </div>
<div class="bgc-fff margin1 flex-basis31 center border-radius8 ">ー </div>
</div>
</div>

テーブル版

ー

<div class="block100 border linkBox100k">
<div class="flex flex1">
<div class="flex-basis100 border center ">ー</div>
<div class="flex-basis50 border center">ー </div>
<div class="flex-basis50 border center">ー </div>
<div class="flex-basis33 border center">ー </div>
<div class="flex-basis33 border center">ー </div>
<div class="flex-basis33 border center">ー </div>
</div>
</div>

攻略用テーブルのテスト

ルーン

ーのルーン

必要数

ー個

用途

周回場所

ー×ー個

ー

<div class="block100 bgc-rune padding2 border-radius8 ">
<div class="flex flex1"> 


<div class="flex-basispc50">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><span class="bold"><img class="aligncenter size-full wp-image-4788" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/10/card_88888888_0-100x100.png" alt="くつしたのルーン" width="106" height="106">ーのルーン</span></div>
<div class="bgc-rune1 marginpc1 padding5px flex-basis100 center border-radius8">必要数</div>
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8 "><p><span class="bold">ー個</span></p></div>
</div>

<div class="flex-basispc50">
<div class="flex flexpc">
<div class="bgc-rune1 margin1 padding5px center border-radius8 order1 flex-basispc100 ">用途</div>
<div class="bgc-rune1 margin1 padding5px center border-radius8 order3 flex-basispc100 ">周回場所</div>
<div class="bgc-fff margin1 padding5px border-radius8 f9 order2 flex-basispc100 "><p>ー×ー個</p></div>
<div class="bgc-fff margin1 padding5px border-radius8  f9 order4 flex-basispc100 "><p>ー</p></div></div></div>
</div>
</div>

施設

ー

必要ルーン数

ー個

取得方法

効果

ー

<div class="block100 bgc-sisetu padding2 border-radius8 ">
<div class="flex flex1"> 


<div class="flex-basispc50">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><span class="bold"><img class="aligncenter size-full wp-image-4788" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/10/card_88888888_0-100x100.png" alt="くつしたのルーン" width="106" height="106">ー</span></div>
<div class="bgc-sisetu1 marginpc1 padding5px flex-basis100 center border-radius8">必要ルーン数</div>
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8 "><span class="bold">ー個</span></div>
</div>

<div class="flex-basispc50">
<div class="flex flexpc">
<div class="bgc-sisetu1 margin1 padding5px center border-radius8 order1 flex-basispc100 ">取得方法</div>
<div class="bgc-sisetu1 margin1 padding5px center border-radius8 order3 flex-basispc100 ">効果</div>
<div class="bgc-fff margin1 padding5px border-radius8 f9 order2 flex-basispc100 ">ー</div>
<div class="bgc-fff margin1 padding5px border-radius8  f9 order4 flex-basispc100 ">ー</div></div></div>
</div>
</div>

アクセサリー

ー

取得方法

効果

ー

ー×ー個

<div class="block100 bgc-acs padding2 border-radius8 ">
<div class="flex flex1">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><img class="aligncenter size-full wp-image-21115" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/card_88888888_0-100x100-1.png" alt="キャラ" width="100" height="100">ー</div>
<div class="bgc-acs1 margin1 padding5px flex-basis48 center border-radius8">取得方法</div>
<div class="bgc-acs1 margin1 padding5px flex-basis48 center border-radius8">効果</div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8 f9"><p>ー</p></div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8  f9"><p>ー×ー個</p></div>
</div>
</div>

セレクトアクセサリー

ー

取得方法

ー

セレクト

	種類	効果(最大値)
オート1
オート1
オート2
オート2
オート3
オート3

<div class="block100 bgc-acs padding2 border-radius8 ">
<div class="flex flex1">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><img class="aligncenter size-full wp-image-21115" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/card_88888888_0-100x100-1.png" alt="キャラ" width="100" height="100">ー</div>


<div class="bgc-acs1 margin1 padding5px flex-basis100 center border-radius8">取得方法</div>

<div class="bgc-fff margin1 padding5px flex-basis100 border-radius8 f9"><p>ー</p></div>

<div class="bgc-acs1 margin1 padding5px flex-basis100 center border-radius8">セレクト</div>

<div class="bgc-fff margin1 padding5px flex-basis100 border-radius8 f9">

<table>
<thead>
<tr class="bold-center t-hai">
<th> </th>
<th>種類</th>
<th>効果(最大値)</th>
</tr>

</thead>
<tbody>
<tr>
<th class="bgc-rune1" rowspan="2">オート1</th>
<td class="t-w15"><img class="aligncenter size-full wp-image-9494" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123637.png" alt="速度UP" width="40" height="40"></td>
<td> </td>
</tr>
<tr>
<td><img class="aligncenter size-full wp-image-9489" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123835.png" alt="特殊" width="40" height="40"></td>
<td> </td>
</tr>
<tr>
<th class="bgc-sisetu1" rowspan="2">オート2</th>
<td><img class="aligncenter size-full wp-image-9489" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123835.png" alt="特殊" width="40" height="40"></td>
<td> </td>
</tr>
<tr>
<td><img class="aligncenter size-full wp-image-9489" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123835.png" alt="特殊" width="40" height="40"></td>
<td> </td>
</tr>
<tr>
<th class="bgc-stmp1" rowspan="2">オート3</th>
<td><img class="aligncenter size-full wp-image-9494" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123637.png" alt="速度UP" width="40" height="40"></td>
<td> </td>
</tr>
<tr>
<td><img class="aligncenter size-full wp-image-9489" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/11/img20181128_123835.png" alt="特殊" width="40" height="40"></td>
<td> </td>
</tr>
</tbody>
</table></div>


</div>
</div>

石板

ー

効果

ー

取得方法

必要ルーン数

ー

ー×ー個

<div class="block100 bgc-sekiban padding2 border-radius8 ">
<div class="flex flex1"> 


<div class="flex-basispc50">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><span class="bold"><img class="aligncenter size-full wp-image-4788" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/10/card_88888888_0-100x100.png" alt="くつしたのルーン" width="106" height="106">ー</span></div>
<div class="bgc-sekiban1 marginpc1 padding5px flex-basis100 center border-radius8">効果</div>
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8 "><p><span class="bold">ー</span></p></div>
</div>

<div class="flex-basispc50">
<div class="flex flexpc">
<div class="bgc-sekiban1 margin1 padding5px center border-radius8 order1 flex-basispc100 ">取得方法</div>
<div class="bgc-sekiban1 margin1 padding5px center border-radius8 order3 flex-basispc100 ">必要ルーン数</div>
<div class="bgc-fff margin1 padding5px border-radius8 f9 order2 flex-basispc100 "><p>ー</p></div>
<div class="bgc-fff margin1 padding5px border-radius8  f9 order4 flex-basispc100 "><p>ー×ー個</p></div></div></div>
</div>
</div>

スタンプ

ー

取得方法

ー

<div class="block100 bgc-stmp padding2 border-radius8 ">
<div class="flex flex1"> 



<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><span class="bold"><img class="aligncenter size-full wp-image-4788" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/10/card_88888888_0-100x100.png" alt="くつしたのルーン" width="106" height="106">ー</span></div>
<div class="bgc-stmp1 margin1 padding5px flex-basis100 center border-radius8">取得方法</div>
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8 "><p><span class="bold">ー</span></p>
</div>


</div>
</div>

エンブレム

ー

取得方法

ー

<div class="block100 bgc-emblem padding2 border-radius8 ">
<div class="flex flex1"> 



<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><span class="bold"><img class="aligncenter size-full wp-image-4788" src="https://white-cat-project.an-channel.com/wp-content/uploads/2018/10/card_88888888_0-100x100.png" alt="くつしたのルーン" width="106" height="106">ー</span></div>
<div class="bgc-emblem1 margin1 padding5px flex-basis100 center border-radius8">取得方法</div>
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8 "><p><span class="bold">ー</span></p>
</div>


</div>
</div>

銅像

ー

取得方法

効果

ー

ー×ー個

<div class="block100 bgc-sekizou padding2 border-radius8 ">
<div class="flex flex1">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><img class="aligncenter size-full wp-image-21115" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/card_88888888_0-100x100-1.png" alt="キャラ" width="100" height="100">ー</div>
<div class="bgc-sekizou1 margin1 padding5px flex-basis48 center border-radius8">取得方法</div>
<div class="bgc-sekizou1 margin1 padding5px flex-basis48 center border-radius8">効果</div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8 f9"><p>ー</p></div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8  f9"><p>ー×ー個</p></div>
</div>
</div>

キャラ獲得

ー

取得方法

育成必要数

ー

ー×ー個

<div class="block100 bgc-chara padding2 border-radius8 ">
<div class="flex flex1">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><img class="aligncenter size-full wp-image-21115" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/card_88888888_0-100x100-1.png" alt="キャラ" width="100" height="100">ー</div>
<div class="bgc-chara1 margin1 padding5px flex-basis48 center border-radius8">取得方法</div>
<div class="bgc-chara1 margin1 padding5px flex-basis48 center border-radius8">育成必要数</div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8 f9"><p>ー</p></div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8  f9"><p>ー×ー個</p></div>
</div>
</div>

武器獲得

ー

取得方法

育成必要数

ー

ー×ー個

<div class="block100 bgc-buki padding2 border-radius8 ">
<div class="flex flex1">
<div class="bgc-fff margin1 padding5px flex-basis100 center border-radius8"><img class="aligncenter size-full wp-image-21115" src="https://an-blog.xsrv.jp/wp-content/uploads/2020/10/card_88888888_0-100x100-1.png" alt="キャラ" width="100" height="100">ー</div>
<div class="bgc-buki1 margin1 padding5px flex-basis48 center border-radius8">取得方法</div>
<div class="bgc-buki1 margin1 padding5px flex-basis48 center border-radius8">育成必要数</div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8 f9"><p>ー</p></div>
<div class="bgc-fff margin1 padding5px flex-basis48 border-radius8  f9"><p>ー×ー個</p></div>
</div>
</div>