タグ

ブックマーク / www.koikikukan.com (6)

  • HTML5+RDFaについて

    このブログをHTML5に変更してみました。最近流行のFacebookのOGP(Open Graph Protocol)も設定しました。 HTML5に変更した理由は、OGP(Open Graph Protocol)を設置したときにvalidなHTMLにしたかったからなのですが、そもそもproperty属性はHTML5の属性ではなく、RDFaの仕様のようでした。勉強不足ですいません・・・。OGPを設置するにあたってHTML5にする必要はないようです。 ただしOGPを設置する場合、html要素に「xmlns:prefix」というネームスペースに対応した属性を設定する必要があります。FacebookのOGPに対応する場合は「prefix」に「og」を設定します。この設定はhtml5とかxhtmlには依存しません。 <html lang="ja" xmlns:og="http://ogp.me/ns

    HTML5+RDFaについて
  • 画像を遅延ロードする定番jQueryプラグイン「Lazy Load」

    画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 1.概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考:HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6

  • ol要素のstart属性を使わずにCSSで番号を途中から振る方法

    ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。 番号付きリストで「第10位以降のランキング」など、途中から番号を振るケースは少なくないと思いますので、ご活用頂ければ幸いです。 1.基 ol要素を使えば番号付きリストを作成できます。 HTML <ol> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ol要素にstart属性を使えば、番号を途中から割り振ることもできます。 例えば、次のようにstart属性に「5」を設定すれば、番号付きリストを「5」から開始することができます。 HTML <ol start="5"> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ol> 実行結果 あああ いいい ううう ただし、このstart属性はHTMLあるいは

    pink_dark
    pink_dark 2012/07/18
    「ただし、このstart属性はHTMLあるいはXHTML仕様で非推奨あるいは廃止となっているので、できればというか、start属性は使いたくないところです」。HTML4.01では非推奨だったが、HTML5では使ってもOKになっている。
  • 小粋空間: JavaScript の for 文のパフォーマンスを改善する

    すでにご存知の方も多いと思いますが、for 文のパフォーマンス改善テクニックです。 変更前 for (i = 0; i < elements.length; i++) { : } 変更後 for (i = 0, len = elements.length; i < len; i++) { : } 変更前は、ループ処理の i < elements.length つまり length プロパティの参照が毎回行われます。この、いわゆる「ドットつき比較計算」はコストが高い、ということです。 変更後は初期化式で elements.length を保持しているので、ループ回数にかかわらず参照は1回だけになります。 ただし、ネイティブな配列の場合は変更前後でそれほど差はないようで、NodeList オブジェクト(よくみかける document.getElementsByTagName() 等)では、le

    小粋空間: JavaScript の for 文のパフォーマンスを改善する
  • 小粋空間: Movable Type を始める前に設定しておきたい 10 の項目

    Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。1項から8項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 1.管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基モード」と「詳細モード」の2種類があり、デフォルトは「基モード」になっています。この状態では基設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と

    小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
  • 小粋空間: 新着エントリーのあるカテゴリーに New マークをつける

    「最近のエントリー」の新着エントリーやカテゴリーリスト・サブカテゴリーリストで新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するカスタマイズです(スクリーンショットはサブカテゴリーリストの完成イメージ)。 「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。 動作はエントリー(カテゴリーリストは最新1件)の投稿時間をコメントタグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算

    小粋空間: 新着エントリーのあるカテゴリーに New マークをつける
    pink_dark
    pink_dark 2010/10/21
    [[javascript][check]
  • 1