ウェブページの作成と情報発信−CSSの例

この情報処理授業用の一連のページで使われているスタイルシートの解説をする。このページのソースを見るとhead要素の中に<link rel="Stylesheet" type="text/css" href="standard.css">という行があるのがわかるだろうか。この行でスタイルシートのファイルを指定している。href=で示されているのがそのファイルで、中には次の内容が書かれている。

−−−−−−−−−−ここからがstandard.cssの内容−−−−−−−−−−

@charset "UTF-8"
/* Standard stylesheet for Hisashi Kokubun's web pages. */
/* Created: 26 July 2005 */
/* Modified: 6 Aug. 2005 -- p.reference added*/
/* Modified: 11 Aug. 2005 -- span.rank_author added*/
/* Modified: 11 Jul. 2006 -- h3 & h4 added*/
/* Modified: 12 Jul. 2007 -- img.float_right & br.clr added*/
h2 {
    color: navy;
}
h3 {
    color: navy;
}
h4 {
    color: navy;
}
p.reference {
    /* I like the hanging indent for the reference. */
    margin-left: 4em;
    text-indent: -3em;
}
p.leftspace {
    margin-left: 2em;
}
em.sci_name {
    /* Emphasis for scientific names. They must be set in italic. */
    font-style: italic
}
em.sci_name span.rank_author {
    font-style: normal;
}
table {
    vertical-align: top;
}
dt {
    font-weight: bold;
    color: green;
}
img.float_right {
    float: right
}
br.clr {
    clear: both
}

−−−−−−−−−−ここまでがstandard.cssの内容−−−−−−−−−−

/* ほにゃらら */ はコメントで、この部分は無視される。内容を人間に説明するためのもの。

察しのいい人ならすぐにわかると思うが、h2{ }の括弧内に書かれているのがこのスタイルシートを呼び出したHTMLファイルの中のh2要素に適用されるスタイルで、この例の場合フォントの色をnavyに指定している。

スタイルの適用例(ここはh2)

上のp.referenceというのを解説する。".reference"がクラス属性と呼ばれるもので、p要素にいろいろな意味を持たせ、スタイルシートで見かけを別々に指定できるようにする仕組みである。この段落は単純に<p>で始まっているので、同じp要素ではあるが、このp.reference{ }で指定した内容は適用されない。

ところが、こちらの段落は<p class="reference">で始まっていて、referenceクラスのp要素になっているので、このスタイルが適用される。上のスタイルでは左マージンを4em幅に設定し、1行目のインデントを3em幅ぶら下がるようにしている。これは、論文の参考文献によく使われるスタイルで、referenceという名前もそこに由来している。emという単位だが、これは表示に使われているフォントの大文字のエム (M) の幅であり、欧文フォントの幅の基本単位である。和文フォントでは多分全角1文字幅に等しいと思われるが、まだ調べていない。

次のem.sci_nameは学名を斜体字 (italic) にするために使っている。もともとほとんどのブラウザではem要素は斜体字で表示されるが、実際にはそのような決まりがあるわけではない。そこで、どんなブラウザでも(CSSに対応していれば)間違いなく斜体字になるようにこの指定を使っている。例えば、ナスの学名はSolanum melongenaであるが、ここで<em class="sci_name">Solanum</em>としてあるので、こうして無事に斜体字で表示される。ちなみにsci_nameはscientific nameのことである。クラスの名前は何でもいいのだが、やはり内容を的確に示すようにしておくべきであろう。span要素を使っても同じことができるが、この場合CSS未対応のブラウザでは斜体字でなくなってしまう。emを使えば、スタイルシート未対応のブラウザ(現在はほとんどないとは思うが)でも斜体字になる可能性が高い。i要素を使えば確実に斜体字になるのだが、これを使わない理由は限りなく灰色で、一般的には物理的要素は避けることになっているためであった。

私も、この点についていろいろ考えていたのだが、やっと結論が出た。やはり、emを使うのが正しい。例えば、正式な学名には著者名を含めるのだが、この部分は斜体字にしない。また、種内分類群のランクを示すsubsp.やvar.も斜体字にはしない。これらの部分も学名の一部であるので全部をまとめて学名クラスのem要素とするのは当然であろう。そこでこれらの部分をローマン体に戻すためにspan要素を使うのである。上のem.sci_name span.rank_author{ }の部分がそれで、sci_nameクラスのem要素の中でrank_authorクラスのspan要素が使われた場合にローマン体を使う、という指定である。(ここで、span.rank_authorのローマン体指定をem.sci_nameの中だけに限定する意味があるのかどうかはまだよく考えていない。)もしi要素を使ってしまえば同じことはできるにしてもi要素の中で斜体字を取り消すという矛盾が生じるのがわかるだろうか。

Parodia microsperma (F.A.C. Weber) Speg. subsp. horrida (F.H. Brandt) R. Kiesling & O. Ferrari

いずれにせよ、このように著者名と種内分類群ランクをローマン体にすることができる。(FirefoxとSafariで確認した。)詳しくはこのページのソースを見ること。


HTML解説ページに戻る


2005年7月26日作成、2007年7月12日更新

國分 尚 (Hisashi Kokubun)
hkokubun@faculty.chiba-u.jp