各オペレーターには、短い名前 (プレフィックス all なし) の軽量バージョンがあります。 違いは、allinurl はすべての単語を含むリンクを検索するのに対し、inurl は最初の単語を含むリンクのみを検索することです。 クエリの 2 番目以降の単語は、Web ページのどこにでも表示できます。 inurl 演算子も同様の意味を持つ別の -site 演算子とは異なります。 最初のものは、既知の脆弱性を持つコンポーネントを見つけるために広く使用されている、目的のドキュメント (たとえば、/cgi-bin/) へのリンク内の任意の文字列を見つけることもできます。

実際に試してみましょう。 allintext フィルターを使用して、クエリがクレジット カード番号と検証コードのリストを返すようにします。このリストは 2 年後 (または所有者が全員に連続して供給するのに飽きたとき) にのみ有効期限が切れます。

Allintext: カード番号の有効期限 /2017 cvv

若いハッカーが国防総省や NASA のサーバーを「ハッキング」して機密情報を盗んだというニュースを読んだ場合、ほとんどの場合、それはまさに Google を使用する基本的な手法です。 NASA の従業員とその連絡先のリストに関心があるとします。 確かにそのようなリストは電子形式です。 便宜上または見落としのために、組織の Web サイト自体にある場合もあります。 この場合、内部使用を目的としているため、それへの参照がないことは論理的です。 そのようなファイルにはどのような単語が含まれている可能性がありますか? 少なくとも - フィールド「住所」。 これらすべての仮定をテストするのは簡単です。

inurl:nasa.gov ファイルタイプ:xlsx "アドレス"

私たちは官僚主義を利用します

そのような発見は楽しい些細なことです。 本当に確かなキャッチは、Google Webmaster Operators、Web 自体、および探しているものの構造に関するより詳細な知識から得られます。 詳細がわかれば、出力を簡単にフィルタリングし、必要なファイルのプロパティを調整して、残りの本当に価値のあるデータを取得できます。 ここで官僚機構が助けに来るのはおかしい。 誤って Web 上に漏洩した秘密情報を検索するのに便利な典型的な定式化を生成します。

たとえば、米国国防総省のオフィスで義務付けられている配布ステートメント スタンプは、ドキュメントの配布に関する標準化された制限を意味します。 文字 A は、秘密が何もない公開リリースを示します。 B - 内部使用のみを目的とし、C - 極秘など、F まで続きます。これとは別に、最高レベルの国家機密を表す特に重要な情報を示す文字 X があります。 DoDI 5230.24 によると、このようなマーキングは、輸出管理下にある重要な技術の説明を含む文書に割り当てられます。 このような慎重に保護された情報は、米軍に割り当てられた .mil トップレベル ドメインのサイトで見つけることができます。

「配布ステートメント C」inurl:navy.mil

米国国防総省とその契約機関のサイトだけが .mil ドメインに集められているのは非常に便利です。 ドメイン限定の検索結果は非常にクリーンで、タイトルがそれを物語っています。 このような方法でロシアの秘密を検索することは、実際には無意味です。.ru および .rf ドメインでは混沌が支配しており、多くの兵器システムの名前は植物のように聞こえます (PP「キパリス」、自走砲「アカシア」) またはさらには素晴らしい（TOS「ピノキオ」）。

.mil ドメインのサイトのドキュメントを注意深く調べると、検索を絞り込むための他のマーカーが表示されます。 例えば、輸出規制「Sec 2751」への言及など、興味深い技術情報を探すのにも便利です。 公式サイトから削除されることがあるため、検索結果で興味深いリンクをたどることができない場合は、Google キャッシュ (キャッシュ オペレーター) またはインターネット アーカイブ Web サイトを使用してください。

私たちは雲に登ります

政府部門から誤って機密解除された文書に加えて、Dropbox やその他のデータ ストレージ サービスからの個人ファイルへのリンクが、公開されたデータへの「プライベート」リンクを作成する場合があり、Google キャッシュにポップアップ表示されることがあります。 代替サービスや自作サービスの場合はさらに悪化します。 たとえば、次のクエリは、FTP サーバーがインストールされており、ルーターでルーターをアクティブに使用しているすべての Verizon クライアントのデータを検索します。

