Blosxomではプラグイン同士が連携することはほとんど考慮されていない。プラグインで何でも出来るけど、なんでも効率的にできるわけではないということで、ここらへんはBlosxomの語られていない闇の部分(誰も興味ないから)。例えばhead.flavourでエントリーのタイトルとかを利用しようとするとプラグインが必要になるので書くわけだけど、いずれblosxom.cgiが読んでくれるファイルを自前で読まなくてはならなくてスーパー非効率的。 上で例として挙げたpermalinkでエントリーのタイトルをtitle要素にぶち込むプラグインというのを考えてみる。ストレートに実装すると、better_titleやstorytitle、entry_titleみたいにheadサブルーチンでエントリーファイルを読んでタイトルを切り出して変数に格納することになる。これをどうにかして自前でファイルを読まないよう

display: table-cellした要素の中で疑似要素を使った画像置換をcontent: ""(空文字指定)でやると、Internet Explorer 9以外の現行ブラウザーでは謎の空白が出来てしまう現象に遭遇した。説明難しい。IE9以外で同じ挙動なので多分仕様に従ったものなんじゃないかなーとは想像できるんだけど、どうしてこうなるのかよくわからないのでメモがてら書いておく。直す方法だけは一応発見した。 Demo: display: table-cell and content: "" for image replacement デモではdisplay: table-cellとしたdiv要素の中で、疑似要素を使ってテキストを追い出す形の画像置換を行なっている。contentプロパティーで空文字を指定している場合画像置換で表示した画像の下に空白が(一行分？)できている。.irというクラ

SassはCSSの貧弱さを補うような便利機能について取り上げられることが多い。そのためその機能の奥に隠れているものについて触れられることはあまりない。例えば変数や四則演算、関数によって値に論理的な意味を持たせることができることとか。そういうCSSに足りない概念の導入できることとかももちろん周知させたいけど、それ以上にHTMLとCSSによるWebサイトの作成に新たなアプローチが加わることを周知させられればいいなぁと最近思う。Sassの存在意義というのはその辺りに見いだせるんじゃないかと考えているので。もう「CSSグラデーションのミックスイン！」とかスニペットでやれるようなことを推すのはやめたい(やめてほしい)。 現状ではWebサイトは以下の2つのアプローチでしか作成(更新)できない。 HTMLで文書をマークアップして、それに合わせてCSSにセレクターを書く CSSでデザインを定義して、それに

Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ

まっとうな手段というか正攻法だとInkscapeを使うわけだけど、公式Wikiのどっか(忘れた……)にも書いてあるようにWindowsだと一部フォントがリストに出てこない(少し前のバージョンで直ったバグの話ではない)。例えばWebdingsであるとか多くのDingbatフォントがコレに該当する。そういうフォントのグリフを使いたい場合はFontForgeでグリフをSVGとしてエクスポートするのが一番簡単だと思う。 FontForgeでフォントを開く エクスポートしたいグリフを選択する メニューのウィンドウからアウトラインウィンドウを開くを選択する 開いたウィンドウのメニューのファイルからExportを選択する 開いたダイアログでフォーマットをSVGにしてエクスポートする これでグリフがSVGのパスになって保存されるのであとはInkscapeで調節するなり、エディタでガシガシいじるなりすれば良

あんまりborder-top-left-radiusプロパティーとか使ったことなかったのでスケーラブルな半円をborder-*-radiusプロパティーを組み合わせて作ろうとしてうまく行かなかった。スケーラブルにするのは仕様の理解と一工夫が必要なようだ。100%が100%じゃないことがあるので。 Demo: border-*-radius: 100% デモを見るとわかる(わからない)ように組み合わせによって100%が50%になってしまう。角を丸めた時にその丸まりが重ならないように適当に値を小さくして丸めるとちゃんと仕様で決められていた。つまりデモの最後の例のように縦と横の丸めを別々に指定して重ならないようにすれば、意図した通りに角を丸めることができるだろう。 例えばおわんを伏せたような半円を作りたいなら以下のようなCSSを書けばいける。 .test { border-top-left-ra

opacityプロパティーで1より下が指定された要素はその重なり順が変化するという仕様があるようだ。擬似要素を複数組み合わせて紙をずらして重ねたようにロゴをちょっと改悪した時に初めて知った。いつものChromeのバグかと思った……。 仕様ではpositionプロパティーがstatic以外の要素でopacityプロパティーを1より下にするとz-indexプロパティーが0であるとみなされるようになっている。そのためその要素でz-indexプロパティーを-1にして背面に移動するようにしたり、100等で意識的に手前に持ってきたりするようにしている場合、その重なり順が壊れてしまう。 と、こう書くと結構単純な感じなんだけど、実際には0とみなされた上で新たな重なり順が作られるので、いくつかの要素をまとめて半透明にして重ねまくってたりすると、どういう重なり順になるかとてもイメージしにくい。ので余程の理由が

CSSで文字のアウトラインを描く方法を考えていて、text-shadowプロパティを使って強引に描いてみました。WebKit系で可能な-webkit-text-storkeと-webkit-text-fill-colorプロパティによるものと比べて二重にできるとか多色展開も簡単とかが利点でしょうか。CSS-Trickで一年以上前に話題になってました……。 Demo: Outline Text with text-shdow 二重を例にとると .double { text-shadow: -1px -1px black, 1px -1px black, 1px 1px black, -1px 1px black, -2px -2px white, 2px -2px white, 2px 2px white, -2px 2px white, -3px -3px black, 3px -3px