page

/* 名前付きページを設定 */
page: exampleName;
page: chapterIntro;

/* 祖先の名前付きページを使用 */
page: auto; /* 既定値 */

/* グローバル値 */
page: inherit;
page: initial;
page: revert;
page: revert-layer;
page: unset;

  
印刷したい方法
  
    
    改ページなし
  
  
    グループ化した節で改ページ
  
  
    
    章ごとに改ページ
  
  印刷




  

    
目次
    

      
序文
      
はじめに
      
第 1 章 - 名前付きページ
      
第 2 章 - ページの向き
      
第 3 章 - ページのマージン
      
おわりに
    
  
  

    
序文
    

      この本は、CSS の @page アットルールが HTML の本の印刷にどのように役立つかについて解説したものです。
    
  
  

    
はじめに
    

      この本は、 HTML 文書をページとして簡単に印刷する方法を示す概念です。
    
  
  

    
名前付きページ
    
Lorem ipsum
  
  

    
ページの向き
    
Lorem ipsum
  
  

    
ページマージン
    
設定できるページのマージンは 16 種類あります。
    

      
@top-left-corner
      
@top-left
      
@top-center
      
@top-right
      
@top-right-corner
      
@left-top
      
@left-middle
      
@left-bottom
      
@right-top
      
@right-middle
      
@right-bottom
      
@bottom-left-corner
      
@bottom-left
      
@bottom-center
      
@bottom-right
      
@bottom-right-corner
    
    
これらは、マージンのこれらの部分に現れるものを表示するために使用することができます。
  
  

    
おわりに
    
これで、本を書く準備は整いました。
  

@page toc {
  size: a4 portrait;
  @top-center {
    content: "目次";
  }
}

@page foreword {
  size: a4 portrait;
  @top-center {
    content: "序文";
  }
}

@page introduction {
  size: a4 portrait;
  @top-center {
    content: "はじめに";
  }
}

@page conclusion {
  size: a4 portrait;
  @top-center {
    content: "おわりに";
  }
}

@page chapter {
  size: a4 landscape;
  @top-center {
    content: "章";
  }
}

fieldset {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  width: fit-content;
}
body {
  font: 1.1em sans-serif;
}

@media print {
  fieldset {
    display: none;
  }
  section {
    font-size: 2rem;
    font-family: Roboto;
  }
  .chapter {
    border: tomato 2px solid;
  }
  [data-print="grouped"] > #toc,
  [data-print="paged"] > #toc {
    page: toc;
    font-family: Courier;
  }
  [data-print="grouped"] > #foreword,
  [data-print="paged"] > #foreword {
    page: foreword;
    font-family: Courier;
  }
  [data-print="grouped"] > #introduction,
  [data-print="paged"] > #introduction {
    page: introduction;
    font-family: Courier;
  }
  [data-print="grouped"] > #conclusion,
  [data-print="paged"] > #conclusion {
    page: conclusion;
    font-family: Courier;
  }
  [data-print="grouped"] > .chapter,
  [data-print="paged"] > .chapter {
    page: chapter;
  }
  [data-print="paged"] > .chapter {
    border: none;
    break-after: page;
  }
  .chapter > ul {
    columns: 2;
  }
}

const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");

printOption.addEventListener("change", (event) => {
  if (event.target.value === "single") {
    printArea.dataset.print = "single";
  } else if (event.target.value === "grouped") {
    printArea.dataset.print = "grouped";
  } else {
    printArea.dataset.print = "paged";
  }
});

printButton.addEventListener("click", () => {
  window.print();
});