CSS3では、カンマ区切りで指定すれば、
二つ以上の画像を背景画像として配置することができるようになった。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background          :url("左画像.png") no-repeat  5% center,            │
│                         url("右画像.png") no-repeat 95% center;            │
│}                                                                           │
└──────────────────────────────────────┘
上記は画面中央の左端と右端に画像を配置した例。

ちなみに「background」プロパティは、「background-image」プロパティなど
いくつかの「background」系プロパティをまとめたものだが、
プロパティごとに指定する場合には、それぞれの順番を合わせればよい。
┌──────────────────────────────────────┐
│body {                                                                      │
│    background-image    :url("左画像.png"),                                 │
│                         url("右画像.png");                                 │
│    background-repeat   :no-repeat,                                         │
│                         no-repeat;                                         │
│    background-position : 5% center,                                        │
│                         95% center;                                        │
│}                                                                           │
└──────────────────────────────────────┘

背景画像を二つ以上配置するにはどうすればよいか？

結論からいうとCSS(CSS3の前)では、実現できない。
一つの領域に一つの背景画像となる(もしくは背景画像なし)。

なので、一つの領域に見せかけ、実は二つ以上の領域に分割し
そこでおのおのに背景画像を配置するような方法を採ることになる。

┌──────────────────────────────────────┐
│img {                                                                       │
│    filter              :alpha(opacity=30);     /* 旧IE(IE4以降) */         │
│    -ms-filter          :"alpha(opacity=30)";   /* 旧IE(IE8以降) */         │
│    -moz-opacity        :0.3;                   /* 旧Firefox     */         │
│    -khtml-opacity      :0.3;                   /* 旧Safari      */         │
│    opacity             :0.3;                   /* CSS3          */         │
│}                                                                           │
└──────────────────────────────────────┘
上記は画像を「30%」の濃さに薄める場合の例。

displayに指定できる値を調べてみた。
┌─────────┬────────────────────────────┐
│none              │非表示                                                  │
├─────────┼────────────────────────────┤
│block             │ブロック要素                                            │
│inline-block      │インラインブロック要素                                  │
│inline            │インライン要素                                          │
├─────────┼────────────────────────────┤
│table             │(tableタグ系の)tableタグ相当                            │
│inline-table      │(tableタグ系の)tableタグ相当(インライン要素版)          │
│table-header-group│(tableタグ系の)theadタグ相当                            │
│table-footer-group│(tableタグ系の)tfootタグ相当                            │
│table-row-group   │(tableタグ系の)tbodyタグ相当                            │
│table-row         │(tableタグ系の)trタグ相当                               │
│table-cell        │(tableタグ系の)tdタグ相当                               │
│─────────┼────────────────────────────│
│table-caption     │(tableタグ系の)captionタグ(見出)相当                    │
│table-column-group│(tableタグ系の)colgroupタグ(列グループ定義)相当         │
│table-column      │(tableタグ系の)colタグ(列定義)相当                      │
├─────────┼────────────────────────────┤
│list-item         │liタグ相当                                              │
│marker            │マーカー要素                                  (廃止予定)│
├─────────┼────────────────────────────┤
│ruby              │ルビ要素                                                │
│ruby-base-group   │ルビ要素                                                │
│ruby-base         │ルビ要素                                                │
│ruby-text-group   │ルビ要素                                                │
│ruby-text         │ルビ要素                                                │
├─────────┼────────────────────────────┤
│run-in            │文脈に応じてブロック要素またはインライン要素            │
│compact           │文脈に応じてブロック要素またはインライン要素            │
├─────────┼────────────────────────────┤
│inherit           │親要素を継承                                            │
└─────────┴────────────────────────────┘
いろいろあるんだね。
簡単にdivタグをtableタグ代替にできるようtableタグ系が広まることを期待。

