Gutenberg.cssを使用して印刷用ページを作成する

Webデザイナーはよく忘れます 印刷する それは今日ではそれほど必要ではないように思われるからです。そしてこれはBuzzFeedのようなデジタルサイトにも当てはまるかもしれません。.

しかし、 情報ウェブサイト それを提供することはまだ良い習慣です カスタム印刷スタイルシート. ありがたいことに、自分でデザインする必要はありません。 グーテンベルク 助けるためにここにあります.

印刷機Johannes Gutenbergの発明者にちなんで名付けられたこのCSSライブラリは、 印刷ページデザイン.

あなただけ を追加 gutenberg.css ファイル ドキュメントの頭の中に.

訪問者があなたのページを印刷しようとする時はいつでもそれはあるべきです 自動的に再スタイル 印刷設定に基づきます。これを使用して設定できます。 メディア= "印刷" HTML属性.

もう少し詳しく知りたい場合は、このガイドをチェックしてください。 印刷スタイルシート そして彼らはどのように働くのか.

グーテンベルクのいいところは、 追加のクラスとスタイルが付属しています も.

themesフォルダを調べてみるとわかります 3つの代替印刷テーマ： 本, 現代の, そして 古風. あなたはこれらのどれでも作ることができます デフォルト デフォルトの上にそれらを追加することによって gutenberg.css ファイル.

また、できます 印刷用にページのスタイルを変える 特定のCSSクラスを追加することによって。例えば .無印刷 クラス意志 要素を完全に隠す 印刷スタイル.

別の例は リンクURLの追加 テキストの横にあります。グーテンベルクは、人々があなたのページからURLを見つけやすくするためにこの機能を追加しています。しかし、あなたは追加することができます .再フォーマットなし アンカー要素へのクラス URLを隠す.

これらすべてはGitHubレポジトリでカバーされていて、それは非常に簡単です。あなたはグーテンベルクを持つことができます 5分以内にインストール そしてあなたのサイト全体が印刷用になります.

これは 実装するのがはるかに単純で最もクールなライブラリの1つ より良いサイトパフォーマンスのために。それは数KBを追加するかもしれませんが、全体的な経験は劇的に改善されます。.

あなたのサイトのコンテンツがこれまでにあるかもしれないなら 何らかの理由で印刷された Gutenberg.cssは不可欠なリソースです。.