# Gutenbergしたい（`gutenberg-css`）
```html
```
Gutenbergは、ウェブページを紙に印刷するときの見た目を整えるCSSフレームワークです。
自分で`@media print`を書くほどではないけれど、印刷やPDF保存に最低限対応したい、というときに使います。
読み込むだけで、余白・文字サイズ・改ページなどが印刷向けに調整されます。
:::{note}
Gutenbergは`0.7.0`（2023年3月）以降更新が止まっています。
機能はシンプルなので使えますが、依存する前にメンテナンス状況を確認してください。
:::
## 読み込みたい
```html
```
``に`media="print"`を付けて読み込みます。
`media="print"`があると、このCSSは**画面表示には一切適用されず、印刷（と印刷プレビュー）のときだけ**効きます。
画面のデザインを壊さずに、印刷時の見た目だけを差し替えられます。
テーマは本体に続けて、追加の``で読み込みます。省略してもかまいません。
```html
```
- `oldstyle` … 明朝体・セリフ系の古典的な誌面
- `modern` … サンセリフ中心のすっきりした誌面
- `book` … 書籍風。左右ページで余白を変える
## リンク先URLを本文に出したい
```html
詳しくはドキュメントを参照。
```
画面ではふつうのリンクですが、印刷すると次のように展開されます。
```text
詳しくはドキュメント (https://example.com/docs)を参照。
```
紙ではリンクをクリックできないため、Gutenbergが`href`の値を本文の後ろに書き足します。
自分で書くなら`a[href^="http"]::after { content: " (" attr(href) ")"; }`に相当します。
## 印刷したくない要素を隠したい（`.no-print`）
```html
...
```
`class="no-print"`を付けた要素は、印刷時だけ非表示になります。
紙に不要なものに付けておきます。
- グローバルナビゲーション、パンくず
- サイドバー、広告
- SNSシェアボタン、コメント欄
- 「ページの先頭へ戻る」などの操作ボタン
## リファレンス
- [Gutenberg 公式サイト](https://bafs.github.io/Gutenberg/)
- [BafS/Gutenberg - GitHub](https://github.com/BafS/Gutenberg)
:::{seealso}
- [](./css-media.md)
- [](./css-page.md)
:::