Allinurl:ftp://verizon.net

現在、そのようなスマートな人々は 4 万人を超えており、2015 年の春にはさらに桁違いに多くなりました。 Verizon.net の代わりに、有名なプロバイダーの名前に置き換えることができます。有名なプロバイダーほど、キャッチが大きくなる可能性があります。 組み込みの FTP サーバーを介して、ルーターに接続された外部ドライブ上のファイルを見ることができます。 通常、これはリモート作業用の NAS、パーソナル クラウド、またはある種のピアツーピア ファイル ダウンロードです。 このようなメディアのすべてのコンテンツは、Google やその他の検索エンジンによってインデックス化されるため、直接リンクを介して外部ドライブに保存されているファイルにアクセスできます。

のぞき構成

クラウドへの大規模な移行の前は、脆弱性のない単純な FTP サーバーがリモート ストレージとして支配されていました。 それらの多くは今日でも関連しています。 たとえば、一般的な WS_FTP Professional プログラムは、構成データ、ユーザー アカウント、およびパスワードを ws_ftp.ini ファイルに格納します。 すべてのエントリがプレーン テキストで保存され、パスワードは最小限の難読化の後にトリプル DES アルゴリズムを使用して暗号化されるため、簡単に見つけて読み取ることができます。 ほとんどのバージョンでは、最初のバイトを破棄するだけで十分です。

このようなパスワードは、WS_FTP Password Decryptor ユーティリティまたは無料の Web サービスを使用して簡単に復号化できます。

任意のサイトをハッキングする場合、通常は、CMS または e コマース アプリケーションの構成ファイルのログとバックアップからパスワードを取得することを意味します。 典型的な構造を知っていれば、キーワードを簡単に示すことができます。 ws_ftp.ini に見られるような行は非常に一般的です。 たとえば、Drupal と PrestaShop には常にユーザー ID (UID) と対応するパスワード (pwd) があり、すべての情報は拡張子が .inc のファイルに保存されます。 次のように検索できます。

"pwd=" "UID=" ext:inc

DBMS からパスワードを明らかにします

SQL サーバーの構成ファイルには、ユーザー名と電子メール アドレスが平文で保存され、パスワードの代わりに MD5 ハッシュが記録されます。 厳密に言えば、それらを解読することは不可能ですが、既知のハッシュとパスワードのペアの中から一致を見つけることができます.

これまで、パスワード ハッシュを使用していない DBMS もあります。 それらの構成ファイルは、ブラウザーで簡単に表示できます。

テキスト:DB_PASSWORD ファイルタイプ:env

Windows サーバーの出現により、構成ファイルの代わりにレジストリが部分的に使用されるようになりました。 ファイルタイプとしてregを使用して、まったく同じ方法でブランチを検索できます。 たとえば、次のようにします。

ファイルタイプ:reg HKEY_CURRENT_USER "パスワード"=

当たり前のことを忘れない

誤って開いて Google によって捕捉されたデータの助けを借りて、機密情報にアクセスできる場合があります。 理想的なオプションは、一般的な形式でパスワードのリストを見つけることです。 アカウント情報をテキスト ファイル、Word 文書、または Excel スプレッドシートに保存できるのは絶望的な人だけですが、それらの情報は常に十分にあります。

ファイルタイプ:xls inurl:パスワード

一方では、そのような事件を防ぐための多くの手段があります。 htaccess で適切なアクセス権を指定し、CMS にパッチを適用し、左側のスクリプトを使用せず、他の穴を塞ぐ必要があります。 robots.txt 除外リストを含むファイルもあります。これは、検索エンジンが指定されたファイルとディレクトリをインデックス化することを禁止します. 一方、一部のサーバーの robots.txt 構造が標準のものと異なる場合、何を隠そうとしているのかがすぐに明らかになります。

任意のサイトのディレクトリとファイルのリストには、標準の碑文のインデックスが先行します。 サービス目的でタイトルに表示する必要があるため、検索を intitle 演算子に限定することは理にかなっています。 /admin/、/personal/、/etc/、さらには /secret/ ディレクトリにも興味深いものが見つかります。

