CSS カスケード・スタイル・シート の利用法
1. CSSとは
CSS1勧告邦訳
2. CSS導入 野浪の場合
2.1 読みにくさの解消
が、やがて発車の笛が鳴った。私はかすかな心のくつろぎを感じながら、後ろの窓枠へ頭をもたせて、目の前の停車場がずるずると後ずさりを始めるのを待つともなく待ち構えていた。ところがそれよりも先にけたたましい日和下駄の音が、改札口のほうから聞こえだしたと思うと、間もなく車掌の何か言いののしる声とともに、私の乗っている二等室の戸ががらりと開いて、十三、四の小娘が一人、慌ただしく中へ入って来た。
行間が詰まって読みにくい、どうにかならないか？ と思っていた。CSSがあることを知り、使うようになった。
- 最初は
<body>
を
<body style="line-height:150%;">
として、文字高の50%の行間をとるようにした。
- 次に、
ページ左右の余白が詰まっているのが読みにくいと感じて、
<body>
を
<body style="line-height:150%;margin-left:10%;margin-right:10%;">
とした。
- 後に、
%で指定するのを止め、emで指定するようになった。
<body style="line-height:1.5em;margin-left:2em;margin-right:2em;">
が、やがて発車の笛が鳴った。私はかすかな心のくつろぎを感じながら、後ろの窓枠へ頭をもたせて、目の前の停車場がずるずると後ずさりを始めるのを待つともなく待ち構えていた。ところがそれよりも先にけたたましい日和下駄の音が、改札口のほうから聞こえだしたと思うと、間もなく車掌の何か言いののしる声とともに、私の乗っている二等室の戸ががらりと開いて、十三、四の小娘が一人、慌ただしく中へ入って来た。
2.2 見出しの修飾
2.3 <STYLE> を使う
<H2> が出てくるたびに
<H2 STYLE="font-size:130%;background-color:#ccffcc;margin-top:1em;margin-bottom:1em;padding-left:1em;border:1px solid blue;">
と書いて（コピーして）いるのは面倒なので、<STYLE>を使って、一括指定することにした。
<TITLE>CSS の利用法</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--
H2 {
font-size:130%;
background-color:#ccffcc;
margin-top:1em;
margin-bottom:1em;
padding-left:1em;
border:1px solid blue;
}
-->
</STYLE>
</HEAD>
<BODY style="margin:0em">
こうしておくと、
<H2>H2 を章の見出しに使う</H2>
と書くだけで、以下のようになる。
H2 を章の見出しに使う
2.4 外部 Style Sheets を使う
HTMLファイルが増えてくると、一貫したスタイルにしたくなった。それと、HTMLファイルごとに<STYLE> を使ってスタイルを指定するのも面倒だ。