一覧へのスタイルの変更

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

このブログでも何回かテーブル表示で一覧画面のスタイルを変更する方法を紹介してきました。以前は、GridなどでTableの要素を指定する必要があり、わかりづらかった部分があったり、一覧の列の表示順番を変えてしまうと、それも一緒に変える必要があったりと、面倒な部分がありました。

バージョン 0.50.180 で「一覧画面のテーブルのセルにCSSを出力する機能」が追加されました。
これにより、どのように指定できるかを次で説明します。

一覧に表示する項目にセルCSSを設定

それでは、一覧表示のスタイルの変更方法を説明します。
事前にスタイルを指定するテーブルを作成して、データを入れておいてください。

1. メニューから「管理」→「テーブルの管理」を選択します。
2. 「一覧」タブを選択します。
3. スタイルを指定する項目を選択し、「詳細設定」ボタンをクリックします。
4. セルCSSの入力欄に適当な名前を入力します。他と重複しないような名前にします。
   　例：room-name（ここでは会議室名の項目のスタイルということが分かるように指定）
5. 「更新」ボタンをクリックします。
6. 「スタイル」タブを選択します。
7. 「新規作成」ボタンをクリックし、タイトルは「一覧の会議室名のスタイル」などとします。
8. スタイルを指定します。今回サンプルとして下記のように記載しています。
9. 「出力先」は、「一覧」のみにチェックします。
10. 「追加」ボタンをクリックします。
11. 「更新」ボタンをクリックします。

td.room-name{　　　　//セルCSSで指定した名前をtd.の後に指定

    font-size:20px;　　　//フォントサイズを指定

    color:red;　　　　　//フォントの色を指定

    width:100px;　　　//セルの幅を指定

}

まとめ

さて、いかがでしたか？

以前のスタイルの指定を行ったことがある人が設定すると、どれだけ楽になったかが分かるかと思います。
あまり一覧のスタイルを気にしていない人も、一度試してみるとよいかと思います。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。プリザンター逆引き辞典PDF版やスタイル・スクリプトサンプル集PDF版の販売もしております！

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