┌──────────────────────────────────────┐
│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」の指定ができた

表示済みのタブの選択中タブIDを取得するには、以下の要領で参照すればよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs('option', 'selected')                                      │
└──────────────────────────────────────┘

タブの切り替え操作を実施した瞬間に新タブのタブIDを取得するには
以下のような感じ(ui.index)で行えばよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs({                                                          │
│    select  :function(event, ui) {                                          │
│        $.post(AjaxサーバURL, {"tab_id":ui.index});                         │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
上記のようにAjaxでPOSTしてしまってサーバ側にセッションとして
記録してしまえば、こっそり現在表示しているタブを把握することができる。
→表示時にこのセッション情報を使えば、画面をリロードされても
  初期表示のタブに戻ることなく、直前まで表示中のタブで表示できる

画面リロードの方法としては以下が著名である。
┌──────────────────────────────────────┐
│location.reload();                                                          │
└──────────────────────────────────────┘

以下の方法も使える。
┌──────────────────────────────────────┐
│location.href = location.href;                                              │
└──────────────────────────────────────┘
これは自分自身にリダイレクトすることによりリロード相当としている。

前者と後者の違いはPOST項目を再送信するかという点。
前者は再送信するが、後者はリダイレクトなので再送信しない。

再送信しなければPOST項目を引き継げないが、再送信する場合には
「このページを再表示するには、以前送信した情報を再送信する必要があります」的な
ダイアログが表示される恐れがある。

ちなみに念には念を入れて、GETパラメータ(「?」以降)を除去したURLにすれば
過去(直前)のPOST項目の影響もGET項目の影響も受けなくできる。
┌──────────────────────────────────────┐
│location.href = location.href.replace(/\?.*$/, '');                         │
└──────────────────────────────────────┘