ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とはCSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線（ボーダー）」を付ける方法【 outline 】「枠線（ボーダー）」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加CSSプロパティ【背景関連】
【 background 】背景を設定する方法CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅（フェイス）を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字（漢字）と非表意文字（半角英数字）の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する
【CSS】印刷用CSSをコンテンツに適用する方法
【CSS】
印刷するコンテンツにCSSを適用する方法
印刷するコンテンツにCSSを適用する方法
INDEX
■ はじめに
■ HTMLファイルに印刷用CSSをリンクさせる方法
■ CSSファイル内に印刷用CSSを記述する方法
■ 印刷設定をするためのCSSプロパティ
■ page-break-before - 印刷時に、要素直前で改ページ。
■ page-break-after - 印刷時に、要素直後で改ページ。
■ page-break-inside - 印刷時に、この要素の途中では改ページを禁止。
■ size - 印刷時のページのサイズを指定。@page { ... } 中で使用。
■ marks - 印刷時につけるトンボを指定。
■ page - ＠pageで定義した名前を参照し、@page設定の内容を適用。
■ orphans - 印刷時、ページ下部に最低限印字する行数を指定。
■ widows - 印刷時、ページ上部に最低限印字する行数を指定。
■ page-break-after - 印刷時に、要素直後で改ページ。
■ page-break-inside - 印刷時に、この要素の途中では改ページを禁止。
■ size - 印刷時のページのサイズを指定。@page { ... } 中で使用。
■ marks - 印刷時につけるトンボを指定。
■ page - ＠pageで定義した名前を参照し、@page設定の内容を適用。
■ orphans - 印刷時、ページ下部に最低限印字する行数を指定。
■ widows - 印刷時、ページ上部に最低限印字する行数を指定。
はじめに
Webページを印刷する時に、
CSSによって、印刷設定を指定することができる。
Webだけでなく印刷時にも、
CSSによって、レイアウトを指定することが可能で、
Webのレイアウトデザインとは別に、
印刷用の独自のデザインを適用することも可能。
Back
HTMLファイルに印刷用CSSをリンクさせる方法
「HTMLファイル」に「印刷用CSS」をリンクさせるには、
「HTMLファイル」の「head」タグの間に、
「印刷用CSS」のリンクを貼り付ける。
リンクコードは下記を参照。
「印刷用CSS」のリンクコードと記述位置
<link rel="stylesheet" type="text/css" href="ファイル名.css" media="print">
<head>
<link rel="stylesheet" type="text/css" href="ファイル名.css" media="print">
</head>
<body>
コンテンツ内容のHTMLコード </body>
</html>
記述位置
<html><head>
<link rel="stylesheet" type="text/css" href="ファイル名.css" media="print">
</head>
<body>
コンテンツ内容のHTMLコード </body>
</html>
「media="print"」と記述することで、
「印刷用」のCSSファイルと指定することができる。
Back
CSSファイル内に印刷用CSSを記述する方法
「CSS」ファイル内に、
「印刷」する時だけに適用される「CSSコード」を記述することができる。
「@media print」内にCSSレイアウト設定を記述すると、
印刷時のみに、「@media print」内に記述したCSSレイアウトが適用となる。
書式は、通常の「CSS」レイアウト指定と同じで、
違うのは、「@media print」内にCSSを記述することだけ。
印刷時のみ適用されるCSSレイアウトのサンプルコード
@media print{
/* 印刷時に適用したいレイアウトをCSSで記述する */
}
/* 印刷時に適用したいレイアウトをCSSで記述する */
}
Back
印刷設定をするためのCSSプロパティ
page-break-before
印刷時に、要素直前で改ページ。
page-break-before・page-break-afterの値一覧
| auto | 自動的に改ページ。 |
| always | この要素の位置で常に改ページ。 |
| avoid | 改ページなし。 |
| left | 次ページが左になるように改ページ。 |
| right | 次ページが右になるように改ページ。 |
サンプルコード
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
Back
page-break-after
印刷時に、要素直後で改ページ。
page-break-before・page-break-afterの値一覧
| auto | 自動的に改ページ。 |
| always | この要素の位置で常に改ページ。 |
| avoid | 改ページなし。 |
| left | 次ページが左になるように改ページ。 |
| right | 次ページが右になるように改ページ。 |
サンプルコード
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
Back
page-break-inside
印刷時に、この要素の途中では改ページを禁止。
page-break-insideの値一覧
| auto | 自動的に改ページ。 |
| avoid | 改ページなし。 |
サンプルコード
page-break-inside: avoid;
Back
size
size: auto width height page-size portrait landscape; 印刷時のページのサイズを指定。@page { ... } 中で使用。
sizeの値一覧
| auto | 横幅・縦幅を自動計算。 |
| width | 横幅を単位で指定。 |
| height | 縦幅を単位で指定。省略時は横幅と同じ。 |
| A5 | A5 サイズで印刷。 |
| A4 | A4 サイズで印刷。 |
| A4 | A3 サイズで印刷。 |
| B5 | B5 サイズで印刷。 |
| B4 | B4 サイズで印刷。 |
| letter | レターサイズ(8.5×11in)で印刷。 |
| legal | リーガルサイズ(8.5×14in)で印刷。 |
| ledger | レジャーサイズ(17×11in)で印刷。 |
| portrait | 縦長の方向で印刷。 |
| landscape | 横長の方向で印刷。 |
サンプルコード
@page {
size: A4 landscape;
}
@page mypageconfig {
size: landscape;
}
Back
marks
印刷時につけるトンボを指定。
marksの値一覧
| none | 追加なし。 |
| crop | 裁断トンボを追加印刷。 |
| cross | 調整トンボを追加印刷。 |
| inherit | 継承 |
サンプルコード
marks: crop;
Back
page
＠pageで定義した名前を参照し、@page設定の内容を適用。
pageの値一覧
| auto | 自動設定。 |
| identifier | @page で定義した名前を参照。 |
サンプルコード
@page {
size: A4 landscape;
}
@page mypageconfig {
size: landscape;
}
#xyz {
page: mypageconfig;
page-break-before: right;
}
Back
orphans
widows
Back
