CSSをどのように使っているか

 このサイトでは,CSSを,通常のテキスト部分だけでなく,MathMLにおいても利用するよう努めています. それも,できるだけCSS部分を一括して管理できるよう,可能な限り共通なファイルにしてあります. これによって,スタイルの変更などが必要になった場合,一括ですべてのファイルの変更が可能になります. これも,私のサイトがIEに対応していない理由の一つです. 実験はしていませんが,おそらくIEで使われているMathPlayerでは,CSSを使うことは不可能だろうと思います.

 今後,CSSはもっときちんと使っていくようにしたいのですが,現状は,HTML内にスタイルシートがあったり,とまだまだいい加減な使い方になっています. 細かい話はのちほど書くとして,スタイルをコンテンツから分離するというCSSの目的がきちんと果たせていません. ここもまだ発展途上です.

印刷は一問ごとに

 数学の問題は紙に印刷したものを鉛筆を動かして解く,というのが一般的な勉強の仕方でしょう. 普通は問題集を見ながら,解答をノートに書いていく,ということになると思います. でも,問題と解答がばらばらだとのちのち見直すときに不便です. また,問題をコピーしてそれをノートに貼って整理する方法もあります. ですが,これだとノートが分厚く,ごわごわしてきて見た目が美しくありません.

 そこでこのサイトでは,印刷のとき,問題1問が1枚に出力されるようにしました. その際,一番上のタイトル部分や,私が設定した問題の分類番号も印刷しないようにしました. つまり,問題をノートに貼った状態がそのまま印刷できます. 印刷の際,ページ数を指定すれば,必要な問題だけ印刷することも可能です (ただし,長文の問題がある場合,ページがずれてしまうこともありますが). 1問ごとに1枚の紙で印刷し,その下の余白部分に解答を書けるようにしたわけです. ですから,印刷用紙にルーズリーフやレポート用紙を使えば,問題の下の余白に解答していく, というやり方で勉強でき,保存したときも大変スマートです.

 これは,画面表示用のCSSとは別に印刷用のCSS(print.cssというファイル名です) を設定することによって実現してあります. 画面通りに複数の問題を続けて印刷したい場合はCSSの設定を変えないといけませんが, CSSさえ変更すれば一括して直すことができます.

日本文は明朝体じゃなくちゃ!

 問題本文のフォントは,明朝体にしました. やはり,問題は明朝体じゃないと,気持ち悪いですよね. そこで,問題の本文についてはCSSで明朝体になるよう設定しました. マッキントッシュの場合はヒラギノを指定してあります. おかげでかなりきれいに表示,印刷できると思います.

 でも,ゴシック体の文字が必要な場合も出てきます. これもspanタグにクラス指定をするなどして適宜フォントがかえられるようにしています. とくに,センター試験の空欄の中の文字は,ゴシック体と明朝体の使い分けが必要です. ですから,本物の問題にあわせてどちらにでもできるようにクラス指定を作ってあります. ただし,MathMLの中でのクラス指定については,FireFox2のときはclass=ではできませんでした. いろいろ実験をして,そのときはMathMLのタグにtype属性で指定すればスタイルが変更できることを見つけました. それで,つい最近まで,過去に作ったファイルはMathMLの中のスタイル指定はクラスではなく,type=という指定がされています. FireFoxの最新のバージョンでは,MathMLの中もクラスでスタイル指定ができるのがわかったので, 今後随時この形に直していきます. 修正したものはファイル名がtest-ver2.cssとなったcssを使っていますので,ソースで見分けがつきます. なお,空欄はすべてMathMLで作っています(最初期のものはspanで作ったものが残っているかも).

 おそらくIEとMathPlayerの組み合わせでは 2バイト文字のフォントのスタイルを式のなかで変更することはまず実現できないと思います (実験したわけではないので,できるのかもしれませんが).

 ところで,FireFox2のときは,UTF-8にすると,明朝体が表示できなかったような記憶があります (というか,そう思い込んでいただけかもしれません). そのため,これまで作っていたファイルはエンコードをShift-JISにしていました. 現在も大半のファイルはShift-JISです. FireFox3ではUTF-8でもきちんと明朝体が表示できることがわかったので, すこしずつShift-JISからUTF-8へ変更しています(作業がけっこう面倒なのでなかなか進みませんが).

行のインデント規則

 さて,行おくりの設定ですが,問題ごとの段落の設定は,原則左詰めです. しかし,小設問があると,その段落の2行目以降は1字右にインデント(つまり左に1文字余白をとる)してあります. その設問のなかがさらに小設問に分かれている場合,そのたびに1字ずつ右にインデントされるように設定しました. この設定は,4段階まで作ってあります(クラスでslevelが最初の段落設定,その後, 小設問があるとs1level,s2level,s3levelのように3段階でインデントをかえています). そんなにいらないだろう,と思っていたのですが,実際にはここまで必要でした.

 もうすこし細かい話をすると,数学の問題では,設問の最初に多くの場合問題番号があります. これは,本文より一文字左に飛び出していることが多いと思います. これを再現するため,私のサイトでは小設問の番号に続く文章が2行,3行となる場合,2行目以降は設問番号より1文字字下げをしました. 設問の区切りがわかりやすくなっていると思います. さらに,設問の途中にブロックの式が入ってくるようなケースでは,式の後の問題文は設問の状態に応じて字下げをそろえる必要があります. そこで,s1level,s2levelなどのクラスとは別にs1sublevel,s2sublevel,などというクラスを作り, 1行目の行頭の字下げが前の段落とそろうような設定も作ってあります.

 こう説明するとわかりにくいと思います.例として2010年の上智大の問題を見てください. 【1】にはpタグにslevelというクラスがつけてあり,左づめになっています. 次の行(1)の段落にはpタグにs1levelというクラスがつけてあり,これは段落のはじめは左詰めですが, 2行目からは1文字あけるようにしてあります. さらにその次の(i)で始まる行は,pタグにs2levelというクラスがつけてあり, (i)の左に1字分の余白を設定してあります.この行は短いので2行目がありませんが, もしあった場合は,(i)が左に飛び出るように左に2文字分余白を設定しています. さらにその次の(Q)で始まる行は,(i)の行の続きの行なので,pタグにs2sublevelというクラスを設定して, 左に3文字分余白ができるように設定しています.

 それから,いわゆるブロックの式(式の部分が文章と切り離されて中央ぞろえになっているもの)については, これは私の趣味ですが,わざと中央ぞろえにせず,本文から右に5文字インデントしてあります. もちろん,cssで指定していますから,気に入らなくなったらまとめて変更できます.

 また,図は,大学によりまちまちな配置になっていますが,このサイトではfloatを設定して原則右寄せにしました. これも当然cssで処理していますので,一括で変更が可能です.

 以上の設定もすべてCSSで行っていますから, どの設定についてもCSSに手を加えることによって簡単に変更できます.

まだまだCSSを使いこなさないと…

 いろいろとCSSについて書きましたが, 実際のところ素人仕事で試してはやり直し,の繰り返しです. 大きな手直しが必要になって,修正作業に追われることが結構あります. 上にも書いたように,いまも,空欄を作るのにspanを使ったりmrowにtype属性をつけて表現するのをやめて, mencloseに修正中です.

 相当手間のかかる仕事ですが, できるだけきれいに表示できることを目指してがんばろうと思います.


前<PDFにしない理由

inserted by FC2 system