FireFoxのスクロールバー分のズレをとるCSS
FireFoxのスクロールバー分のズレをとるCSS 2006年9月26日 FireFoxで表示したときページが縦方向にきっちり収まっているとき、スクロールバーの分だけスクロール時で表示されている時と比べてズレてしまいます。 デザイン自体には問題はありませんが、コンテンツが縦にきっちり収まっているページからコンテンツの長いページにページ移動する際にカクっとズレの動きが生じてしまいます。 な～んか気持ち悪いなぁと思ったときは body { overflow-y:scroll; } とするとページ移動の際のズレの動きがなくなります。 しかし、ＩＥ6、IE7ではブラウザ自体のスクロールバーとは別にもうひとつ内側にスクロールバーができてしまいます。 そこで対処法としてＩＥ６用CSSハックの*htmlとＩＥ7用CSSハックの*+htmlを利用して *html body { /*IE6だけに適
CSSによる日本語組版の実装はここまできた――EPUB最新動向
イーストと日本電子出版協会は、国際的にも注目されている電子書籍ファイルフォーマット「EPUB」の最新動向として、HTMLレンダリングエンジン「Webkit」で日本語組版の実装が進んでいることを紹介した。 Webの技術でここまでできる イーストと日本電子出版協会（JEPA）は1月19日、2011年5月には最終仕様が確定するとみられる電子書籍ファイルフォーマット「EPUB 3.0」についての最新動向としてWebブラウザなどでの実装が進んでいることを紹介した。両社は、総務省の平成22年度「新ICT利活用サービス創出支援事業」の「EPUB日本語拡張仕様策定」を受託している。 XHTMLやCSSといった国際標準をベースとするEPUBは、グローバルでは電子書籍の標準的なファイルフォーマットとして採用が進んでいるが、アジア圏の言語で必要になる縦書きやルビ、禁則処理、行調整）、圏点（傍点）といった機能が現
文字数の違う複数の項目をliタグを使って綺麗に並べるTIps
フォームの選択項目をliタグとcssのfloat、min-height、white-spaceを使って綺麗に並べるTipsです。 登録フォームを動的に作っていると、選択項目がとにかく多い！という事態に遭遇します。 静的なら1つずつtdで切って、文字が長ければcolspanで〜とできるわけですが、 動的に出してるとそういう細かい芸当は無駄にややこしいので、 できるだけ手軽に、できるだけ見栄えよく並べるために、リストタグを活用します。 並べたい項目は以下の通り。 たぬきうどん きつねそば 天丼 鶏ガラしょうゆラーメン 特選月見そば みそラーメン 明太子スパゲッティ ざるそば もりそば ナポリタン 森のきのことじゃこの和風スパ ざるうどん ペペロンチーノ 縦に並べるとページが長くなってしまうので、横に並べる事にします。 cssはこんなカンジ。 li { float: left; mar
ヘッダ固定テーブルの最良解 Pushpin Header - penultの日記
HTMLで、ヘッダを固定してボディを縦方向にスクロール可能にしたテーブルを作る方法はいろいろあって、テーブル ヘッダ固定 でぐぐると百花繚乱、群雄割拠という感じだけれども、個人的には http://codylindley.com/CSS/249/pushspin-header-a-simplified-data-grid-with-a-stationary-header に載っていた方法が HTML+CSSのみで動作。JavaScript不要 IE6, IE7, IE8でも動作*1 tableタグとその中身は全く普通の構造。tableの分割もしない 「ヘッダ部分だけを、CSSの絶対位置指定で無理矢理スクロール領域の外に固定する」と一行で説明できる単純で理解しやすい動作原理 と、ベストだと思う。 ところが、最近上記ページを見直してみたらなんか消えていて確認できなくなっていたので*2、記憶をた
Cody Lindley | Front-end/Client-side/JavaScript Engineer | Boise,Idaho
Cody Lindley is a front-end/JavaScript developer and recovering Flash developer. He has an extensive background working professionally (25+ years) with HTML, CSS, JavaScript, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design, Design Systems, and Component UI systems. When not sittin
株式会社ジラフィー(Giraffy)
会社情報 事業内容 ソフトウェアシステム開発 クール、セキュア、標準準拠をポリシーに、ソフトウェアシステムの開発を行っています。 Web などのインターネット技術を中心とした豊富な開発経験と高い技術力で高品質なソフトウェアをお届けします。 Webサイト制作 Webサイトのデザイン、HTML/CSSコーディング、WordPress などの CMS への組み込みも行います。 既存のWebサイトへの問合せフォーム等の追加も承ります。 スマートフォン向けアプリケーション開発 iPhone や iPad、または Android など、スマートフォン用のアプリケーションの開発を承ります。 その他 BlackBerry 用テーマ Self Shortener (WordPress プラグイン) 会社概要 社名
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
背景画像のちらつきを発生させないロールオーバー｜web bibo
CSSのa:hoverを用いて背景画像を切り替えると、画像がちらついたり砂時計のマークが表示されたりします。 これはインターネットオプションでインターネット一時ファイルの設定を「Webサイトを表示するたびに確認する」としている方に起こりやすい現象なんですが、このような設定をしている方にも画像をちらつかせずロールオーバーを実現する方法を紹介します。 HTML記述 <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> CSS記述 ul#menu { list-style-type: none; margin: 0; padding: 0; width: 360px; } ul#menu li { float: l
HTML5ホームページテンプレート無料配布 [Cool Web Window]
404 Not Found お探しのファイルは見つからないようです。 お手数ですが、下記リンクからトップページへお戻りください。 CoolWebWindow Copyright (C) Cool Web Window All Rights Reserved
はてなブログ | 無料ブログを作成しよう
水風呂のすゝめ 毎日めちゃくちゃに暑い。 ここ数年「およげ!たいやきくん」のように昼間は太陽とオフィスビルとアスファルトの三方向から押し寄せる35℃オーバーの熱に挟まれ、夜になっても最低気温が27℃くらいまでしか下がらない。そんな理不尽な東京鍋の中の暮らしが毎年のことにな…
CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」
TOP > WebDesign , WebService > CSSで実現させるクロスブラウザ対応のドロップシャドウテクニック「Cross-browser drop shadows using pure CSS」 WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。 上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違う
画像にキャプションを入れたい - ホームページテンプレートのdecoweb
画像の下にキャプション（説明文）を入れる方法を教えます。 ※当サイトでの方法は多数あるやり方の中の一つとお考え下さい。 Step1 【画像左寄せの回り込みにキャプションを入れる】 このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。 上の画像の下にキャプションを入れてみましょう。 imgを<div>で囲み、<span>でキャプションを囲みます。最後に回り込みを解除します。 （class名はご自分でわかりやすい名前にしてもOKです） <div class="imagebox_left"> <img src="my_images/picture1.jpg" alt="イメージ画像"><span>画像のキャプション</span> </div> <p>このように画像の
第4回 要素の操作＆ユーティリティ編
連載目次 現在の要素セット（カレント要素）を指定された要素で置き換えるには、replaceWithメソッドを使います。引数には、置き換え後の要素を表す文字列、またはDOM Elementオブジェクトを指定します。 以下は、画像をクリックしたタイミングで、画像をそのalt属性を表すテキストで置き換える例です。 <script type="text/javascript"> $(function() { // <li>要素直下の<img>要素をクリックしたときの挙動 $('li > img').click(function() { // クリックした<img>要素を<span>要素で置換 $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>'); // テキスト値はalt属性 }); }); </script> ……中略……
CSS Gradient Text Effect
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Saf
Stu Nicholls | CSS PLAY | CSS scrolling tables
Information If you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content. Method #1 This uses two outer containing divs and a single table. Internet Explorer has a scrolling 'caption' whereas Firefox has this fixed along with the column headings. Opera fails at the moment but I am
404 | American Express Serve® Account
Sorry, nothing here! We looked everywhere, but couldn’t find that page. Home For immediate assistance call our Customer Care Professionals at: 1-800-954-0559 Currently there are no cash reload locations in the US Virgin Islands. The American Express Serve® family of reloadable prepaid accounts are available to U.S. residents who are over 18 years old only (or 19 in certain states) and for use virt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/CSS:IE8のCSS対応 - builder by ZDNet Japan
Web標準HTMLコーディングのHomeWeb-coding｜パンくずリストをどのように表現する？
blog.wonder-boys.net is Expired or Suspended.
IDEA * IDEA
