コンテンツにスキップ

スタイル

概要

「テーブルの管理」画面の「スタイル」タブでは、テーブルに対してスタイル(CSS)を追加できます。

「スタイル」タブでできること

  • コードエディタでCSSを作成・編集・登録できる
  • CSSの出力先を設定できる
  • CSSの有効化・無効化を切り替えられる
  • ユーザのCSS編集を支援する「コードエディタ」を利用できる(第2世代ユーザインターフェースのテーマを利用している場合)
  • ドラフト機能でCSSの動作をテストできる

Pleasanter Code Assist

Pleasanter Code Assistを導入すると、Visual Studio Codeの高度な編集機能を用いてCSSを作成、編集、追加できます。

前提条件

  1. 設定を行うには「サイトの管理」権限が必要です。

操作手順

「スタイル」タブの表示

  1. ナビゲーションメニューの「管理」をクリックしてください。
  2. 「テーブルの管理」をクリックしてください。
  3. 「スタイル」タブをクリックしてください。

スタイル一覧

「テーブルの管理」画面の「スタイル」タブには、スタイル一覧が表示されます。

テーブルの管理の「スタイル」タブ

一覧の左端に表示されたチェックボックスでスタイルを選択することで、以下の操作を行えます。

No ボタン名 機能
1 上 選択したスタイルを1つ上に移動します。
2 下 選択したスタイルを1つ下に移動します。
3 コピー 選択したスタイルを複製します。
複製されたスタイルはスタイル一覧の一番下へ追加されます。
4 削除 選択したスタイルを一覧から削除します。
「削除」ボタンをクリックすると、ダイアログが表示されます。
「OK」ボタンをクリックすると、一覧から削除されます。

スタイルの新規作成・編集・追加

  1. 「新規作成」ボタンまたはスタイル一覧に追加済みのスタイルをクリックしてください。
  2. スタイルの編集画面が表示されます。
  3. 以下の各項目を設定してください。

    項目名 説明 設定方法
    タイトル スタイルのタイトルを入力します。 任意のタイトルを入力してください。
    スタイル スタイルを入力します。 任意のCSSを入力してください。
    無効 スタイルの有効化・無効化を切り替えます。 無効化するときオンに、有効化するときオフに設定してください。
    ドラフト出力 ドラフト機能を参照してください。 ドラフト機能を参照してください。
    ドラフトキー ドラフト機能を参照してください。 ドラフト機能を参照してください。
    出力先 出力先の画面を選択します。 以下の「出力先の設定方法」を参照してください。

    コードエディタとは

    第2世代ユーザインターフェースのテーマを利用している場合、ユーザのCSS編集を支援する「コードエディタ」を利用できます。

    コードエディタでCSSを編集している画面

    コードエディタが提供する主な編集支援機能は、以下の通りです。

    • シンタックスハイライト
    • コードヒントの表示
    • タブキーでのインデント入力 など

    コードエディタを利用するには、General.jsonのパラメータEnableCodeEditorをtrueに設定してください。

    出力先の設定方法

    「出力先」は、既定で「全て」のチェックがオンになっています。

    出力先は既定で「全て」がオンになっている

    「全て」のチェックをオフにすると、他の出力先が表示されます。任意の出力先を選択してください。

    「全て」のチェックをオフにすると他の出力先が表示される

  4. 新規にスタイルを作成した場合は「追加」ボタンを、既存のスタイルを編集した場合は「更新」ボタンをクリックしてください。

  5. コマンドボタンエリアの「更新」ボタンをクリックしてください。

全て無効化

スタイル一覧の上部にある「全て無効化」をオンにすると、既存のスタイルを全て無効化できます。

スタイル一覧の上部にある「全て無効化」チェックボックス

Warning

「全て無効化」をオンにしても、個々のスタイルの「無効」チェックボックスの状態は変わりません。

レスポンシブ

「レスポンシブ」チェックボックスをオンにしている場合、モバイルデバイス向けにレスポンシブデザインのスタイルシートを出力します。

スタイル一覧の下部にある「レスポンシブ」チェックボックス

トップページ 一覧表示画面 編集画面
トップページをモバイルで表示したところ 一覧画面をモバイルで表示したところ 編集画面をモバイルで表示したところ

対応バージョン

対応バージョン 内容
1.4.14.0 以降 「全て無効化」機能を追加
1.5.7.0 以降 「ドラフト出力」機能を追加

関連情報