CSSのうまいまとめ方 - 山形浩生の「経済のトリセツ」

CSSがまだよくわかっていないのでアレなんだが、現在、「経済思想の歴史」の訳で、オリジナルのかなりめちゃくちゃな html を、xhtml1.1 にきちんと対応しようとしてるんだが……

やりたいことは簡単で、タイトル(h1) の部分をバナー状にして、そこに画像も表示させること。で、だいたいできました。以下のようなのをcssに書き：

.margrev_topbanner {margin-left:auto; margin-right:auto;
text-align:left; padding:5ex; background-color:black; color:white;width:70%; /* necessary for ie win */
background-position: 75% center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("./essays/margrev/image/margrevcont.jpg");
}
.keynes_topbanner {margin-left:auto; margin-right:auto;
text-align:left; padding:5ex; background-color:black; color:white;width:70%; /* necessary for ie win */
background-position: 75% center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("./essays/keynes/image/keynesicon.jpg");
}
.classical_topbanner {margin-left:auto; margin-right:auto;
text-align:left; padding:5ex; background-color:black; color:white;width:70%; /* necessary for ie win */
background-position: 75% center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("./essays/keynes/image/keynesicon.jpg");
}

でもってタイトルのところは div class="keynes_topbanner" とかで囲ってやればいい。

<div class="margrev_topbanner">
<h1 id="top">新古典派</h1>
    <h2>- はじめに -</h2>
</div>

これでだいたいやりたいことは実現できて、とりあえずは結構。タイトルはこんなふうになる。

ただ、このcssを見ると、それぞれのclassでちがうのは唯一最後の画像のurlだけだ。でも画像が変わるだけで新しい class を作るのも効率が悪い。このままだとほとんど同じものを20種類くらい作ることになる。cssにはたとえば

.topbanner {margin-left:auto; margin-right:auto;
text-align:left; padding:5ex; background-color:black; color:white;width:70%; /* necessary for ie win */
background-position: 75% center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("%1");
}

とでも書いておいて、htmlのところに

<div class="topbanner" %1="./image/margrevcont.jpg">
<h1 id="top">新古典派</h1>
    <h2>- はじめに -</h2>
</div>

とやると%1のところに画像のurlが代入されて、cssもすっきり、というような仕掛けはないもんだろうか？　一方であまり大げさなスクリプトをここで持ち出すのも面倒だし……　PHPなんて持ち出すほどのもんじゃないし（というよりいまから勉強したくないし）……*1

それにしても、表の中央ぞろえだけで左右margin:autoとかcounterintuitive すぎ。表の罫線面倒すぎ。うー。

追記

実は、上を実現するためのhtmlはこんなふうになっていて、構造的にはとっても汚い。

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.co.jp/search">
<table style="float:right; margin-right:12%;">
<tr valign="top">
<td style="text-align:right">
<a href="http://www.hetwebsite.org/het/essays/margrev/ncintro.htm" style="color:white; text-align:right">原ページ </a><br /><br />
</td>
</tr>
<tr valign="top">
<td>
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="hidden" name="hl" value="ja" />
<input type="hidden" name="ie" value="utf-8" /><br />
<input style="vertical-align: top" type="submit" name="btnG" value="検索" /><a href="http://www.google.co.jp/"><img src="http://www.google.co.jp/intl/ja/logos/Logo_25blk.gif" style="border-width: 0; vertical-align: absmiddle;" height="32" width="75" alt="Google" /></a>
<br />
<span style="font-size:small;color:white">
<input type="hidden" name="domains" value="cruel.org" />
<input type="radio" name="sitesearch" value="" />WWW 検索<br />
<input type="radio" name="sitesearch" value="cruel.org" checked="checked" />cruel.org 検索
</span>
</td>
</tr>
</table>

</form>
<!-- SiteSearch Google -->
</p>
<div class="margrev_topbanner">
<h1 id="top">新古典派</h1>
    <h2>- はじめに -</h2>
</div>

要するに、バナーの右側にあるgoogle検索部分は、h1の上にfloatしている表で、それが右マージンをそろえることでその下のdiv classによる黒バナー部分の空きに垂れ下がっている構造。ほんとは、同じ divのtopbannerのcssをうまく書けば、一つの構造として一体的に処理できるんだろうが……