ソーシャルサービスの埋め込みパーツをレスポンシブデザインに対応させる
<div class="YouTube"> <iframe width="640" height="360" src="//www.youtube.com/embed/OE6TOU-IKJY" frameborder="0" allowfullscreen></iframe> <!-- / .YouTube--></div> /* YouTube */ .YouTube { overflow: hidden; position: relative; /* paddingで高さを出している */ height: 0; padding-top:30px; padding-bottom:56.25%; } .YouTube iframe, .YouTube object, .YouTube embed { position: absolute; top: 0; left: 0; width: 1
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
