まるっとワーク

データ分析・電子工作など気になることを残していきます

JupyterNotebookのセル幅を変更したい

Webブラウザ上でソフトウェアを開発できる環境「Jupyter Notebook」、
デフォルトの設定だと、以下画像のようにウィンドウサイズに対して、コードを書く等の横幅が少し狭いのですよね。

このセル幅を調整できる方法をまとめます。

 f:id:toku_dango:20210228191727p:plain
→現在の状態では、狭くてコードが書ききれない・・画像も大きく表示させることができない・・

目次

JupyterNotebookのセル幅を変更する方法

JupyterNotebookはブラウザ上で動くため、HTMLのスタイル設定であるCSS(スタイルシート)を変更することで調整できます。
簡単な方法として2つを紹介します。

  • CSSファイルを作成する方法
  • NotebookからIPython.displayを用いる方法

CSSファイルを作成する方法

HTMLのスタイルを決めるCSSファイルを設定してあげることで見栄えの変更する方法です。
この方法を一度実行すると、設定が上書きされる為、継続して決めた設定でNotebookを使うことが可能です。

1. custom.cssファイルを作成

 JupyterNotebookは、Homeディレクトリ以下の「.jupyter」に設定用フォルダがあります。

~.jupyter"フォルダ以下に「custom」フォルダを作成し、「custom.css」を作成/格納することで設定を適用させることができます。

~/.jupyter/custom/custom.css

→フォルダ/ファイルを作成する
 
custom.cssには以下を入力して保存する。

.container { width:90% !important; }

→今回は、ウィンドウサイズに対して90%程度の大きさに設定します。
 「!important」をつけてあげないと、設定したCSSファイルの設定が優先されないようなので、必ずつけましょう。

2.JupyterNotebookを再起動

設定後にJupyterNotebookを再起動すると、良い感じに広がりました。

f:id:toku_dango:20210228194427p:plain
 

NotebookからIPython.displayを用いる方法

IPython.displayを使うことで、CSSの設定の上書きが可能となります。
この方法は、既に表示されているNotebookで実行/設定上書きするので、同じ設定を使いたい場合もNotebookを開く毎に実行する必要があります。

1. Notebook上で対応するコードを実行

notebook上で以下コードを実行します。

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:90% !important; }</style>")) #notebookの横幅を変更

→90%の部分を変更すると好みの長さに調整できます。
※この方法でも上の画像と同じように幅が広がります

まとめ

今回はJupyterNotebookのセル幅を変更する方法についてまとめました。
notebookはWebブラウザ上で動くので、HTMLの見栄え設定ができるCSSファイルを調整すれば良いということが分かりましたね。
もちろんセル幅だけでなくいろいろと調整できるのですが、今回初めての投稿なのでこんなもんで・・次も備忘録としてまとめていきます。