楽天スマホページに良くある固定のフッターバナーを入れる方法
EC部に楽天のスマホに固定のバナーを入れてくれと頼まれました。 「固定のバナーなんか簡単じゃん！」と思って、安易に「いいよ」と答えたことに後悔しました。 ハマった、ハマった、ハマった岩渕です。 楽天のサイトで、下記のようにフッター部分についてくるバナーを見たことありませんか？ （6時間タイムセールと書いてあるバナーの部分です。） （参照：http://item.rakuten.co.jp/rotts/r201023/） ※タイムセールなので、固定バナーがない時があります。 ※スマホからご覧下さい。 通常サイトのコーディングをしている人ならとても簡単ですよね。 しかし、楽天のスマホは禁止タグばかりで大変です。不便で仕方ない。 禁止タグをすり抜けて固定バナーを入れる方法 禁止タグをすり抜ける方法は、タグ内に13個の全角のスペースをいれるか、若しくは、「=””」をタグの後にいれるとスマホでも禁止
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
フッターの位置を固定して常に表示 (IE6対応)|Katalog
最近、このブログにも登場！ウィンドウ下部から離れたくないフッター。 そんな愛嬌いっぱいのフッターを作る方法を紹介します。 CSSはこう html,body { height:100%; } html { overflow-y:scroll; } div#footer { position:fixed; bottom:0; width:100%; } /* IE6 */ * html, * html body { overflow-y:hidden; } * html div#main { height:100%; overflow-y:scroll; } * html div#footer { position:absolute; bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1); } IE6対策としてハッ
CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック - F.Ko-Jiの「一秒後は未来」
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
Meerkat :: A jQuery Plugin
Let’s play hide n’ seek Hello! My name is Meerkat, I'm a jQuery plugin. I like long walks on the beach, sitting naked by a fire, playing hide n' seek, and all the peanut butter you can feed me. News & Updates November 10th, 2010 Added ability to automatically trigger “dontShowAgain” on timer method (read) April 22nd, 2010 Callback functionality now available (onMeerkatShow)! (read) April 2nd, 2010
[CSS] 完全固定ヘッダー/フッターの作り方 (IE6対応) | wembley
このblogの下部に表示されているフッターのように、上下に完全に固定された100%のフッター(ヘッダー)をCSSだけで実現する方法。 Fixed Header & Footer Layout: A Beginner’s Guide | Noobcube [CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート 全てのブラウザで同じように固定させるのはなかなかに骨の折れる作業です。 上記の参照元を含め色々なところで固定ヘッダーのテクニックが紹介されてます。が、多くの場合ブラウザによってカクつきが出たり変なスペースが空いてしまっていたりスクロールが隠れてしまっていたりと、何かしら問題があってですね。 色々試した上で一番問題のない、ほぼ完全にクロスブラウザ仕様の実装方法がこれ。 position: fixedでひとまず固定 まず、モダンブラウザ(Firefox、IE7以降、
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」:phpspot開発日誌
指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」 2010年05月27日- Plugins | jQuery Plugins 指定要素を常にページの下部に来るよう調整してくれるフッター実装jQueryプラグイン「Footer Plugin」。 $(element).footer() みたいにするだけで、element に指定した要素をページのフッターに吸い付くように配置することが出来る便利なプラグインです。 ブラウザの高さを変更してもJavaScript側で調整してくれます。 通常の例。div#footerブロックは最初の要素の直下に来てます。 フッター設定した例。ブラウザの下部に常に配置されます。 色々方法はあると思いますが、実装が簡単なので便利かもしれませんね。 関連エントリ HTMLで雑誌のような美しい段組みレイアウト
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フッターを固定にしたサンプル | CSS Lecture
https://depthcode.com/2011/02/header-fixed.html
WordPress Plugins/JSeries » Head Cleaner (最適化＆高速化)