キャラのタイプ分け表

テーマ

 

ゲームキャラの属性やタイプ分けをする表

 

完成イメージ

 

タイプ
ノーマル	ほのお	みず
でんき	くさ	こおり
かくとう	どく	じめん
ひこう	エスパー	むし
いわ	ゴースト	ドラゴン
あく	はがね	フェアリー

「ポケモンを例にしたタイプ表」

 

説明

 

ユーザーインターフェイス（UI）の質をあげる効果。

ゲームなどの属性分けの表を作成。ページ間を行き来しやすくする。

関連ページとして作成しておく貼り付けがコンパクト。

関連ページの作り方

 

方法・手順

 

1. 新規ページ作成
2. 下記のコードをソースにコピー
3. 画像、名称などを変更する
4. 画像と名称にそれぞれリンクをつける

（下記のコードはリンクを外した状態です。）

 

ソース (HTML)

<div class="uk-overflow-container">
<table class="uk-table">
<thead>
<tr>
<th colspan="3" scope="col">タイプ</th>
</tr>
</thead>
<tbody>
<tr>
<td class="uk-text-center" style="width:33.333%">
<p><img src="https://img.wiki3.jp/template/01_ノーマル.png" width="40" /></p>

<p>ノーマル</p>
</td>
<td class="uk-text-center" style="width:33.333%">
<p><img src="https://img.wiki3.jp/template/02_ほのお.png" width="40" /></p>

<p>ほのお</p>
</td>
<td class="uk-text-center" style="width:33.333%">
<p><img src="https://img.wiki3.jp/template/03_みず.png" width="40" /></p>

<p>みず</p>
</td>
</tr>
<tr>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/04_でんき.png" width="40" /></p>

<p>でんき</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/05_くさ.png" width="40" /></p>

<p>くさ</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/06_こおり.png" width="40" /></p>

<p>こおり</p>
</td>
</tr>
<tr>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/07_かくとう.png" width="40" /></p>

<p>かくとう</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/08_どく.png" width="40" /></p>

<p>どく</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/09_じめん.png" width="40" /></p>

<p>じめん</p>
</td>
</tr>
<tr>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/10_ひこう.png" width="40" /></p>

<p>ひこう</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/11_エスパー.png" width="40" /></p>

<p>エスパー</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/12_むし.png" width="40" /></p>

<p>むし</p>
</td>
</tr>
<tr>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/13_いわ.png" width="40" /></p>

<p>いわ</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/14_ゴースト.png" width="40" /></p>

<p>ゴースト</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/15_ドラゴン.png" width="40" /></p>

<p>ドラゴン</p>
</td>
</tr>
<tr>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/16_あく.png" width="40" /></p>

<p>あく</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/17_はがね.png" width="40" /></p>

<p>はがね</p>
</td>
<td class="uk-text-center">
<p><img src="https://img.wiki3.jp/template/18_フェアリー.png" width="40" /></p>

<p>フェアリー</p>
</td>
</tr>
</tbody>
</table>
</div>

 

ポイント

 

style="width:〇〇〇〇"で幅を決める。

アップロードする画像ファイルは名前を「01_〇〇〇〇」と番号をふっておくと順番通りに並ぶ。

テーブル 表 タイプ 属性

まとめ

 

タイプ分けの表を作成した