JavaScriptこんにちは、martinです。久しぶりの書き庫な気がします。出ていたんで、インストールしてみました。最初に試したことは、他の主要なブラウザでは実装済みのDOMContentLoadedがサポートされているかなぁ、ということでした。よると今後のロードマップに、DOMContentLoadedのサポートがあるようです。リンク先はかなりページが重い)ね。IE9でDOMContentLoadedがサポートされるのはまことに喜ばしいことですが、IE9が普及するのはまだまだずっと先の話でしょう。現状では、IE向けにはDOMContentLoaded相当の機能を自前で実装する必要があります。ppBlogでのoParts.jsでも、doScrollの実行をもって、DOMパース完了とみなすやり方で実装しています。...)ほぼすべての要素について適応可能です。多くのJavaScriptライブラリーでは、document.documentElement.doScroll('left');というふうに、document.documentElementに適用しているケースが殆どですが、何でも良いので、以下のようなやつもOKです。Imageオブジェクトをdocument.bodyにappendChildする必要もありませんし、メモリーリークも起こしません。以下のようにコメント文を生成するメソッドcreateComment()を用いても良いでしょう。これも、既存の文書に作ったコメントをappendする必要はなく、ただ宣言するだけで動きます。}})();doScroll()の引数は省略可能です。省略するとscrollbarDownが適用されるので、document.documentElement.doScroll()だと、実際に画面がスクロールしてしまうかもしれません(なのでたいてい”left”を指定している)。ImageやcreateCommentだと、DOMツリーに追加するわけではないので引数は省略して構いません。Image().doScroll()なんて、短い記述で済むんでいいなぁ、と思うけれど。CSS久しぶりのエントリーです。著作物の引用をしようとした際に、オリジナルがそうであったのでリスト番号付きで文章を引用しようと思いました。引用したい文章は、143節から150節までなので、OL要素を用いてリスト番号を付けようかなと。任意の番号からリスト番号を割り当てる方法を知らなかったので(普通は、1,2,3,...と割り振られる)、調べたついでにエントリーとして残しておきます。strictより古い(あるいはTransitional)仕様では、(非推奨ながら)OL要素にstart属性があるので、下の例のように任意の番号から始めることができます。strictでは、このstart属性が(なぜか)廃止されています。CSSで指定可能だからなのか、その辺りの背景は知りませんが、とにかく廃止されています。かけると誤った使用とのエラー表示になる)。いう指定方法があるのか調べてみました。大きく2通りのやり方があると思います。ひとつはCSSのみでの制御。ひとつはJavaScriptを用いての制御です。具体的なサンプルを見てみましょう。このサンプルでは2通りでのやり方を載せています。→http://p2b.jp/demo/any-numbering-ordered-list1.htmlCSS2.1のみで任意のリスト番号を指定することができますが、counter-resetや擬似要素の:beforeなどを使う必要があり、IE7以下では対応していません。IE6/7を無視できない現状、気軽に使えませんし、何より使い方が分かりづらい。リスト番号が文字に埋もれて見にくい。CSSのみでの制御では、上のスクリーンショットにあるように、リスト内容が長く折り返しが生じる場合、li:beforeによって挿入されたリスト番号が文章に埋もれてしまい、視認性に欠けます。2つ目は、JavaScriptで制御する方法です。比較的簡単に実装でき、どのブラウザも対応しています。下のショットのように、CSSのみでやる場合と違って、リスト番号はOL要素本来のリスト表示を使うので、リストの数字が文章に埋もれることはないです。JavaScriptで指定。リスト番号は文章と独立していて視認性に優れる。スクリプトが無効な環境でも、リスト番号自体は表示されるのでCSSのみでの方法より良いのではと考えます(もっとも番号は1から振られますが)。HTML5にしてしまえば、とても簡単に実装できます。このエントリーの最初に書いたように記述すればOKです。HTML5化ですが、乱暴にいえば、冒頭のDOCTYPE宣言を以下のようにすれば良いです。そのうちppBlogもHTML5化予定ではあります。HTML5でのサンプルを挙げておきます。ValidなHTML5です。li:beforeなどを用いてますが、これらのプロパティーは、OL要素に限らずH2要素など、いろんな要素に使用可能です。http://www.w3.org/TR/CSS2/generate.html#counters最後にですが、最初に挙げたウェブログでのエントリーでは、JavaScriptで指定してます。記事のテキストエリアで以下のように記述しています。});[/script]まとめXHTMLなページが多い現状、廃止されたOL要素のstart属性は使うのに抵抗がある。代用としてCSS2.1のcounter-resetなどで実現できるが、その指定はややこしく、またstart属性の完全な代用ではないし、何よりIE6/7が未対応。JavaScriptでstart属性を指定するやり方は、ややトリッキーではあるが、すべてのブラウザで意図通りに指定可能である。次世代のHTML5なページにすれば、OL要素のstart属性が問題なく使えるようだし、現状のブラウザでも問題ない。[0]明けましておめでとうございます。その他2010年を迎えました。今年が皆さんにとって良い年でありますように。昨年のクリスマスから2週間ほどクリスマス休暇をいただいてましたが、今日から仕事始めです。ppBlogのサポートも再開したいと思います。JavaScriptこんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。便利な仕様だとは思うのですが。ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。例によってIE系はCSS3の対応は遅れています。それらを駆使すれば、CSS3相当のtransformが実装できそうです。transformが使えると何がうれしいって、例えば以下のようなポラロイド写真みたいなギャラリーがCSSのみで簡単に出来ます。実は下のショットはIE8でのものです。IEでもCSS3のtransform相当のことが出来る画像の回転に関して、FirefoxやWebKit系は、画像の中心を回転軸として回転させます(なので回転軸は移動しない)。これは直感的で分かりやすいです。これに対して、IEは回転軸が指定した回転角度によって刻々と移動します。標準仕様に似せようと思うと、回転軸を動かさない様にするための補正計算が必要になります。この計算にちょっとてこずりましたが、何とか回転軸が動かないような補正をすることが出来ました。IEでは、ボックスはx軸とy軸に2点が常に接しつつ、すべるように回転するので軸が常に動く。モノになりそうなものが出来たのでデモサイトを挙げておきます。画像へのマウスオーバーで拡大なんてのもCSSのみで出来るのですが、それもIEで動くようにしています。」FirefoxやSafariでは、完全にCSS3のみで実現していて、IEでは、IE特有のフィルター機能をJavaScirptを通して操作しています。新たに要素を追加しないといけないなど、あまり納得のいくものではありませんでした。今回ドロップシャドウに関しては、あまり凝ることはせずに、IEのフィルター機能を素直にそのまま使っています。Positive='true');実は最近知ったのですが、フィルターのColorには通常のRGB形式だけでなく、透明度も指定できる#AARRGGBBの形式が使えるので、黒色の透明度を高くすればより影っぽくなります。CSS3レベルのぼやけた感じまでは出ませんが、まぁ、これで良しとしましょう。使い方は、簡単で、形はHTCファイルですが、JavaScriptの外部ファイルとして動作するようにしてます。これは、以前のドロップシャドウのスクリプトと同じです。それをIEのみが解釈する条件コメントの中に書いています。Filter)で同等のことを表現します。デモページにあるように、IEでもCSS3のtransformはおよそ実現できるみたいです(まぁ、そもそもがIEのMatrix仕様を参考に実装したのでしょうけど)。このスクリプトを添付しておきます。コメントで、タグエントリーを総表示するときの仕様についてアドバイスがあり、確かにそうだなと思ったので。現状では、タグモードのとき(このサイトに表示されているタグのアイコンをクリックした時)、下のショットのように、縦にリスト表示されます。数が少ないうちはよいですが・・・。これは、アーカイブ表示に準じてそうしたのですが数が増えてくると縦表示は見辛いですね。スタイルシートの制御で横に並べることは出来ますが、タグクラウドの特徴のひとつである「エントリー数に応じて文字の大きさを制御する」というところまではしていませんで(PHPプログラムのmodules/tags.inc.phpの方で)。modules/tags.inc.phpをタグクラウド表示に見合うように修正しました。適切にスタイルシートを設定すると以下のような表示になります。このショットはこのサイトでの例なのですが、タグ数が少ないのであまり雲って感じではないんですが、増えてくると見栄えも違ってくるでしょう。増やしていきたいなぁ。ちなみに、テーマ「ベーシック」での、この部分の表示は以下のようにしています。クラス名などは従来通りです。navy;}これに対応したmodules/tags.inc.phpを添付しておきます。最大文字サイズ(ピクセル)という2行があります。これはタグ表示の文字サイズを制御するためのものです。エントリー数に応じて、タグの文字が大きくなっていきますが、際限なく大きくなっても困るので、上限を設けています。