ブログ

2020/03/02
【プリザンター】 第33回)一覧表示で一行おきに色を変えるスタイル

Excelでの一覧表示での一行おきに色を変える方法

こんにちは、CCS田中です。

Excelで表を作成したときに、一行おきに色を変えて(つけて)見やすくすることをすると思います。
Excelの場合は、[テーブルとして書式設定]を行ったり、条件付き書式を使って「=MOD(ROW(),2)=2」などのように書式を入れて、そのところのセルの色を設定することで一行おきに色がつく設定が可能です。
プリザンターの一覧表示は、既定だと何も色がついていない状態ですので、一行おきに色を付けたい場合はスタイルで設定することで実現が可能です。方法は以下をご覧ください。

プリザンターの一覧画面で一行おきに色を付ける方法

それでは手順を説明します。

1.対象となるテーブルを開きます。
2.画面上部のメニューから「管理」→「テーブルの管理」をクリックします。
3.「スタイル」タブを選択して、「新規作成」ボタンをクリックします。
4.スタイルのウィンドウで、[タイトル]に「一行ごとに色付け」などとし、スタイルは以下を記載します。
5.[出力先]は、一度「全て」のチェックを外して、各項目が表示されたら「一覧」にだけチェックをします。
6.「追加」ボタンをクリックします。
7.スタイルタブに戻ったら、「更新」ボタンをクリックします。

記載するスタイル


#Grid tbody tr:nth-child(even) td{
background-color: #E3F2FD;
}



スタイルの説明
1行目は、プリザンターの一覧のタグを指定して、さらにnth-child()を指定しています。
nth-child()は、CSS(カスケードスタイルシート)の疑似クラスで、「親要素から見て何番目の子要素だけにスタイルを適用する」という指定ができるクラスです。上記で「even」は偶数行のみに適用する場合です。奇数行のみに適用する場合は「odd」を指定します。
2行目は、背景色の指定しています。「 #E3F2FD」が色の指定(カラーコード)です。色についてはネットで調べるとサンプルも出てくるので調べてみてください。ちなみに#FFFFFFは白、#000000が黒です。

設定が終わったら、一覧画面を表示してみましょう。
偶数行に色がついていることがわかるかと思います。ためしに「even」のところを「odd」に書てみてください。奇数行に色がつくことがわかるかと思います。


まとめ

さて、いかがでしたか?

今回は一覧画面を一行おきに色をつける方法をご紹介しました。一覧の見やすさがアップすると作業の効率もあがり、間違いも少なくなりますね。今回は簡単なスタイルで効果のあるものなので、ぜひ試してみてください。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】 こちら からお気軽にお問い合わせください☆☆

PAGE TOP