CSS での書式設定によるカスタマイズ

shinydashboard で作るダッシュボード

Png Kee Seng

Researcher

shinydashboard をさらにカスタマイズする方法

  • ダークテーマは "black" スキンで実現可能
  • 個々のオブジェクトの見た目は変えられるか？
  • カスケーディングスタイルシート（CSS）で可能
  • 次に CSS の速習
    • 細部は気にしすぎなくてよい
shinydashboard で作るダッシュボード

CSS 入門：コメントの追加

  • CSS はスタイル指定言語
    • 各オブジェクトの見た目を制御
  • CSS コードはセレクタの塊で構成
    • プロパティやサブプロパティなどを持つ
    • 各機能の見た目を管理する辞書を形成
  • CSS コードは文字列として保存
    • シングルクォート '...' を使用
  • CSS にはコメントを挿入できる
css_code <- '
/* これはコメント */
'
shinydashboard で作るダッシュボード

CSS 入門：セレクタ

  • 一つの塊にセレクタがある
    • ある機能に対応
  • .selector は CSS クラスを指す
css_code <- '
/* これはセレクタ */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* これはセレクタクラス */
.selector {
  property1: value1;
  property2: value2;
}
`
shinydashboard で作るダッシュボード

CSS 入門：セレクタの組み合わせ

  • 2 つのセレクタ .class1 と .class2 は .class1 .class2 と結合可能
    • .class1 内の .class2 サブクラスを選択
  • スペースが重要
    • ないと正しく動作しない
css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`
shinydashboard で作るダッシュボード

より具体的な例

  • shinydashboard のヘッダーでフォント設定を変更するには
    • .main-header .logo が必要
    • .main-header クラスを選び、.logo サブクラスを見る
  • 背景色を黒にするには
    • .skin-blue .main-header .logo が必要
css_code <- '
/* メインヘッダーのテキストを整える */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* 背景色を黒に変更 */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'
shinydashboard で作るダッシュボード

完全な例

  • .main-header .logo, .skin-blue .main-header .logo
    • .skin-blue .main-header .logo:hover
    • .skin-blue .main-header .navbar
  • さらに多くのセレクタの組み合わせがある
css_code <- '
.main-header .logo {
  font-family: "helvetica",  serif, Times, "Times New Roman";
  font-weight: bold;
  font-size: 24px;
}
.skin-blue .main-header .logo {
          background-color: #000000; 
}

.skin-blue .main-header .logo:hover {
          background-color: blue; 
}

.skin-blue .main-header .navbar {
          background-color: #999999;
}
'
shinydashboard で作るダッシュボード

shinydashboard に CSS を適用する

  • CSS コードは dashboardBody() に挿入する

CSS で整えた shinydashboard。

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)
shinydashboard で作るダッシュボード

Ayo berlatih!

shinydashboard で作るダッシュボード

Preparing Video For Download...