LoginSignup
14
15

More than 5 years have passed since last update.

プリントに対応させるCSS

Last updated at Posted at 2016-02-18

便利なCSSを見つけたんでメモ。
ウェブページをプリントする際に、たとえば「リンク」を「リンク(リンク先)」にしてくれたり、背景を白に、文字色を黒にしてくれたり、tableを見やすくしてくれたり・・するCSS。
ソース:https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css

:alien:

print.css
@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
14
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
15