tips レスポンシブWebデザイン FacebookのLike Boxをリキッドレイアウトへ対応させる方法
Webサイトやブログなどにソーシャルプラグインを設置するのは、もはや当然なくらいなわけですが、今日はその中からFacebookのLike Boxを設置した際に、それをリキッドレイアウトへ対応させる方法を紹介します。 FacebookのLike Boxの設置コードには、それの横幅を指定してやる必要があります。以下のようなコードですね。 <div class="fb-like-box" data-href="http://www.facebook.com/2843.jp" data-width="500" data-show-faces="true" data-stream="false" data-header="true"></div> この例では横幅を500pxに指定していますが、ブラウザの横幅が500pxより狭くなってしまうと… コレだと不格好なので、何とかしてやりましょう。「レスポ
Youtubeとかの色々なiframeをレスポンシブ対応する対策 - MEMOGRAPHIX
レスポンシブデザイン、iframeと相性悪くて、普通に作るとスマホでyoutubeはみ出るみたいになる。そこで、よく使うiframeのレスポンシブ対策をまとめた。 Facebook Like Boxまずfb-like-boxをdivで囲う <div class="likebox-container"> <div class="fb-like-box"></div> </div> 次に下記のスタイルを書く。と幅可変になる div.likebox-container .fbcomments, div.likebox-container .fb_iframe_widget, div.likebox-container .fb_iframe_widget[style], div.likebox-container .fb_iframe_widget iframe[style], div.likeb
簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる
レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・ レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。全然大したもんじゃないんですがｗ 最初から小さい画面での表示も考慮しているのでプラグインではよくある機能も付けていません。 動作確認 デフォルトの状態を画面いっぱいに広がるようにしてありますので、Webサイトに応じてサイズを調整してください。クリックまたはタップでdiv要素がスライドします。 Sample01 ※responsivepxでレスポンシブWebデザインの対応を確認出来ます。 色々なデバイスで使うための雛形なので必要最低限の機能しかありません。※は理由です。 どんな画面サイズ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
