タグ

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

  • HTMLやCSSでのプロトコル表記(http:、https:)の省略について

    HTMLCSSではプロトコル表記(http:、https:)の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記(http:,https:)を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> 1.プロトコ

  • レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント

    先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル(リンクは2項) 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基的な設定方法については割愛してますので、上記のエントリーを参照してください。 1.はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま

    レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
  • 画像を遅延ロードする定番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

  • カスタムフィールドのテキストエリアに入力した改行をページに反映させる

    Movable Type のカスタムフィールドで「テキスト(複数行)」という種類のフィールドを利用する際、テキストエリアへの入力内容に改行や空行を含めても、出力される文字列の改行や空行はすべて除去された状態で出力されてしまいます。 エントリーでは、この事象を解消する方法を紹介します。 1.問題点 例えば、次のようなカスタムフィールドを作成します。テンプレートタグはとりあえず「EntryData」としておきます。 作成したフィールドで、次のようなテキストを入力します。 このカスタムフィールドを出力する「ブログ記事の概要」のサブテンプレートは次のようにします。 : <div class="asset-body"> <$MTEntryBody$> <MTIfNonEmpty tag="EntryData"> <$MTEntryData$> </MTIfNonEmpty> </div> : この

    カスタムフィールドのテキストエリアに入力した改行をページに反映させる
  • 1