更新をフォローする

ここでは関連性が非常に重要です。古い脆弱性は非常にゆっくりとクローズされますが、Google とその検索結果は常に変化しています。 「最後の 1 秒」フィルタ (リクエスト URL の末尾に &tbs=qdr:s) と「リアルタイム」フィルタ (&tbs=qdr:1) の間にも違いがあります。

Google からの最終ファイル更新日の時間間隔も暗黙的に示されます。 グラフィカル Web インターフェイスを使用して、典型的な期間 (時間、日、週など) の 1 つを選択したり、日付範囲を設定したりできますが、この方法は自動化には適していません。

アドレス バーの外観から、&tbs=qdr: 構文を使用して結果の出力を制限する方法を推測することしかできません。 後の文字 y は 1 年の制限を指定します (&tbs=qdr:y)。m は先月の結果、w は週、d は過去の日、h は最後の 1 時間、n は分を示します。ちょっと待ってください。 Google に通知された最新の結果は、&tbs=qdr:1 フィルタを使用して検索されます。

複雑なスクリプトを作成する必要がある場合は、Google で daterange 演算子を使用してユリウス形式で日付範囲が設定されていることを知っておくと役立ちます。 たとえば、これは、2015 年 1 月 1 日から 7 月 1 日の間にアップロードされた、機密という単語を含む PDF ドキュメントのリストを見つける方法です。

Confidential filetype:pdf 日付範囲:2457024-2457205

範囲は、小数点なしのユリウス日付形式で指定されます。 グレゴリオ暦から手動で翻訳するのは不便です。 日付コンバーターを使用する方が簡単です。

再度のターゲティングとフィルタリング

検索クエリで追加の演算子を指定するだけでなく、リンク本文で直接送信することもできます。 たとえば、filetype:pdf トレイトは as_filetype=pdf コンストラクトに対応します。 したがって、明確化を設定すると便利です。 ホンジュラス共和国のみからの結果の出力が、検索 URL に構造 cr=countryHN を追加することによって設定されているとしますが、Bobruisk の都市 - gcs=Bobruisk からのみです。 の完全なリストについては、開発者セクションを参照してください。

Google の自動化ツールは生活を楽にするように設計されていますが、多くの場合、手間がかかります。 たとえば、ユーザーの都市は、WHOIS を通じてユーザーの IP によって決定されます。 この情報に基づいて、Google はサーバー間の負荷を分散するだけでなく、検索結果を変更します。 地域によっては、同じクエリでも、最初のページに表示される結果が異なり、一部は完全に非表示になる場合があります。 コスモポリタンのように感じ、あらゆる国の情報を検索すると、ディレクティブ gl=country の後の 2 文字のコードが役立ちます。 たとえば、オランダのコードは NL ですが、バチカンと北朝鮮には独自のコードが Google にありません。

多くの場合、いくつかの高度なフィルターを使用した後でも、検索結果が散らかっています。 この場合、クエリにいくつかの例外単語を追加することでクエリを簡単に絞り込むことができます (それぞれの単語の前にマイナス記号が付きます)。 たとえば、 bank 、 names 、および tutorial は、Personal という単語と一緒に使用されることがよくあります。 したがって、よりクリーンな検索結果には、教科書的なクエリの例ではなく、洗練されたクエリが表示されます。

Intitle:"Index of /Personal/" -names -tutorial -banking

最後の例

洗練されたハッカーは、必要なものをすべて自分で提供するという点で際立っています。 たとえば、VPN は便利なものですが、費用がかかるか一時的で制限があります。 自分だけで申し込むのは高すぎます。 グループ サブスクリプションがあるのは良いことです。Google の助けを借りて、簡単にグループに参加できます。 これを行うには、かなり非標準の PCF 拡張子と認識可能なパスを持つ Cisco VPN 構成ファイルを見つけるだけです: Program Files\Cisco Systems\VPN Client\Profiles 。 たとえば、1 つのリクエストで、ボン大学のフレンドリーなスタッフに参加できます。

