画面デバイス上で HTML のルックアンドフィールを実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

画面デバイス上で HTML のルックアンドフィールを実現する方法

Susan Sarandon

Sep 21, 2024 am 06:26 AM

How to Have the Look and Feel of An HTML on Screen devices

画面デバイス上の HTML で A4 のルックアンドフィールを実現する方法

私は昔ながらの HTML ページを使用して履歴書を作成し始めましたが、画面上で開いた状態ではそのままでは機能しないことにすぐに気づきました。内容は改ページもなく延々と流れていくだけで、とてもA4の書類とは思えませんでした。これを修正するには、いくつかの CSS と少しの JavaScript を含む、いくつかのトリックを適用する必要がありました。

私の目標は次のとおりです:

履歴書を印刷したときと画面上で同じように見せるため。
PDF または Google ドキュメントのドキュメントと同じ方法で、画面上に個別のページを表示します。

HTML で履歴書を作成する際の課題

履歴書を書き始めたとき、画面デバイス上のブラウザでは A4 などのページのサイズが考慮されていないことにすぐに気づきました。代わりに、コンテンツを継続的に流し続けるだけです。つまり、改ページせずにテキストやセクションが飛び越えることができます。 A4 の寸法に基づいて個別のページを作成するには、コンテンツが一般的な A4 ページの高さを超えるたびに手動で改ページを処理する必要がありました。

主な解決策には、CSS @media 印刷プロパティと改ページプロパティを使用して、コンテンツが 1 ページに長すぎる場合の動作を制御し、JavaScript を適用して画面上の動的コンテンツを処理することが含まれていました。

1. CSS による自動改ページ (印刷用)

印刷時にコンテンツが正しく流れるようにするために、page-break-inside:avoid プロパティを使用しました。このプロパティにより、見出しや大きな段落などの重要な要素が 2 つのページに分割されることがなくなり、ブラウザーが必要に応じてコンテンツを自動的にページに分割できるようになります。

印刷用の HTML の例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4 Styled Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page">
    <h1>Title of Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>

  <div class="page">
    <h1>Title of Page 2</h1>
    <p>Content will automatically break into new pages for printing...</p>
  </div>
</body>
</html>

ログイン後にコピー

印刷用CSS:

/* Define page layout for A4 size */
@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 20mm;
    page-break-after: always; /* Automatically breaks after each page */
    box-shadow: none;
    overflow: visible; /* Ensures content flows properly when printing */
  }

  /* Prevent page breaks inside headers or large paragraphs */
  h1, h2, h3, p {
    page-break-inside: avoid;
  }
}

ログイン後にコピー

この CSS の仕組み:

page-break-after: always; は、印刷モードで各 .page div の後でコンテンツが新しいページに分割されることを保証します。
page-break-inside:avoid; は、ヘッダーや大きなセクションが 2 ページ間で不自然に分割されるのを防ぎます。これは、印刷時にきれいでプロフェッショナルな外観を維持するために不可欠です。

2. JavaScript を使用した画面上の改ページの処理

CSS は印刷用の改ページを処理できますが、画面デバイスは同じようには機能しません。ブラウザーは画面上でコンテンツを自動的に個別のページに分割しないため、コンテンツが A4 ページサイズを超えた場合にそれを検出し、新しいページに動的に分割するには JavaScript が必要でした。

私がそれをどのように管理したかは次のとおりです:

動的ページ分割用の JavaScript:

window.onload = function () {
  const pages = document.querySelectorAll('.page');

  pages.forEach(page => {
    if (page.scrollHeight > page.clientHeight) {
      splitPageContent(page);
    }
  });
};

function splitPageContent(page) {
  const newPage = document.createElement('div');
  newPage.classList.add('page');

  const contentToMove = page.innerHTML.slice(page.clientHeight / 2); 
  newPage.innerHTML = contentToMove;
  page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2);

  // Insert the new page into the DOM after the current page
  page.parentNode.insertBefore(newPage, page.nextSibling);
}

ログイン後にコピー

JavaScript が必要な理由:

画面上では、印刷とは異なり、テキストがオーバーフローしても、ある .page div から次の .page div に自動的に流れることはありません。ブラウザーは単にコンテンツをページの境界を越えて流出させます。上記の JavaScript コードを使用すると、コンテンツのオーバーフローを検出して新しいページに分割し、PDF や Google ドキュメントで期待される複数ページのエクスペリエンスをシミュレートします。

3. 画面と印刷で一貫したページフローを確保する

このアプローチにより、コンテンツはデバイス間で一貫して動作します。

オンスクリーン: JavaScript はコンテンツのオーバーフローを検出し、必要に応じて追加の .page div を作成します。これは、A4 ドキュメントを表示するエクスペリエンスをシミュレートし、きれいに分割されたページ間をスクロールできます。
印刷中: CSS @media 印刷プロパティと改ページプロパティが印刷時の自動改ページを処理するため、ドキュメントは紙の上で洗練されたものと同じように表示されます。

結論

画面デバイス上で A4 ページの外観と操作性を模倣する HTML ドキュメントを構築するには、CSS と JavaScript を組み合わせる必要があります。 CSS だけでも印刷面を効果的に処理できますが、画面上で改ページを管理するには JavaScript が不可欠です。両方を組み合わせることで、画面上でも印刷でもテキストがページ全体にきちんと流れるシームレスなエクスペリエンスを確保できます。

以上が画面デバイス上で HTML のルックアンドフィールを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。