はじめに

フォントの大きさや印刷範囲の値は、いくつかの箇所に影響を与えています。そのため、一つを変更したら他にも変更した方がいい(変更すべき)ところが出てきます。その辺をまとめてみます。

基本的にはCSS文書を書き直すことになります。

CSS、HTML共に文字コードはUTF-8で書いています。新規に作ったり変更して保存する場合、他の文字コードにならないよう注意します。最近のテキストを扱うソフトなら問題ないと思いますが。

本文のフォントの大きさを変える

デフォルトでは本文の大きさに12ptを指定しています。A4用紙いっぱいに印刷するなら大きめの数値だと思いますが、冊子印刷なので縮小されるため、この辺の指定がいいのではと思っています。指定はwebfont.cssに記述してます。

フォントの大きさを変える場合、CSS文書をいくつか書き換えます。

  1. webfont.cssの2箇所(1箇所でも可)のフォントサイズ指定を変更する
  2. ブラウザの画面と印刷プレビューを比較する
  3. print_basic01.cssの最大幅の指定を変更する

本文の大きさは、小冊子用HTML文書に書かれる文字の大きさの基準になっています。ここを変更すると、見出しなどの大きさも変わります。

フォントの指定にfont.cssを使っている場合は、font.css内を変更します。

webfont.css

「webfont.css」の2箇所を変更すれば、全て変わります。mathMLで数式を書くことがないなら、209行目は変更しなくてもいいと思います。

/*------------------------------------ 初期化*/
body	{
    font-family: "IPAex明朝", serif;
    font-size: 12pt; ←155行目
    }
/*------------------------------------ 数式*/
math *	{
    font-family: "STIX Math", serif;
    font-size: 12pt; ←209行目
    }

font.cssを有効にしている場合は、font.cssの15行目と69行目になります。

ブラウザの画面と印刷プレビューを比較

ブラウザで表示するときも、1行の幅が印刷プレビューと同じになるよう、内容の最大幅を「print_basic01.css」内で指定しています。このときの数値は本文のフォントサイズが12ptの場合にあわせています。

そのため、本文のフォントサイズが変わると、ブラウザでの普通の表示と印刷プレビューとでは、横に表示される文字数が変わってきます。

フォントサイズを13ptに変更した場合、印刷プレビューでは横43文字分になります。ブラウザ上は横47文字の幅で指定しているので、通常の表示と印刷プレビューとで違いが出てきます。

気にしないならそれでいいのですが、同じに表示される方が便利ではあります。

ということで、フォントの数値を変更したら、まずは印刷プレビューの画面で横の文字数を確認しておきます。

サンプルのHTMLファイル「sample_m_book.html」「sample_l_book.html」には、「見本の文章を書きます」という10文字を230回書いた箇所があります。この箇所を見れば、1ページの縦横に文字がいくつ置けるかを確認できます。確認時には、print_book01.cssなど、左側を空けないスタイルで確認した方が無難です。

最大幅の指定を変更

「print_basic01.css」のmax-widthプロパティで指定している数値を変更します。

@media screen {
    body {
        max-width: 47em; ←86行目
        margin: 0 auto;
        border-right: 1px #ff2800 dashed;
        border-left: 1px #ff2800 dashed;
        }
    }

デフォルトは文字12ptで横47em。13ptだと43emになると思います。

他のフォントサイズ変更

たとえば見出しのみ大きさを変更したいといった場合は、「print_basic01.css」(一部「print_book01.css」)内の指定を変更します。

/*------------------------------------ 見出し*/
h1 {
    margin: 3rem 0;
    border-bottom: #000 1px solid;
    font-weight: bold;
    font-size: 1.8em; ←font-sizeの値を変更 1emとか
    text-align: center;
    }

フォントの種類を変更

フォントの種類は「webfont.css」でまとめて指定しています。

/*------------------------------------ 初期化*/
body {
    font-family: "IPAex明朝", serif; ←IPAex明朝を指定 無ければ他の明朝体(セリフ体)
    font-size: 12pt;
    }
/*------------------------------------ アンカー*/
a[href^="http"]::after {
    font-family: "Inconsolata", monospace; ←Inconsolataを指定 無ければ他の等幅フォント
    }
a[href^="mailto"]::after {
    font-family: "Inconsolata", monospace;
    }
/*------------------------------------ 見出し*/
h2, h3, h4, h5, h6 {
    font-family: "IPAexゴシック", sans-serif; ←IPAexゴシックを指定 無ければ他のゴシック体(サンセリフ体)
    }

フォント名を変更した場合、「フォント呼び出し」以下のルールも変更してください。

/*---------------- 本文*/
@font-face	{
	font-family: "IPAex明朝"; ←デフォルトはIPAex明朝
	src: url("font/ipaexm.ttf"); ←ファイル名の場所 IPAex明朝のファイル名「ipaexm.ttf」を指定
	}

どんなフォントにするかはお好みで変更してください。印刷物の使用目的によっては、フォントのライセンスを確認する必要があります。この辺は印刷時のフォントのページで。

印刷範囲を変更

印刷範囲はブラウザ(Firefox)のページ設定で設定しています。