ファイルタイプ:pcf vpn OR グループ

情報

パスワードは暗号化された形式で保存されますが、Maurice Massard は既にパスワードを解読するプログラムを作成しており、thecampusgeeks.com を通じて無料で提供しています。

Google の助けを借りて、何百もの異なる種類の攻撃と侵入テストが実行されます。 多くのオプションがあり、一般的なプログラム、主要なデータベース形式、多数の PHP の脆弱性、クラウドなどに影響を与えます。 探しているものを正確に知ることで、必要な情報 (特に公開するつもりのなかった情報) を簡単に入手できます。 Shodan は興味深いアイデアを提供するだけでなく、インデックス化されたネットワーク リソースのデータベースでもあります。

サイトの開発、維持、プロモーション

「印刷可能な」Web ページを作成する

インターネット上のサイトを閲覧するとき、訪問者は多くの場合、いくつかのページを印刷して、さらに作業を進めます。たとえば、友人に渡したり、単に必要な情報を保存したりするためです。 特に、製品の説明、価格表、および組織の連絡先の詳細が記載されたページを印刷することがよくあります。

もちろん、コマンドを使用してブラウザで元のページを直接印刷することを気にする人は誰もいません。 密閉するまたは組み合わせ CTRL+Pただし、これにより不要なページ要素 (メニュー、ヘッダーなど) が印刷され、必要な情報を認識しにくくなります。 さらに、モノクロ プリンターで印刷すると、カラー要素は通常見栄えが悪くなります。

ユーザーの利便性のために、サイト開発者は通常、別のページを作成します - 印刷版、必要なテキスト、白黒 (灰色の色合い) の図面、および通信用の連絡先情報のみを残します。

このようなページを作成するときは、不要な装飾要素を削除し、ハイパーリンクをプレーン テキストに置き換え、単語や語句の色の強調表示をなくし、斜体または太字に置き換える必要があります。 ページの上部には、会社のロゴや名前、電話番号などの連絡手段を配置することが望ましいです。 ユーザーがこのページを印刷した場所を探す必要がないように、必ずサイトの名前を指定してください。

ページの下部には、住所、電話、電子メール、ICQ、ウェブサイトの URL など、完全な連絡先の詳細を示すことが望ましいです。

メインページから 印刷版たとえば、次のような適切な画像とテキストを使用できます。

ページ自体に 印刷可能バージョンボタンを設置するのは良い形だと考えられています 密閉する、クリックすると、プリンター設定ウィンドウが開きます。 これには、メソッドが使用されます JavaScript window.print(); これにより、現在のウィンドウの Web ページがプリンターに印刷されます。 メイン ページに戻るためのリンクを投稿することもお勧めします。

ボタンはシンプルなリンクで装飾できます
Print (code Print) と 、しかしもっと興味深い - タグの使用 :

この組み合わせの HTML コードは次のとおりです。

メインページアドレス");" />

どちらの場合も、標準のドキュメントの印刷ウィンドウが開きます。このウィンドウは、指定されたボタンの例をクリックして表示できます。

最後に、印刷ページに統計カウンター コードを含めて、製品またはサービスの説明の「ハード コピー」を保存した訪問者数を追跡することを忘れないでください。ただし、このデータは必ずしも満足できるものではありません。 不運にも...

「サイトの開発、維持、宣伝」に関するお役立ち記事

その中で彼は、注文の詳細ページが印刷された形式では使用できないことを指摘しました。

このツイートを見て唖然としました。スタイルを印刷用に最適化してから長い時間が経ち、それらをチェックすることさえ考えていなかったことに気付きました。

おそらく、ブラウザ ウィンドウのサイズ変更に多くの時間を費やして、サイトがあらゆるサイズや形状で適切に機能するようにしているからかもしれませんし、自分でページを印刷することはめったにないからかもしれません。 理由が何であれ、私は印刷スタイルを完全に忘れていました。それは悪いことです.

