サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
web.showzine.jp
WEB SHOWZINE Live as if you were to die tomorrow. Learn as if you were to live forever. レスポンシブWebデザインとか(その他の場合でも)でimg要素の実際のサイズ(width, height)をcssで上書きしてデバイスサイズや親要素の大きさに対応させる場合があります。(別にimg要素のwidth, heightの指定を上書きでない場合でも) 幅を指定して(%による相対指定やpxによる絶対指定で)高さについては縦横比を保ってお任せ(auto)する例だとcssで対象要素に対して以下を指定します。 .w_middle img{ max-width:180px; height:auto; margin-bottom:10px; } が、これだとIE8で表示がおかしくなります。img要素にwidth, hei
WEB SHOWZINE Live as if you were to die tomorrow. Learn as if you were to live forever. グリッドレイアウトで要素をタイル状に敷き詰めるのにjQuery Masonry(NHKスタジオパークで知名度がグンと上がったあれですね)を使って実装を進めてたんですが、自分の設定がうまくないのかWebkit系ブラウザ(とくにSafari)で表示が崩れてしまい、その原因がなかなか突き止められないもんでFreetile.jsに切り替えました。(そしたらスッキリ解消できたので) jQuery Masonryだと、とくにSafariで初回にページを開いた際、以下のように表示が崩れてしまいました。ブラウザをリロードすると解消したりもするんですが(何回もリロードしないとダメなときも)これではもちろん納品出来ません。 column
WEB SHOWZINE Live as if you were to die tomorrow. Learn as if you were to live forever. jQuery Masonryを使っている場合、このメソッドの実行前に画像をすべて読み込んでおくようにしておいたほうがよかったりする。と思います。たぶん。 自分がやってみたものだと、これをしてないとSafariやChrome(webkit系ブラウザ)で、たまにボックス(タイリングさせている要素)が潰れたように重なってしまったりして表示崩れを起こしたので。 そのために利用できるのがimagesLoadedプラグインです。 jQuery Masonry – Images http://masonry.desandro.com/demos/images.html その潰れたようになってしまうという不具合を解消するには、im
jQueryプラグインのprettyPhotoを使ってYouTube動画をポップアップ カテゴリー: jQuery | タグ: Youtube | 投稿日: 4月 18, 2013 | 投稿者: webSHOWZINE 動画(YouTube)をモーダルウィンドウでポップアップ表示させる必要があったので、そのメモ。 使ったのはlightboxクローンのjQueryプラグイン「prettyPhoto」です。 prettyPhoto ライセンスはCreative Commons Attribution 2.5ということで、商用利用も可能のようです。 ダウンロードは前述のURLにある三つのボタンのうちから選びます。 Donate(PayPalによる寄付)も受け付けてます。(緑色のボタン) 今回はとりあえず試用してみたいのでCompressedのProduction versionを選択。 ダウン
htmlページ内の画像(img要素)を遅延ロードし、HTTPリクエストを減らして読み込み速度のパフォーマンスを向上させるのにjQueryプラグインのLazy Loadを使ってみました。 以前から有名でよく見かけるプラグインでしたが、実際はその効果(HTTPリクエストを減らす)がないっていう話(実際に解析されてる記事がありましたね)で「ふーん、そうなのか」とすっかり忘れていたプラグインです。 久しぶりにこれ系(遅延ロード)のものを探したら、なんでもその問題が解消されてるらしく、使ってみました。 理屈はこういうことだそうです。 画像を遅延ロードする定番jQueryプラグイン「Lazy Load」 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込み
HTML5におけるOGP設定(xmlns属性をprefix属性で指定)について カテゴリー: HTML | タグ: HTML5, OGP, WordPress | 投稿日: 4月 22, 2013 | 投稿者: webSHOWZINE FacebookやmixiといったOGP(Open Graph Protocol)に対応したサービスを考慮した場合、ソースにそのための記述をする必要があります。 これまでは以下のようにhtml要素にxmlns属性を追加して必要な各値を記述していたのですが、これはXHTML向けの記法らしく、HTML5ではまた違う書き方をする必要があるようです。 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp
このページを最初にブックマークしてみませんか?
『ウェブ、ショウジン V3』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く