tableタグの全貌は以下のような感じ。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│├caption │  テーブル見出        │                                        │
│├colgroup│  列グループ定義      │列の定義を事前に行うことができる        │
││└col   │    列定義            │                                        │
│├thead   │  ヘッダ行領域        │                                        │
││└tr    │    ヘッダ行          │                                        │
││  ├th  │      ヘッダ行の見出列│                                        │
││  └td  │      ヘッダ行の一般列│                                        │
│├tfoot   │  フッタ行領域        │フッタ行はデータ行より前に定義しないと  │
││└tr    │    フッタ行          │                        いけないので注意│
││  ├th  │      フッタ行の見出列│                                        │
││  └td  │      フッタ行の一般列│                                        │
│└tbody   │  データ行領域        │                                        │
│  └tr    │    データ行          │                                        │
│    ├th  │      データ行の見出列│                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

最も端折った以下の形が結構使われるかも。最初の頃はこれしかなかった気が。。。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│  └tr    │    データ行          │                                        │
│    ├th  │      データ行の見出列│                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

最近の流れだと、ヘッダを付けた以下の形が最もシンプルな形のようだ。
┌─────┬───────────┬────────────────────┐
│table     │テーブル領域          │                                        │
│├thead   │  ヘッダ行領域        │                                        │
││└tr    │    ヘッダ行          │                                        │
││  └th  │      ヘッダ行の見出列│                                        │
│└tbody   │  データ行領域        │                                        │
│  └tr    │    データ行          │                                        │
│    └td  │      データ行の一般列│                                        │
└─────┴───────────┴────────────────────┘

下記のようなsvnコマンドを実行すればファイル名の変更が行える。
┌──────────────────────────────────────┐
│svn rename 旧作業ファイル 新作業ファイル                                    │
└──────────────────────────────────────┘
旧作業ファイルはチェックアウトしているファイルのフルパスを指定する。
新作業ファイルについても、新ファイル名だけではなく、
パスの指定(たいていは旧作業ファイルと同じフォルダ)が必要。
＃rename系コマンドの場合、新ファイル名のみの指定となるのが普通だが
  このコマンドは、あくまでdeleteとadd(つまりmove)のコマンドなので
  このような指定となる。

これを使って、あらかじめコマンドを用意しておき、一括コピペすれば解決となる。

ただし、Windows上では、svnコマンドを既定では使えない。
「command line client tools」が使えるようにインストールしなければならないのだ。
やり方は別途記載済みなので、そちらを参照のこと。

「TortoiseProc.exe」という、TortoiseSVNのGUI操作をコマンドラインから実行できる
実行ファイルがある。

これはいわゆる「svn」コマンドとは違い、あくまでGUI操作同等だという点に注意。

ということを踏まえた上で、「TortoiseProc.exe」を使って見る。

下記のようにコマンドプロンプトから実行してあげると、
右クリックメニューから「名前を変更」を選んだ状態までは一気にもっていける。
┌──────────────────────────────────────┐
│TortoiseProc.exe /command:rename /path:作業ファイル                         │
└──────────────────────────────────────┘
※作業ファイルの部分はチェックアウトしている
  作業ファイルのフルパスである(リポジトリのフルパスではない)

  ┌────────────────────────────────────┐
  │名前変更                                                                │
  ├────────────────────────────────────┤
  │            ┌────────────────────────────┐│
  │新しい名前：│旧ファイル名                                            ││
  │            └────────────────────────────┘│
  │                                            ┌─────┐┌─────┐│
  │                                            │    OK    ││キャンセル││
  │                                            └─────┘└─────┘│
  └────────────────────────────────────┘

よって、あらかじめ変更するファイルを調べておき、コマンドを複数作成しておく。
コマンドプロンプトにまとめてコピペすれば、順番に上記ダイアログが
表示されるので、新ファイル名を手入力していく、という感じにもっていける。

といって、新ファイル名が手入力の時点で要件の半分しか満たしていない感じ。
これは「svn」コマンドで解決するしかないか。

SVN上ファイル名を変更するには、直接作業ファイルのファイル名を変更するのではなく
SVNを通じてリポジトリで管理されているファイル名を変更しなければならない。
┌─┬────────────────────────────────────┐
│×│rename 作業ファイル 新ファイル名                                        │
└─┴────────────────────────────────────┘
SVNを介さないでファイル名を変更するとSVN的には「紛失」扱いになってしまう。

                                                              ┌───────┐
