Flash コンテンツが z-index を無視して覆い被さってしまう件
えー恥ずかしながら・・・Flash について全くの素人で全然詳しくありません。 最近 Amazon から来ていたメールでお買い得ウィジェットってのを知って、面白そうなので使っていたんですけど、どうも z-index を無視して一番上に表示されてしまいます。Lightbox での画像拡大と非常に相性が悪いです。 こうなっちゃいます。 拡大表示したい画像の上に Flash が永遠とぐるぐる表示されています。こりゃ堪らんわい。Flash と z-index の関係については過去にさんざん既出なので同じような解決方法は山ほど見つかると思いますけど、自分的メモとしてエントリしました。 Flash コンテンツで z-index を有効にする方法 Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用するこ
FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 - builder by ZDNet Japan
スタイルシートでボックスの横幅や高さを指定すると、中身のコンテンツがボックスに収まらない場合がある。収まらないコンテンツをどのように表示するかは、overflowプロパティで指定することが可能だ。今回は、このoverflowプロパティを紹介したい。 また、overflowに関連したoverflow-xやoverflow-y、text-overflowプロパティも紹介する。これらはInternet Explorerが独自拡張したプロパティだったが、CSS 3での採用が進むとともに他のブラウザでもサポートされるようになっている。 overflowプロパティ overflowはボックス内に収まらないコンテンツの表示方法を指定するプロパティだ。CSS 2から定義されているプロパティで、主要なブラウザであるFirefox、Safari、Opera、Internet Explorerはすべて対応してい
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
Mozilla Japan ブログ - Firefox 3 の修正内容のご紹介 その3 ― URLも改行されるように
Firefox 2 までは日本語ではないテキストでは、Web デザイナの方がトリックを使わない限り、半角スペース (U+0020) 以外では改行されませんでした。そのため、長い URL が以下のようにはみ出したり、これが原因で Web ページ全体のデザインが壊れたりすることがありました。 これが、Firefox 3 では以下のように改行されるようになりました。 この修正は、多くの Internet Explorer (以下 IE) 向けにのみデザインされた Web ページの表示を、そのデザイナの意図通りに表示できるようになったことを意味します。 それでは、 Web デザイナの方には細かい仕様や注意点について、少し詳しい解説をさせて頂きます。デザイナの方が気になるのは、IE との互換性かもしれません。しかし、Firefox 3 のレンダリングエンジン、Gecko 1.9 は IE と全く同じ
IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。 - Enjoy*Study
IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に) element.style.filter = 'alpha(opacity=50)';だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。 なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない) script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のpr
CSS最適化ツールの『CSS Optimizer』を公開[to-R]
CSS最適化ツールの『CSS Optimizer』を公開 『CSS TIPS』でCSS最適化ツールの『CSS Optimizer』を公開しました。 CSS OptimizerにはオープンソースのCSSTidyを利用しており、CSSファイルの圧縮やソート、整形などをが可能です。 ぜひ一度、使ってみてください。 スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥーアールについて 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。 株式会社トゥーアールへのお問い合わせ 検索 著書
![CSS最適化ツールの『CSS Optimizer』を公開[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Baseline Rhythm Calculator
See also Webtypography and SXSW lecture by Richard Rutter. Calculator by Geoffrey Grosenbach. In use at PeepCode Screencasts (see also explanation). p.small text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vitae nulla. Donec elementum sagittis nulla. Nullam eget pede sed metus accumsan faucibus. Sed tincidunt, purus quis auctor vestibulum, quam purus sollicitudin sapien, id ma
GeckoのReflowをアニメーションにする - 最速チュパカブラ研究会
MDCの記事用にGeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む Rubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各
font-size指定 | d-spica
font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは，ブラウザとその設定によってまちまちです。でも，せめてデフォルトの状態では意図したレイアウト，フォントサイズで見てもらいたい，という願いもないわけではありません。font-sizeの指定をどうするか，ちょっと考えてみました。 font-sizeは%で font-sizeをpx，pt，inなどで絶対指定すると，Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。 Win
floatした画像にborderで枠をつけた時に出る隙間を無くすには？
各アーカイブ カテゴリ CSSテンプレート [69] ビジュアル・小技 [52] レイアウト [18] CSSビギナー向け [10] CSSハック [6] CSSルール [9] Sass [18] バグ [10] ブラウザ関係 [13] Webサイト [6] JavaScript [7] MovableType [15] モバイル関連 [9] チョット便利なメモ [28] (X)HTML [14] 書籍・ソフト [14] コンテスト [22] お知らせ [43] 雑記 [33] 最近のエントリー 恐竜図鑑みたいなサイト「探そう！好きな恐竜」を作ったんです 「Web制作者のためのSassの教科書」の改訂2版が発売しました。 WAI-ARIA をマークアップに取り入れたシンプルなタブ レスポンシブ対応でPCとスマホで違う画像を使う ブログをはりきって更新します！(｀･ω･´)ゞ そろそろ「こち
プログラマでも出来るWebデザイン - Blog.37to.net
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
[暴満館] JavaScriptによるCSSの操作
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
CSSはHTMLだけのものじゃない (kuruman.org > Kuruman Memo)
CSSはHTMLだけのものじゃない妥当でないCSSハックはやめようという趣旨の記事を読んだのだけれど、一つ気になるところがあったので書いておく。普段だったらdel.icio.us辺りに誰も読まないコメントを書いて流すんだけど、はてブでもまだつっこまれていないようなので、記事にしておく。 結論を述べるとスターハックはCSS文法上全く問題がないハックであり、単にUAのバグをつついただけのハックである。この記事の筆者が言うような議論の必要などない。 下記にtypoを修正しつつ記事を引用する。 次に考えたいのは、書式として合っているかどうかです。* html .hoge {～}といったスターハックなどと呼ばれるハックは、「*（全ての要素）の子孫要素であるhtmlの子孫要素のクラスhogeの要素に対して～」という意味になります。しかし、html要素はルート要素なので、あらゆる要素の子要素となりえませ
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
そろそろCSSハックの良し悪しについて考えてみる（書式編） | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ima.pandach.com/cgi-bin/mt/2007/10/rediv.php
HTML と CSS の要素とプロパティ、それぞれいくつ思い出せますか？ - double-team.org
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
http://elastic965.80code.com/blog/2007/02/w3c_blockquote
CSS Gradients Demo