2011年01月08日

CSS で 連番つき見出し をつくる

<h1> や、<h2> でつくる見出しに、連番をふってみよう。

Chapter_2

みたいな感じ。

コード

上の表示は、以下の HTML と CSS で実現しています。(ココログでは h3 までが使われているため、h4 からを利用するようにします)

HTML サンプル
<h4>最初のおはなし</h4>
<h4>次のおはなし</h4>
<h5>そのなかの最初</h5>
<h5>そのなかの次</h5>
<h4>最後のお話</h4>
<h5>最後のなかの最初</h5>
CSS サンブル
/* カウンターの初期化 */
body {
  counter-reset: chapter;
  counter-reset: section;
}
/* ブログエントリー タイトル で、chapter リセット */
h3 {
  counter-reset: chapter;
}
/* h4 : チャプター */
h4:before {
  content: counter(chapter) ". ";
  counter-increment: chapter;
}
h4 {
  counter-reset: section;
}

/* h5 : セクション */
h5:before {
  content: counter(chapter) "." counter(section) ". ";
  counter-increment: section;
}
h5 {
}

解説

ポイントは、counter 機能 と、before 機能。
counter 機能
任意の名前で counter を生成して利用できる。
counter-reset: カウンター名; カウンターをリセットする
counter-increment: カウンター名 加算値; カウンター値を増減する(加算値を省略すると、+1 になる)
counter(カウンター名) カウンターの値を出力する。オプションで文字種等の指定も可能
before 機能
before 指定することで、指定のブロックの直前に、ブロックを追加できる
ここでは、この機能を利用して、セクション番号を出力している。
上の説明で、ほぼ言い尽くしてますが、つまり
  • before ブロックに
  • counter 値を表示する
ということ。 counter は、利用ごとに +1 するようにして、上位セクションでリセットします。

はまりポイント

  • counter-reset は、before ではなくて、本体のほうに記述する
    つい before のほうに書きたくなりますが、それでは リセットされません。
  • counter-reset を実行しないと、以降の counter-increment がうまく動作しない
    body で リセットしても不十分なようで、ここでは 必ず出現するはずの h3 でリセットしています。
  • h4:before 内の記述順序にかかわらず、counter-increment が最初に実行されます。
    上記例では、counter-increment は最後に記述していますが、実行は increment が先で、表示は increment 後の値になります。
以上、CSS で 見出しに連番を振る方法。


posted by tekniq at 21:32 | Comment(0) | TrackBack(0) | HTML/css/php/perl/javascript

OpenCV を MacOS でビルド&インストール

Macでも OpenCV を使おう、と、思い立って、インストールしてみたので、手順を記録。

必要なもの




OpenCV Download


OpenCV の サイトから、ver 2.2.0 をダウンロード

Opencvdl


OpenCV 展開



  • 適当なフォルダに展開する。(/Users/sionsiva/OpenCV-2.2.0 とする)
  • build フォルダを作成する (/Users/sionsiva/OpenCV-2.2.0/build)


CMake インストール


CMakeのサイトから、CMake 2.8.3 をダウンロードして、インストールする。

ダウンロードした dmg を開いて、"cmake-2.8.3-Darwin-universal.pkg" をダブルクリックでインストール。

Cmakedl


CMake で Configuration



  • Applications に "CMake 2.8-3" が出来ているので、起動。

  • "Where is the source code:" を 入力 (/Users/sionsiva/OpenCV-2.2.0)
  • "Where to build the binaries:" を 入力 (/Users/sionsiva/OpenCV-2.2.0/build)
  • Configure クリック
  • ビルダーを尋ねられるので "Xcode" を選択する
  • 設定項目が表示されるので "BUILD_EXAMPLES" にチェック
  • 再度 Configure クリック
  • Generate クリック


Cmakeconf

これで、ビルド環境構築完了。

Xcode でビルド



  • "/Users/sionsiva/OpenCV-2.2.0/build/OpenCV.xcodeproj" を Xcode で起動
  • "Release | ALL_BUILD" を選択して、ビルド


Xcode


インストール


Xcode で "Release | install" をビルドするわけだが、このままでは "/usr/local/lib" 等へアクセス権が不十分で、失敗する。

そこで、ターミナルから root として Xcode を起動する。

% sudo /Developer/Applicatoins/Xcode.app/Contents/MacOS/Xcode
Password:

で、root パスワード入力すれば、root として Xcode が実行される。

これで "Release | install" をビルドすれば、インストール完了。





以上、MacOSX への OpenCV インストール手順。


posted by tekniq at 02:45 | Comment(0) | TrackBack(0) | Mac