CSSヘッダー	説明
@charset	文字コード
@font-face	フォント
@import	外部CSSファイルのインポート（読み込み）
@media	対象メディアの指定
@namespace	ネームスペース（名前空間）の指定
@page	印刷時のページ設定指定

という設定を指定することができる機能を持っています。

「CSSヘッダー」を利用しなくても、
デフォルト値が、あらかじめ指定されているので、
「CSSヘッダー」なしでも、CSSレイアウトを指定することは可能です。

Web表示と印刷表示を変更したい場合は、
「@media」「@page」を使用して、
印刷時のCSSレイアウトを指定します。

INDEX

■「CSS」外部ファイルの書式
■「CSS」ヘッダーの書式

「CSS」外部ファイルの書式

「CSS」ヘッダーは、
「CSS」ファイルの先頭に記述します。

「CSS」外部ファイルの拡張子

CSSファイル名.css

外部ファイルのサンプルコード

@charset "Shift_JIS";

セレクタ { プロパティ: 値;}
セレクタ { プロパティ: 値 !important;}
セレクタ { プロパティ: 値;}
・
・
・

Back

「CSS」ヘッダーの書式

「CSS」ヘッダーは、
指定しなくても、「CSSレイアウト」は可能ですが、
フォント指定や、印刷設定など、
状況によっては、必ず必要になります。

画面サイズなどによって、
「@media」を指定することで、
異なるレイアウトを指定することも可能です。

「スマートフォン」「PC」「タブレット」など、
閲覧する端末によって、適用するCSSレイアウトを指定できます。

@charset　（必要に応じて記述。省略可能。）

@charset "Shift_JIS";

@font-face　（必要に応じて記述。省略可能。）

@font-face {
font-family: myfont;
src: url(http://www.yyy.zzz/myfont.woff) format("woff");
}
* {
font-family: myfont;
}

@import　（必要に応じて記述。省略可能。）

@import url(http://www.yyy.zzz/style.css);
@import "http://www.yyy.zzz/style.css"; /* CSS2以降 */

@media　（必要に応じて記述。省略可能。）

@media screen {
em { color: red; }
}
@media print {
em { font-weight: bold; }
}
@media print, screen {
em { font-size: 12pt; }
}

サイズ指定をしてメディアを指定する方法

@media screen and (max-width: 900px) {
html,body { height: 100%;}
body { font-size: 14px;}
}

@media screen and (max-width: 400px) {
html,body { height: 100%;}
body { font-size: 10px;}
}

@namespace　（必要に応じて記述。省略可能。）

ネームスペース(名前空間)を指定する方法。
最初の形式は、デフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

/* デフォルトの名前空間 */
@namespace "http://www.w3.org/1999/xhtml";

/* 名前空間(svg)を指定する方法 */
@namespace svg "http://www.w3.org/2000/svg";

「@namespace」で定義した名前空間の使用方法。

h1 { color: red; } /* デフォルトの名前空間の中の h1要素 */
svg|rect { ... } /* svg名前空間の中の rect要素 */

@page　（必要に応じて記述。省略可能。）

「@page」は、
印刷時のページに関する指定をする「CSSヘッダー」。
「余白」「縦横配置」「拡大・縮小指定」「印刷枚数指定」「分割指定」などが指定できる。
「page」は、「@page」の指定内容につけられた名前を指定して、「@page」の指定内容を要素に適用します。「size」は、「@page」内でページサイズと縦横の配置を指定します。

「@page」プロパティの構文

「@page」プロパティで、名前空間を定義し、
印刷ページのCSSレイアウトを指定する方法

@page 名前空間名{
プロパティ名: 値；
size: A4 portrait;
margin: 上部右側下部左側;
};

「@page」プロパティで定義した内容を
「名前空間名」指定で使用する記述

.クラス名{
page : 名前空間名;
}

「@page」プロパティで使用されるプロパティ

プロパティ名	説明
@page	名前空間名の定義
page	名前空間名の指定
page-break-after	改ページの位置：ボックス後
size	ページサイズを定義
orphans	前ページの末尾に最小限必要な行数
widows	次ページの先頭に最小限必要な行数
page-break-before	改ページの位置：ボックス前
page-break-inside	改ページの位置：ボックス内

「page」プロパティの使い方

「page」プロパティは、
定義された名前空間を指定するためのプロパティ。

「page」プロパティの値

「page」プロパティの値	説明
auto	ブラウザに依存
名前空間名	@page に指定した名前空間名
デフォルト	タグ毎のスタイル初期値

「size」プロパティの使い方

「size」プロパティは、
ページサイズを指定するプロパティ。

書式
size : [length]{1,2} | auto | [[page-size] || [ portrait | landscape]];
size : auto;
size : 長さ（横幅と高さ）;
size : 横幅高さ;
size : ページサイズ;
size : A4 portrait;
size : A4 landscape;
size : portrait;
size : landscape;

「size」プロパティの値	説明
デフォルト	タグ毎のスタイル初期値
auto	ブラウザに依存
長さ	横幅と高さの長さ。正方形のサイズ指定になる。
横幅高さ	「スペース」で区切り、2つのサイズを指定。最初の値が、「横幅」。２つ目の値が、「高さ」。
ページサイズ	規格サイズのページサイズ指定方法。「A5」「A4」「A3」「B5」「B4」「letter」「legal」「ledger」のいずれか１つを記述する。
portrait	縦長に配置。「ページサイズ」の指定がない場合、ページサイズは「ブラウザ」に依存。
landscape	横長に配置。「ページサイズ」の指定がない場合、ページサイズは「ブラウザ」に依存。

Back

【CSS】「CSS」ヘッダーの書式