目次
最終更新日
2008/05/28 0:25:01
スタイルシート用シート
HTMLに使われるスタイルシートはテキストエディタで簡単に作ることができます。ですがテキストエディタでスタイルシートを見た場合、行数の多い縦に長い文章となりわかり難いものです。
スタイルシートはカスケードスタイルシートと呼ばれ、一つの要素に対して重複してスタイルを指定しても間違いではありません。またデフォルトでもスタイルが指定されています。
このように重複したスタイルのうちどのスタイルが実際に聞いているのかは、スタイル指定の優先度を理解していてもスタイルシートを見るだけでは判断し辛いものです。
福々式ではスタイルシートもまたEXCELのワークシートを使って記述します。このことによりスタイルシートの見通しをテキストエディタで作るよりも数倍良くしています。
ワークシートの記述方法
ワークシートの１行目のA欄はシート識別子で stylesheet になります。
１行目のB欄にはスタイルシートの摘要を書きます。
１行目のC欄にはCSS出力時のファイル名を書きます。空欄の場合はCSSファイルの名前はシート名に拡張子(.css)を付けたものになります。
２行目は見出しです。
３行目以降にワークシートの１行につき１つのセレクタの記述を記入します。
１つのワークシートが一つのスタイルシートになります。
ワークシートのA欄にはセレクタの説明を記入します。B欄にはセレクタを記入します。見出しのC欄以降には属性を記入します。セレクタと属性の交差するセルに属性値を記入します。
例えば次のような表になります。
| stylesheet | 春のスタイル | spring.css | ||||
| 説明 | セレクタ | background | margin | font-size | font-weight | color |
|---|---|---|---|---|---|---|
| ボディ部 | body | #fffafa | ||||
| ページ本体 | #page | #fff | 0 auto 0 auto | 80% | ||
| 内容見出 | h1 | 160% | bold | #644 | ||
| 記事見出し | h2 | 10px 0 0 0 | 100% | bold | #644 | |
| 記事 | p | 100% | ||||
| 順序リスト | ol | 0 0 0 40px | ||||
| リスト | li | 5px 10px 5px 0 | ||||
| アンカー | a | #c06 |
属性は必要なものを横に並べます。必要になるたびに追加していけば構いません。
セレクタも必要なものを縦に並べます。これも必要になるたびに追加していけば構いません。ただし出現順がスタイルの適用に影響することに注意して下さい。
(注)A1欄の先頭が * の行は注釈行になりCSS作成時には無視されます。
CSSへの変換
上記の記述は次のようなスタイルシートに変換されます。どちらが見易いかは一目瞭然です。
/* ボディ部 */
body {
background:#fffafa;
}
/* ページ本体 */
#page {
background:#fff;
margin:0 auto 0 auto;
font-size:80%;
}
/* 内容見出 */
h1 {
font-size:160%;
font-weight:bold;
color:#644;
}
/* 記事見出し */
h2 {
margin:10px 0 0 0;
font-size:100%;
font-weight:bold;
color:#644;
}
/* 記事 */
p {
font-size:100%;
}
/* 順序リスト */
ol {
margin:0 0 0 40px;
}
/* リスト */
li {
margin:5px 10px 5px 0;
}
/* アンカー */
a {
color:#c06;
}
スタイルシートへの変換に難しい規則はありません。セレクタ毎に属性値の記入されている属性だけがスタイルシートとして出力されるだけです。