Web ページを印刷用に最適化することは重要です。なぜなら、ページを印刷することで、環境に関係なく、可能な限りサイトにアクセスできるようにするためです。 ユーザーとその行動について推測してはなりません。 人々は Web ページを印刷し続けます。 記事、ブログ投稿、レシピ、連絡先情報、地図サイト、または不動産リストを考えてみてください。 いつか誰かがあなたのページを印刷しようとするに違いありません。

私はずっと前に家庭用プリンターを放棄しました.10分間の作業で壊れたといつも思っていたからです. しかし、誰もが私のようなわけではありません。 - Haydon Pickering (インクルーシブ デザイン パターン)

同じような状況に陥った場合は、この記事を読んで簡単に復習してください。 ページを印刷用に最適化していない場合は、次のヒントを参考にしてください。

1. 印刷用接続スタイル

印刷スタイルを含める最良の方法は、CSS で @media ディレクティブを宣言することです。

Body ( font-size: 18px; ) @media print ( /* 印刷スタイルはこちら */ body ( font-size: 28px; ) )

または、スタイルを HTML に含めることもできますが、これには追加の HTTP 要求が必要になります。

2. テスト

スタイルを少し変更するたびにページを印刷する必要はありません。 ブラウザによっては、ページを PDF にエクスポートしたり、印刷プレビューを使用したり、ブラウザで直接デバッグしたりできます。

Firefox で印刷スタイルをデバッグするには、開発者ツールバー (Shift + F2 または [ツール] > [Web 開発者] > [開発者ツールバー]) を開き、入力ボックスに media emulate print と入力して Enter を押します。 アクティブなタブは、リロードされるまでメディア タイプが印刷であるかのように動作します。

Firefox で印刷スタイルをエミュレートする

Chrome で、開発者ツール (CMD + Opt + I (macOS) または Ctrl + Shift + I (Windows) またはメニュー [表示] > [開発者] > [開発者ツール]) を開き、コンソールを表示して、レンダリング パネルを開き、エミュレートから [印刷] を選択します。 CSS メディア メニュー。

Chrome での印刷スタイルのエミュレート

3. 絶対測定単位

絶対単位は画面上では不適切ですが、印刷には最適です。 印刷スタイルでそれらを使用することは完全に安全であり、 cm 、 mm 、 in 、 pt 、または pc などの単位を使用することも推奨されます。

セクション (余白-底: 2cm;)

4. ページ固有のルール

@page ディレクティブを使用して、ページ サイズ、向き、パディングなど、印刷ページに固有のプロパティを設定できます。 これは、すべてのページに特定のインデントを持たせたい場合に非常に便利です。

@media print ( @page ( margin: 1cm; ) )

@page ディレクティブは Paged Media Module 仕様の一部であり、印刷する最初のページまたは空白ページを選択する機能、ページの隅に要素を配置する機能などの優れた機能を備えています。 これは、書籍の印刷にも使用できます。

5.改ページを管理する

印刷されたページは Web ページとは異なりエンドレスではないため、コンテンツはページ間で途切れます。 これがどのように発生するかを制御する 5 つのプロパティがあります。

要素の前で改ページ。

要素を常にページの先頭に配置したい場合は、page-break-before ルールを使用して改ページを強制できます。

セクション ( page-break-before: always; )

要素の後の改ページ。

page-break-after ルールにより、要素の後の改ページを強制または無効にすることができます。

H2 (改ページ後: 常に;)

要素内の改ページ

このプロパティは、要素内での改ページを避ける必要がある場合に役立ちます。

Ul ( page-break-inside: avoid; )

寡婦と孤児（吊り紐）

改ページを制御する必要がない場合もありますが、現在のページに表示される行数と次のページに表示される行数を制御することが重要です。 たとえば、段落の最後の行が現在のページに収まらない場合、最後から 2 番目のページと共に次のページに折り返されます。 これは、対応する widows プロパティがデフォルトで 2 であるためです。これは変更できます。

P (未亡人: 4; )

この問題の反対側に出くわし、現在のページに段落の最初の行しかない場合、段落全体が次のページから始まります。 orphans プロパティがこれを担当し、そのデフォルト値は 2 です。

P (孤児: 3; )

