blog by izumiz

1. 解決方法1 （手動バージョン）
2. 解決方法2（拡張機能Stylusを用いて自動でスタイルを適用）

• Notionページを印刷するときや，PDFでエクスポートした場合に，中途半端にページを跨いでしまう．

• 章や節，表など任意の箇所でページを区切り，閲覧性を高めたい．

1. ページをHTMLでエクスポート
2. ChromeでエクスポートしたHTMLを編集
3. Chromeから印刷またはPDFで保存

1. Notion右上の「…」をクリック
2. エクスポート
3. 「エクスポート形式」を「HTML」にして保存

1. Zipを解凍し，ChromeでエクスポートしたHTMLファイルを開きます
2. 「ページの先頭にしたい行」を右クリック→検証（デベロッパーツールが起動します）
3. 「スタイル」内のelement.styleが次のようになるように編集します

element.style {
    break-before: page;
}

上記のCSSによって，行の直前に改ページを挿入することができます．

この操作をページの先頭にしたい行に対し，行ってください．

1. Chrome右上の「︙」から，印刷
2. プレビューで改ページされていることを確認し，印刷もしくはPDFとして保存しましょう
3. （この際，詳細設定から倍率をカスタムにし，80%などにすることで全体のフォントサイズなど調整可能です．デフォルトだとやや大きめな印象です．）

以下追記です．

上記の方法では，毎回CSSを編集する必要があり，めんどくさい！と思い，何か他の方法を考え，自動でCSSを適用できるStylusを使用することで，手間を省く方法を記しておきます．

Stylus - Chrome ウェブストア

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

https://chrome.google.com

この拡張機能はユーザが任意のCSSスタイルをウェブサイトに適用できるものです．

エクスポートしたHTMLに対して，CSSを自動で適用するようにします．

次の設定を行なって，ローカルファイルに対して拡張機能を使えるようにしましょう．

1. アドレス欄に chrome://extensions を入力し，移動
2. Stylus 詳細ボタンをクリック
3. 「ファイルの URL へのアクセスを許可する」のトグルを有効に

1. 右上の拡張機能のアイコンからStylusを起動
2. 「次のスタイルを書く：このURL」をクリック（エディタに遷移します）
3. 左上に名前を入力
4. 画面下の適用先，次で始まるURLの部分を，普段エクスポートしているフォルダのパスに設定（例：ダウンロードフォルダであれば，file:///Users/izumiz/Downloads/に指定）
5. 以下のコードを追加し，保存

h2:nth-child(n + 3) {
    break-before: page;
}

Chromeから印刷のプレビューを見ると，見出し2の行が必ず先頭になるようになっているはずです．

今回は見出し2（h2要素）が必ず先頭になるCSSでしたが，h2の部分をh1に変更することで，見出し1を先頭にすることも可能です．