印刷プレビュー画面にあるページ設定ボタンの[余白とヘッダ/フッタ]タブにある、「余白」で変更できます。

印刷作業用Firefox設定ページの印刷設定にも書きましたが、私は上が0mm、下が5mm、左右2mmの設定で使っています。Firefoxのデフォルトが12.7mmなので、余白を狭くし、印刷範囲を広げて使っています。

個々の数値を変更すると、縦横に書ける文字の数も変化します。余白を多くとればその分、書ける文字数は減ってきます。

もし、ヘッダ(ページの上端)にも日付やページ番号、特定の文字列を書きたいなら、上にも5mmほど設定しておきます。

左右いっぱいに文字を書きたいなら、左右の余白を0mmにします。ただ、これは私の環境の場合ですが、冊子印刷の場合とじしろの幅をプリンタドライバで指定するので、綴じる側はどうしても余白(デフォルトで10mm)が空きます。その辺は少なめに設定もできますが、少々読みにくくなりました。

この辺はプリンタの会社や機種にもよって違いがあると思います。

左右の余白を変更した場合

書ける文字数が変わってくるので、「print_basic01.css」のmax-widthプロパティで指定している数値を変更した方がいいと思います。

この辺は、本文のフォントの大きさを変えるで書いたように、印刷プレビューを見て数値を決めます。

上下の余白を変更した場合

縦方向の文字数が変わってくるので、改ページの場所が変わってきます。

このとき、表紙と奥付のページに影響が出ます。表紙の次に空白のページができるなどの不具合が出るかもしれません。表紙や奥付を使っていないなら必要ないかもしれませんが。

表紙と奥付のページは、縦方向のピクセル数を指定しています。この数値を変更します。

:root	{
	--page-height: 1064px; ←この数値を変更
	--page-width: 750px;/*一応指定しておく。今回は使っていない。*/
	}

1064pxは、余白を上0mm、下5mmで設定した場合です。もし上下5mmにしたときは、1046pxくらいを指定します。

サンプルのHTMLファイル「sample_l_book.html」には、縦が1200ピクセル、横が800ピクセルある方眼紙状の画像を貼っています。左に空きがないスタイルで表示し、印刷プレビューでこの画像を見ると、縦横の表示ピクセルがだいたい判ります。

数値を指定したらリロードしてCSSを読み直し、表示を確認します。

他の変更

画像を右側に配置

画像の横に文章が回り込むように表示する時、画像は左側、文章などは右になるようにしています。

これらを逆に配置するCSS「rightimage.css」を作っており、「print_book01.css」にインポートされると画像が右寄せになります。figure要素内にある画像は今までと同じく中央に配置されます。

デフォルトでは指定する箇所をコメントアウトしているので効きません。有効にするには、コメントの記号を消して上書き保存します。

ただ、クラス名「image」のついたdiv要素内の画像は一応右に配置されますが、そうで無い画像は、以降の要素の配置が乱れる場合があります。個人的には使わないのでそのまま放置していますが。

print_book01.css

/*------------------------------------ インポート*/
@import url("print_basic01.css");
@import url("etc.css");
/*@import url("rightimage.css");*/ ←15行目
↑   「/*」と「*/」を削除する   ↑

コメント

コメントはおかしな書き方をしない限り、ブラウザでの表示や印刷に影響を与えません。サンプルのHTML文書やCSS文書にはコメントをいろいろと書いています。

サンプルのHTML文書やCSS文書を変更する場合、コメント箇所を変更したり、新たにコメントを書くことがあるかもしれません。コメントにも書き方が有り、間違うといろいろ面倒なことになってきます。

HTMLとCSSのコメントの書き方は違うので、その辺書いてみます。

HTMLのコメント

書き方はHTML5仕様書の8.1.6 コメントに明記されています。

<!--この中がコメントになります-->

<!--
途中で改行しても問題なし。
-->

<!--コメントの入れ子は <!-- できません --> 途中で二つの連続したハイフンを書くことになるので-->

<!--こういう書き方を
<!-- してしまうことが -->
あるので注意しましょう-->

<!-->こんな書き方はしないと思いますが-->

<!------------こういうのも本当はダメですね------------>

ということで、<!-- で始まって、日本語や英単語を書いて、--> で終わる分には、特に難しく考えることは無いと思います。

連続したハイフンがある程度ならブラウザはコメントだと判断してくれるかもしれません。実際、Firefox34で試したら大丈夫でした。ただ、本来はマズいので、注意するに越したことは無いと思います。

CSSのコメント

CSS2.1仕様書の4.1.9 コメントに明記されています。

コメントの表示

エディタによっては、HTMLやCSSのコメントを自動で色分けしてくれるので便利です。Windowsのメモ帳だとこうはいかないので、できれば良いエディタを使うに越したことはありません。

私はCSSを書くとき、コメントを2種類の見出しとして使っています。

テキストエディタでアウトライン表示すると、CSS文書の全体像がわかるので、編集しやすくなります。

WZ Editor 8だと、[表示]→[設定]でアウトラインの設定を変更。見出しを表す文字列を「見出し認識1」「見出し認識2」に割り当てて使っています。