このコードは、段落が次のページに折り返されないように、少なくとも 3 行が現在のページに収まる必要があることを意味します。

これらのプロパティと値のすべてがすべてのブラウザーで機能するわけではありません。さまざまなブラウザーで印刷スタイルを確認する必要があります。

6. スタイルをリセットする

background-color 、 box-shadow 、 color などのスタイルを印刷用にリセットすることは理にかなっています。

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line ( background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; )

印刷スタイルは、!important キーワードを使用しても問題ない数少ない例外の 1 つです。

7. オプションコンテンツの削除

インクを無駄にしないために、タイポグラフィ、広告、ナビゲーションなどの不要なアイテムを削除する必要があります。 display: none プロパティを使用します。

基本的に、メイン コンテンツのみを表示し、それ以外はすべて非表示にすることができます。

本文 > *:not(main) ( 表示: なし; )

8. リンクアドレスの印刷

A:after ( content: " (" attr(href) ")"; )

もちろん、相対リンク、絶対リンク、アンカーなど、すべてがこのように表示されます。 次のオプションがより適切に機能します。

A:not():after ( content: " (" attr(href) ")"; )

クレイジーに見えます、私は知っています。 これらの行が機能する方法は、http で始まるが mywebsite.com を指していない場合、href 属性の値をリンクの横に表示することです。

9. 略語のトランスクリプトの印刷

略語は要素で囲む必要があります title 属性に説明があります。 それを印刷するのは理にかなっています。

Abbr:after ( content: " (" attr(title) ")"; )

10. 背景を印刷する

通常、ブラウザーは、明示的に指示しない限り、背景色と背景画像を印刷しません。 一部のブラウザーでデフォルト設定を上書きできる、標準化されていない print-color-adjust プロパティがあります。

ヘッダー ( -webkit-print-color-adjust: exact; print-color-adjust: exact; )

11.メディアクエリ

次の例のようにメディア クエリを記述した場合、このメディア クエリのスタイルは印刷時に適用されないことに注意してください。

@media screen and (min-width: 48em) ( /* スクリーンのみ */ )

理由を尋ねますか？ CSS ルールは、min-width が 48em で、media-type が screen の両方の条件が満たされた場合にのみ適用されるためです。 screen キーワードを取り除くと、メディア クエリは最小幅の値のみを考慮します。

@media (最小幅: 48em) ( /* すべてのメディア タイプ */ )

12.カード印刷

現在のバージョンの Firefox と Chrome は地図を印刷できますが、Safari はできません。 一部のサービスでは、オリジナルの代わりに印刷できる静的な地図を提供しています。

地図 ( 幅: 400px; 高さ: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: 正確; print-color-adjust: 正確; )

13.QRコード

アドオン 2: グーテンベルク

フレームワークを探しているなら、ページの最適化を少し簡単にする Gutenberg が好きかもしれません。

アドオン 3: ハルティヤ

これは別の印刷スタイル フレームワークです。

多くの場合、あなたが見つけることができるサイトで ページの印刷可能なバージョン. 多くの人は、これはブラウザー自体に組み込まれているものであるか、非常に簡単に実行できるものだと考えています。 実際、これはまったく真実ではありません。 印刷版は通常のページですあなたが必要とする 自分で行う。

この記事の印刷用バージョンを表示できます。 実際、そこには何を表示すればよいのでしょうか。 記事のタイトル、セクション、カテゴリ、著者、テキスト自体、および日付。 このすべてがこのページに表示されます。 メニュー、検索フォーム、さまざまなブロックが必要ですか? それが彼らがそうしない理由だとは思いません。

また、印刷版の幅が 650pxを超えないそうしないと、ブラウザが端を切り取る可能性があります。

だから、あなたはすでにそれを理解しています 印刷版ユーザーが必要とするものを正確に表示して、独自のものを作成する必要があります。 ではやり方について。

がある 2つのオプション: 別のページを作成し、別のスタイルシートを作成します。 最初の選択肢は明らかだと思います。 別のページを作成する 印刷版ありそして、メインページで、この印刷版へのリンクを提供します。 ユーザーはそれをたどり、 「ファイル」→「印刷」彼はそれを印刷します。

