ページマージンボックス確認用スタイル

概要

Vivliostyleでページレイアウトを調整する際にページ余白(ページマージンボックス)の調整に手間取ることが多いので、ページマージンボックスのそれぞれの領域に名称と枠線を表示するスタイル定義を作成しました。

使用方法

SASS(SCSS)やPostCSSのようなツールで結合するか、CSSファイルの最後にそのままペーストしてコメントにする/しないで表示を制御してください。

page-margin-box.css

@charset "UTF-8";

/*
 * ページマージンボックスの確認用スタイル定義
 */

@page {
    /* 枠線の色 */
    --check-border-color: gray;
    /* 文字の色 */
    --check-font-color: red;
    /* 文字のサイズ */
    --check-font-size: 10px;
}

@page {

    @top-left-corner {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-left-corner";
        color: var(--check-font-color);
    }

    @top-left {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-left";
        color: var(--check-font-color);
    }

    @top-center {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-center";
        color: var(--check-font-color);
    }

    @top-right {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-right";
        color: var(--check-font-color);
    }

    @top-right-corner {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-right-corner";
        color: var(--check-font-color);
    }

    @right-top {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "right-top";
        color: var(--check-font-color);
    }

    @right-middle {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "right-middle";
        color: var(--check-font-color);
    }

    @right-bottom {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "right-bottom";
        color: var(--check-font-color);
    }

    @bottom-left-corner {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "top-left-corner";
        color: var(--check-font-color);
    }

    @bottom-left {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "bottom-left";
        color: var(--check-font-color);
    }

    @bottom-center {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "bottom-center";
        color: var(--check-font-color);
    }

    @bottom-right {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "bottom-right";
        color: var(--check-font-color);
    }

    @bottom-right-corner {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "bottom-right-corner";
        color: var(--check-font-color);
    }

    @left-top {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "left-top";
        color: var(--check-font-color);
    }

    @left-middle {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "left-middle";
        color: var(--check-font-color);
    }

    @left-bottom {
        font-size: var(--check-font-size);
        border: var(--check-border-color) 1px dashed;
        content: "left-bottom";
        color: var(--check-font-color);
    }
}