楽天モーションウィジェットでサイトのデザインに空白ができてしまう問題をPositionで克服

楽天モーションウィジェットでサイトのデザインに空白ができてしまう問題をPositionで克服
このエントリーをはてなブックマークに追加
PR

以前、楽天のモーションウィジェットで隙間が出来てしまうことを書きましたが
その時は、ネガティブマージンを使うか。空白ができても問題ないデザインにすれば良いという結論になりましたが

もっといい方法がありました

うっかりしてましたね、もっと簡単で何の弊害もない方法があったのです
それはpositionを使うこと

imgがwidthが0になっているってことは目に見えない存在だけど
スペースだけはとっているので、そのスペースを分離するにはpositionを使えばOK

img[width="0"] {
position: absolute;
top:0px;
}

positionはabusoluteじゃなくてfixedでもOK

これをCSSに追加すれば、display:none;でインプレッションに影響が出てしまうおそれが無いし
レイアウトも崩れない、それに見た目の邪魔にもならないです

ただ一つ、imgでwidthが0な物は全て対象になります
widthが0なimgはインプレッション用だけでしょうから、基本影響なしかな?

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)