Webブラウザ上でソフトウェアを開発できる環境「Jupyter Notebook」、
デフォルトの設定だと、以下画像のようにウィンドウサイズに対して、コードを書く等の横幅が少し狭いのですよね。
このセル幅を調整できる方法をまとめます。
→現在の状態では、狭くてコードが書ききれない・・画像も大きく表示させることができない・・
目次
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を再起動すると、良い感じに広がりました。
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%の部分を変更すると好みの長さに調整できます。
※この方法でも上の画像と同じように幅が広がります