テーブルサンプル
ノーマルのテーブルのサンプルです。
- thタグのセルは背景がブルー＋中央揃えになります。
- tdタグのセルはmidasiクラスを指定すると背景が薄いブルー＋中央寄せになります。
これで行と列の見出しを別々に指定できます。
5列テーブル（ボタンあり）
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | |
|---|---|---|---|---|
| ◯× | ||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 |
| 星評価 |  |
 |
 |
 |
| 顔評価 |  |
 |
 |
 |
| 詳細レビュー | 詳細へ | 詳細へ | 詳細へ | 詳細へ |
| 公式HP | 公式HP | 公式HP | 公式HP | 公式HP |
6列テーブル（ボタンあり）
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
| 詳細レビュー | 詳細へ | 詳細へ | 詳細へ | 詳細へ | 詳細へ |
| 公式HP | 公式HP | 公式HP | 公式HP | 公式HP | 公式HP |
6列テーブル（ボタンなし）
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
テーブルは記事枠の幅（620px）一杯に広がります。各セルの幅はHTMLに直接スタイルを指定しています。
「shousai url=”#”」→詳細へボタン
「kousiki url=”#”」→公式HPボタン（別ウインドウで開きます）
「marumaru」→二重丸
「maru」→丸
「sankaku」→三角
「batu」→バツ
※列幅や機種にもよりますが、今回のサンプルのように6列以上の場合に詳細ボタン、公式HPボタンを使うと、スマホで「コンパクト表示」を選択した際に1列目の文字が縦に並んでしまいます（iPhone5の場合）。
これはボタンの幅で他のセルの幅が決まってしまうため、そのしわ寄せが1列目にきてしまうためです。この場合は画面も左右にフリック（スライド）すると動いてしまいます。
ですので、テーブル内でボタンを使う場合は5列までにするか、管理画面で「横スクロール」を選択して対応してください。（※当サンプルは「コンパクト表示」で表示させています）
テーブルカラーバリエーション
テーブルのカラーバリエーションはtableタグにクラス属性を指定することで適用します。何も指定しないとブルーになります。
- ピンク：<table class=”tab_pink”>
- グリーン：<table class=”tab_green”>
- 黒：<table class=”tab_black”>
- 白：<table class=”tab_white”>
ピンクバージョン
| NJBナース人材バンク | 看護roo! | ナースではたらこ | 看護のお仕事 | |
|---|---|---|---|---|
| 公式サイト |  |
 |
 |
 |
| 登録料 | 無料 | 無料 | 無料 | 無料 |
| エリア | 全国 |
関東、関西、東海 |
全国 |
全国 |
| お祝い金 | 10万円 |
5万円 |
||
| 特徴 | 1分で非公開求人情報をゲット | 病院の内部情報を事前にたっぷり提供 | 専任コンサルタントによるサポート付き | キャリアコンサルタントによるサポート付き |
| 総合評価 | |
|
|
|
| 詳細レビュー | 詳細へ | 詳細へ | 詳細へ | 詳細へ |
グリーンだよ！
| NJBナース人材バンク | 看護roo! | ナースではたらこ | 看護のお仕事 | マイナビ看護師 | |
|---|---|---|---|---|---|
| 公式サイト | |
|
|
|
 |
| 登録料 | 無料 | 無料 | 無料 | 無料 | 無料 |
| エリア | 全国 |
関東、関西、東海 |
全国 |
全国 |
全国 |
| お祝い金 | 10万円 |
5万円 |
|||
| 特徴 | 1分で非公開求人情報をゲット | 病院の内部情報を事前にたっぷり提供 | 専任コンサルタントによるサポート付き | キャリアコンサルタントによるサポート付き | 就職・転職でお馴染み「マイナビ」が運営 |
| 総合評価 | |
|
|
|
|
ブラックバージョン
| NJBナース人材バンク | 看護roo! | ナースではたらこ | 看護のお仕事 | マイナビ看護師 | |
|---|---|---|---|---|---|
| 公式サイト | |
|
|
|
|
| 登録料 | 無料 | 無料 | 無料 | 無料 | 無料 |
| エリア | 全国 |
関東、関西、東海 |
全国 |
全国 |
全国 |
| お祝い金 | 10万円 |
5万円 |
|||
| 特徴 | 1分で非公開求人情報をゲット | 病院の内部情報を事前にたっぷり提供 | 専任コンサルタントによるサポート付き | キャリアコンサルタントによるサポート付き | 就職・転職でお馴染み「マイナビ」が運営 |
| 総合評価 | |
|
|
|
|
ホワイトバージョン
| NJBナース人材バンク | 看護roo! | ナースではたらこ | 看護のお仕事 | マイナビ看護師 | |
|---|---|---|---|---|---|
| 公式サイト | |
|
|
|
|
| 登録料 | 無料 | 無料 | 無料 | 無料 | 無料 |
| エリア | 全国 |
関東、関西、東海 |
全国 |
全国 |
全国 |
| お祝い金 | 10万円 |
5万円 |
|||
| 特徴 | 1分で非公開求人情報をゲット | 病院の内部情報を事前にたっぷり提供 | 専任コンサルタントによるサポート付き | キャリアコンサルタントによるサポート付き | 就職・転職でお馴染み「マイナビ」が運営 |
| 総合評価 | |
|
|
|
|
スマホでPC版閲覧時のみ文字を拡大したい場合（ズーム機能）
「このテーブルは項目数が多いからPC表示のままが良いけど、こっちのテーブルは項目数が少ないからテキストは拡大したい」という場合に活用します。zoom_table というクラスをtableに指定すると、そのテーブルのみスマホでPCサイトを表示したときに拡大表示されます。
記述方法：＜table class=”zoom_table“＞
スマホ閲覧時のみ拡大
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
PC表示のまま
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
1列目だけ見出しにする場合
1行目の見出し行が不要の場合はthタグを使わず、tdタグを使ってください。そうすると下記のようになります。
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
1列目だけ濃い見出しにする場合
1列目の見出し行に濃い色を指定したい場合は、1列目に当たる要素をtdからthに変えます。
| ◯× | |||||
|---|---|---|---|---|---|
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
枠線のないテーブルにする場合
＜table＞を＜table class=”no-border-table”＞に変更
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
横線のみのテーブルにする場合
＜table＞を＜table class=”yoko-border-table”＞に変更
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
縦線のみのテーブルにする場合
＜table＞を＜table class=”tate-border-table”＞に変更
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
特定のセルの背景を変えたテーブルにする場合
セルに対して直接スタイルを指定します。
例）＜td style=”background-color: #db4f4f;”＞¥3,500＜/td＞
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | 比較物5 | |
|---|---|---|---|---|---|
| ◯× | |||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 | 比較物5の特徴 |
| 星評価 | |
|
|
|
|
| 顔評価 | |
|
|
|
|
テーブルの行揃え変更
<table>タグに下記のクラスを指定することで全て一括で変更することができます。
- 左揃え：class=”hidari”
- 右揃え：class=”migi”
■左揃えサンプル
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | |
|---|---|---|---|---|
| ◯× | ||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 |
| 星評価 | |
|
|
|
| 顔評価 | |
|
|
|
■右揃えサンプル
| 比較物1 | 比較物2 | 比較物3 | 比較物4 | |
|---|---|---|---|---|
| ◯× | ||||
| 特徴 | 比較物1の特徴 | 比較物2の特徴 | 比較物3の特徴 | 比較物4の特徴 |
| 星評価 | |
|
|
|
| 顔評価 | |
|
|
|
これらの設定方法の詳細は、同梱のサンプルショートコードのソースを見てください。