ということで、作業ファイルを右クリックし                      │├SVN更新     │
「TortoiseSVN」から「名前を変更」を選び                       │├SVNコミット │
そのダイアログ上で新ファイル名を入力する必要がある            │└TortoiseSVN │
ということになる。                                            │  └名前を変更│
                                                              └───────┘
しかし、これは変更すべきファイルが多くなると、結構手間になる。

ということで、何か一括で変更できる方法はないか探ってみる。

ちなみに、ファイル名の変更は、最後にコミットして初めて反映されるものなので
その点に注意。
以後、特に断りがなければコミット前までのファイル名変更についての話となる。

ブロック要素を横に並べる方法をまとめた(法の命名は適当)。
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【table法】
┌──────────────────────────────────────┐
│  ┌table ───────────────────────────────┐  │
│  ┌tbody ───────────────────────────────┐  │
│  ┌tr─────────────────────────────────┐  │
│  ┌td──────┐┌td──────┐┌td──────┐┌td──────┐  │
│  │              ││              ││              ││              │  │
│  │              ││              ││              ││              │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
│  └──────────────────────────────────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・自由度が高いがCSSの原則からはずれる
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【float法】
┌──────────────────────────────────────┐
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display:block;││display:block;││display:block;││display:block;│  │
│  │float  :left; ││float  :left; ││float  :left; ││float  :left; │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  ┌div ────────────────────────────────┐  │
│  │                            clear:both;                             │  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・「clear:both」用のダミーdivが必要となる
    (後続のdivタグに「clear:both」役も兼用してもらうこともできるのだが)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【clearfix法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  │::after{clear:both;}                                                │  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display:block;││display:block;││display:block;││display:block;│  │
│  │float  :left; ││float  :left; ││float  :left; ││float  :left; │  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・この方法はモダンブラウザでなければ通用しない(しかし今後の主流となるのでは)
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【inline-block法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │display       ││display       ││display       ││display       │  │
│  │:inline-block;││:inline-block;││:inline-block;││:inline-block;│  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・隙間が空いてしまうので親divに「letter-spacing:-0.4em;」
    子divに「letter-spacing:normal;」(親divの影響を打消)を付加する裏技が必要
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
【absolute法】
┌──────────────────────────────────────┐
│  ┌div ────────────────────────────────┐  │
│  │position:absolute;  height:固定;                                    │  │
│  ┌div ─────┐┌div ─────┐┌div ─────┐┌div ─────┐  │
│  │position      ││position      ││position      ││position      │  │
│  │    :absolute;││    :absolute;││    :absolute;││    :absolute;│  │
│  └───────┘└───────┘└───────┘└───────┘  │
│  └──────────────────────────────────┘  │
└──────────────────────────────────────┘
  ・縦幅が決まっている場合にしか使えない(可変に伸ばせない)

「block」と「inline」があって、その中間に「inline-block」がある。
┌───────────┬──────────────────────────┐
│         CSS          │                      主なタグ                      │
├───────────┼──────────────────────────┤
│display:block;        │div、table                                          │
├───────────┼──────────────────────────┤
│display:inline-block; │img、input、select、textarea                        │
├───────────┼──────────────────────────┤
│display:inline;       │span、a                                             │
└───────────┴──────────────────────────┘
┌─────────────────┬──────┬──────┬──────┐
│                                  │   block    │inline-block│   inline   │
├─────────────────┼──────┼──────┼──────┤
│行の占有                          │     ○     │     ×     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「height」「width」の指定         │     ○     │     ○     │     ×     │
├─────────────────┼──────┼──────┼──────┤
│「padding」の指定                 │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「margin」の指定                  │     ○     │     ○     │△(左右だけ)│
├─────────────────┼──────┼──────┼──────┤
│「vertical-align」の指定          │     ×     │     ○     │     ○     │
└─────────────────┴──────┴──────┴──────┘
  ・昔のブラウザでは「inline-block」は未対応だった(「block」扱いとなる)
    ＃IEはIE8以降で対応、Firefox等も昔は未対応だった
  ・昔のIEでは「inline」でも「height」「width」の指定ができた