2 番目のオプションでは、不要なブロックをすべて非表示にする別のスタイル シートを作成します ( 表示: なし;）、出力コンテンツの適切なサイズを設定します。 次に、このようなスタイル ファイルは次のように接続されます。

ユーザーがこのページを印刷したい場合、ユーザーが見ているものではなく、書かれているものを印刷します。 print.css. 実際、ユーザーはページを 1 つの方法で見ることができ、プリンターはまったく別の方法で見ることができます。

その通りです 印刷可能なバージョンが作成されていますサイトの任意のページ。

印刷用のページを作成するのは難しいと思いませんか? 同じドキュメントをテキストで作成しますが、デザインはなく、通常のページからリンクします。 しかし、検索エンジンは重複コンテンツ用のフィルターを導入しており、ウェブマスターは印刷可能なページをインデックスから非表示にする必要があります。 さらに、サイトの訪問者もあまり便利ではありません。最初に、デザイン要素のない必要なページのコピーに移動してから、[印刷]ボタンをクリックする必要があるためです。

これは、ウェブマスターの作業量を減らし、訪問者がサイトを使いやすくするだけでなく、重複したコンテンツに対する検索エンジンからのペナルティを回避するために CSS が役立つ場所です。

ページ構造

それでは、まず HTML を使用してドキュメントの構造を作成しましょう。 例として、わかりやすくするために表形式のレイアウトを使用することにしました。

ご覧のとおり、水平に配置された 3 つのセルを含むテーブルがあります。 すべてが通常のサイトのようです。左側にナビゲーション、中央にコンテンツ、右側に広告ブロックまたはニュースがあります。 各セルには独自の ID が割り当てられています。 左側は leftcolumn、右側は rightcolumn、中央のコンテンツ セルは content です。

CSS の追加

ここで、CSS を使用して、ページ要素を画面に表示するために使用するスタイルと、印刷時に使用するスタイルをブラウザーに指示する必要があります。 style.css を作成し、そこに次のように記述します。

CSS コードの最初のブロックは、ブラウザーでページ要素を表示する方法を記述します。 @media スクリーンを追加する前に、追加の中括弧でブロックを取得しました。 これは、表示のためにこれらのスタイルを適用する必要があることをブラウザーに伝えます。

ブラウザで見たページはこんな感じ

2 番目のブロックは、最初のブロックと同じページ要素の表示を記述しますが、この場合、文書が印刷されたときに表示される形式であり、@media 印刷パラメーターによって示されます。 有用なコンテンツのみを印刷したいので、左 (#leftcolumn) と右 (#rightcolumn) のセルを display: none に設定して表示されないようにします。

これは、サイトページの印刷版がどのように見えるかです

別のスタイル ファイル

すべてを 1 つのスタイル ファイルにまとめる必要はありません。 代わりに、2 つのスタイル ファイルを使用して、それらをサイトのページに接続するときに、印刷時に使用するスタイル ファイルと画面に表示するスタイル ファイルをブラウザーに指示できます。 最初のもの (画面出力用) は media="screen" パラメーターによって定義され、2 番目のものは印刷に使用され、media="print" パラメーターによって定義されます。

最後に印刷用のスタイルを記述する必要があります。そうしないと、Opera はコンテンツのブロックを、印刷用に選択した白色ではなく、ブラウザーへの出力用の背景色と共に印刷します。

また、印刷時には、コンテンツ ブロックの幅を厳密に 600px に減らします。これは、100% の幅では、プリンターがページの右側のテキストの小さなストリップを「切り取る」ためです。 また、Opera から印刷する場合、用紙の端に沿ったくぼみが Internet Explorer よりもわずかに小さく、用紙上のテキストの行が広いことに注意してください。

印刷用に追加のページを作成する必要がなくなりました。 たとえば、「印刷」というテキストのリンクを使用して、ページを印刷する可能性についてユーザーに通知できます。クリックすると、現在のページをデザインなしで直接印刷する機能に関するメッセージとともにツールチップが表示されます。

記事の転載は禁止です。