ごはんと飲み物は紙一重

Pythonを中心とした、データ分析や機械学習・深層学習関連の記事を書いてます。あとは気まぐれで書く日記や大学のことなどなど・・・

JupyterにRISEを導入してcss使ってデザインを変えた話

Jupyterでまとめたノートをそのままスライドに使いたい!

このサイトを見てJupyterでスライドを作ることができるとわかり、使ってみるとこれまたらくらくちんでありがたいわけです。

Jupyterでmarkdownつかって丁寧にノートまとめながら、話す際にはpythonを実行しながらスライドを進められるわけですよ。ほんと素晴らしい。とくにハンズオンとかでは効果を発揮するんじゃないかと思うわけです。

ところで、スライドを作っていると常に思うのは、

自分だけのデザインにしたい!

ですよね。だれしもエンジニアがLT用スライドを作ったりなど思った際に必ずや頭をよぎるデザイン問題。

調べてみるとどうやら普通にcssファイルを使って簡単に編集できる模様。

簡単ですね。

なんでもできちゃうJupyterちゃんは万能ですね。

デザイン編集方法

基本的には、Jupyterセル上でマジックコマンドを実行することでcssを読み込みます。

%%html
<link rel="stylesheet" type="text/css" href="custom.css">

すると、cssに基づいてスライドテーマが変わるわけです。

あとは、chromiumベースのブラウザもしくは、chromeで「検証」を使いながら、テーマに関するdivタグやpタグなどを変更していきましょう。

github.com

githubに参考程度にスライドをカスタマイズするcssをアップロードしているので、中身をみながら読み解いていただけると、スライドのデザインが楽しくなってくるかと思います。

ちなみに背景を変更すると、pandasのtableが見づらくなってしまう現象が発生するので、tableタグをデザインして上げるとみやすくなってオリジナルのtableになるのでぜひやってみると良いかと。それと通常はmarginが大きめ取られているので、スライド上側にタイトルを持ってきたい場合にはmarginを小さくするといかにもLT用って感じのスライドになります。

良いJupyterライフを!

  • 参考サイト

RISE (Jupyter)の 見た目(色・フォント)を変更したい!

オシャレなTableデザインサンプル15点 | コトダマウェブ

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30