|
10.13 【スタイルシートをいじる】
ちょっとスタイルシートというものを触ってみた。それで10月分の過去ログだけ行間を広くしてみた。うちのページは基本的に細明朝体で美しく表示されるように作っているから、フォントがOsakaなどになっていると間延びして変かも知れないけど……。行間をピクセル単位で絶対指定すれば少しはましになるかも知れないが、フォントサイズを小さくして見ている場合にまた変になってしまうし。
使ってみたきっかけは、MacFanの特集でちょっと触れられていたから。ソースが見にくいけど微妙に見えているのが気になって、いじってみたという次第。
色の指定とかマージンとかは簡単ですぐに実現できたのだが、具体的にどんなプロパティがあるのかがわからないことにはほとんど使い物にならない。サンプルでは枠や背景の指定をしているが、肝心の部分が切れてしまっていてなんだかわからないし……。
そういえば、以前、ドキュメントをダウンロードしてあった。CSS2のものだから各ブラウザがどの程度対応しているのかは不明だが、ページをめくってみることに。とりあえず動いたりなんだりという必要はなくて、テキストをいじることができればいいんだから、16章の「Text」を読む。フォントの指定は15章なんかを見る。行の高さ（line-height）は9章にある。
と、あ、その前に、基本的な2つの単位指定を知っておく方がいいかも。「em」が元のサイズからの相対値、「px」がピクセル指定。ほかにも「ex」とか「in」とかいろいろあるけど、あんまり使いそうにないので省略。
背景はどこだったかな……。忘れた。ま、「background」で色を指定するだけなので難しいことはない。枠は、8章の「Box」を読めばわかる。
そうやって適当にいじってみると、例えば、
こんなことが簡単にできる。スタイルシートに対応していない環境ではなにも起こっていないと思うけど、対応している場合には2重線で囲まれて背景が灰色の領域ができてその中にこのテキストが表示されているはず。
種は、ソースの上の方、<HEAD>タグの中。<STYLE>ってタグがあって、その中に注釈としてスタイルシートの内容が入っている。ここでHTMLを拡張しているわけ。最初に「P.box」と書かれているのは、『<P>タグに"box"というクラスを追加してそれを拡張しますよ』という宣言。<P>タグを直接拡張してもいいのだけど、変更したくない部分まで全部変わってしまうとややこしいから、別物として定義するわけ。
中身では、各プロパティの値を指定する。「property : value; 」の形が続いていて、最初の「align
: center;」なら「align」というプロパティの内容を「center」にするということ。要するに、中央揃えにするというわけ。「text-align」だと中のテキストまで中央揃えになってしまうからここでは「align」を使う。あ、そうそう、この「:」を忘れやすいから注意すること。うまくいかない場合は「:」をチェックしてみるといい。それから、指定する値は""で囲んではいけない。
あとは順に、幅を400ピクセルに、枠を黒の細い2重線に、背景を灰色に、テキストの外側の余白を3ピクセルに、行の高さを1.2倍にしている。ま、そんなところ。
こうして作成した新しい<P>タグを使うには、ソースを見ればわかるように<P
class="box">と指定してやる。ここでの注意は、今度は""で囲まないといけないことくらいかな。あと、指定を終わらせたいところで</P>を入れておかないと次に<P>があるところまで枠に入ってしまうから気をつけること。
ソースを見たら気がつくと思うけど、他の段落では<P class="wide">というのが使われている。ソースの中に「wide」なんてものは定義されていないので不思議に思うかも知れないが、これは別のファイルで定義されている。
<HEAD>タグの中に、<LINK REL = ...>というのがあると思うが、ここで指定されている「amatubu.css」というファイルがその実体。中には<STYLE>タグがあって、「wide」クラスを定義してあるというわけ。こうして別のファイルにわけることによって、似たような形式のページでソースを共有することができる。ま、Cでいうところのヘッダファイルみたいなもんか。ファイル容量的にも得だし、スタイルをちょっと変更したいなんていう場合も一箇所いじるだけでいいから楽だ。
逆に一箇所でしか使わないなら、<P style="color : red">とかいう指定もできる。こっちの方が直感的にはわかりやすいかも。また、ID指定というのもあって別のタグで同じ書式を共有するということもできるらしいけど、このへんはぼくもよく知らないのでまた機会があれば。
とりあえず参考URLは、ここをあげておこう。上に書いたドキュメントがある場所。
|