Internet Explorer (Windows) CSSバグリスト
アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) 2003-05-14再作成。 症状 以下の条件群のいずれかに該当するとき、アンカーにマウスポインタ等を乗せて:hover状態にすると内側から3番目のボックスの高さが増加したり減少したりする。 条件群1 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件群2 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マ
スタイルシート(CSS)のトラブル、バグ集
＜＜ |一覧 |リンク集 |ヘルプ |＞＞ 一覧 ＞（1 ＞2 ＞3 ＞4 ＞5 ＞6 ＞7 ＞8 ＞9 ＞10 ＞11 ＞12＞13） スタイルシート（CSS）のトラブル、バグ集 はじめに このサイトは、元々、スタイルシート(css)学習辞典のために私が作ったものです。stylesheet（以下、スタイルシート）の問題点、またはその対処法を、ここに整理して、報告します。 情報はしばしば訂正されます。訂正個所は更新履歴で確認できます。 誤り、ミスの指摘は大歓迎です。また、このサイトに載っていないトラブル、対処法をご存じの方は、その方法を送って下さい。その他、質問があればこちらまで。dhrname@mail.goo.ne.jp あるプロパティを使って、おかしくなったら＞＞CSSプロパティ別トラブルの索引（トラブルバグ集） あるHTMLの要素にスタイルシートを使って、おかしくなったら、＞＞HT
3カラムサンプル18種
本題の前にお知らせ。RSSの登録先をこっちにしてくれるとうれしいです。近々ディレクトリ整理したいので。 http://feeds.feedburner.jp/csshappylife では、本題に。 2カラムサンプル13種で宣言しておいて、放置してましたが重い腰を動かしてようやっと作りました。 というか、エントリー自体も時間が空いてしまい、申し訳ない限りでございます。。。 一度気が抜けると、中々書こうって思えないっすね。 今回は3カラムですが、ネガティブマージンを使ったサンプルが多い感じです。 殆ど経験が無い中作っていたので、なんか楽しくなってました。 個人的にはふいに思いついた、15番のサンプルとかが使えるかも知れないとか思ってます。 広告って載せたいけど、センターの位置をずらしたくない時とか有ると思うのです。 仕様っぽいことと注意事項っぽいこと DOCTYPEは XHTML 1.0 S
Create a Lightbox effect only with CSS – no javascript needed | Emanuele Feronato
Get the most popular Phaser 3 book Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way. Get the book You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fade
マークアップエンジニアのキャリアパス
マークアップエンジニアはどこへ向かうべきかを読んで。 僕らがやってる多くの仕事って、「生産技術」の範疇だったりするんですよね。 で、とりあえず気になったところ、and 感想。 ・技術がわかるかわからないかというより、如何に早く、正確にできるかできないかってのは職能として重要。 ・仕様書の理解が難しいということを除けば、仕様が決まってることに対しての仕事なんだよね。 ・でも、そういうのって野球も同じだったりして。野球もルールという制約の中で、如何にパフォーマンスを発揮するか？という仕事ですよね。 ・ただ野球と同じで、後発の人が追いつくのは割と簡単だというのなら、長くはできない仕事なのかもしれない。（同じ仕事ができて、しかも体力勝負なら若い方が重宝される。） とりあえず間違ってると思うこと。 ・マークアップエンジニアのキャリアパスはプログラマーでもビジュアルデザイナーでもない、と思う。 （必然
CSSでポップアップネタ・改正版：RedLine Magazine
CSSでポップアップネタ・改正版 以前に書いた「CSSでポップアップネタ」という記事のサンプルの件。SafariやmacIEでは表示が変なんです、とLe Archeの冥さんからこちらの記事で教えて頂いた。 冥さんが撮ってくださったキャプチャによるとこんな感じ。 背景色を指定したボックスのみのパターンはOKみたい。ただ、背景を画像にした場合、Safariでは位置はあってるけど、テキストと背景画像が出てこない、テキストがズレている。macIEでは位置が変ってな感じ。あ。今Operaで見たらこっちも変やった(汗)ちょうど今日macをゲットしたのでさっそく検証してみる。 つーことでもう一度サンプルを新たに作ってみた >>RedlineMagazine::CSSでポップアップ・改正版サンプルはこちら 検証したブラウザはIE6、IE7(Standalone版)、Firefox、Netscape7、8、
条件付コメント(Conditional Comments)実験ページ
IE5.5については「if gte IE 5.5」は通るのに「if IE 5.5」が通らないようです。 「if IE 5.5000」などとピリオド以下4桁全て書くと通ります。
フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
Yet Another Dynamic Presentation!
地道な高速化 1 // style も new 時にプロパティにいれておく s6.Constructor = function(element) { this.element = element; this.style = element.style; }; 地道な高速化 2 // コールバックを受ける関数では this // や引数を受けるようにしとく s6.hoge = function() { var shift = Array.prototype.shift; // ↓ Opera ではバグるので回避しなきゃダメ var f = shift.apply(arguments); f.apply(shift.apply(arguments), arguments); }; DOM の空きプロパティ // DOM の要素の空きプロパティの // アクセス速度は普通のハッシュとほとんど変
IEを華麗に撃墜する一行 - ぼくはまちちゃん！(Hatena)
はい！ こんにちは！！！！！ 今日は、偶然ブラクラ発見しちゃったから、それをお伝えしますね！ これだよ！ <style>*{position:relative}</style><table><input></table> → サンプル (IEだとブラウザが終了しちゃうよ！ 注意してね！) IE6とかIE6のコンポーネントブラウザだと確実に落ちちゃうみたいだね！ IE7は確認してないけど！ tableとかtrの直下に、inputとかselectがあって、 そのあたりにcssの全称セレクタでposition:relativeがあたっているとダメなかんじかな！ ちなみにinputにstyleで直接relativeあてても落ちなかったよ！ なにこれ！ よくわかんないけど面白いね…！ FirefoxとかOpera大好きっ子は、 これをたくさんバラまいてIEのシェアをどんどん下げちゃえばいいと思うよ！
XHTML、CSS を学ぶ時の 6つの間違い
XHTML、CSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや本文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTML、CSS に
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
Web Designer Wall - Design Trends and Tutorials
This is an example of a detailed registration form with validation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The body of the form is given a background color as RGB(252, 228, 236). The form consists of input text fields, radio buttons, drop-down lists, and a submit button. The banner section of the form is given a background color as RGB(233, 30, 99). The JavaScript methods
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[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)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Optimizer (CSS最適化ツール)-CSS TIPS
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://hpbuilder.net/weblog/2007/08/07123842.html