CSS Selectors test-suite およびダイナミック擬似クラスセレクタをチェックしてみた CSS Selectors testsuite や、「 CSS の互換性と Internet Explorer 」などから自分用のまとめ表を作りたいで、 ......まあ、 CSS Selectors test-suite - CSS3 . info はセレクタだけのチェッカですし、 CSS の互換性と Internet Explorer と組み合わせてよいまとめが作れたらいいかなと思います と書いていましたが、とりあえず CSS Selectors test-suite にて、 CSS 2.1 のセレクタおよび CSS3 のセレクタについてまとめることにしました。 CSS Selectors test-suite だと :hover 擬似クラスや :active 擬似クラスや :fo

The pages listed here contain tests and experiments about features, possibilities, browsers’ bugs concerning CSS. I would love to hear any comments that you may have, especially if you find errors. If the right part of the daisy background of this page looks strange, with unnatural colors, then that's nice, you are using a browser which understands ICC profiles embedded in images.

行動ターゲティング広告は以前から存在していたが、今年の動向として新しいのは、行動を追跡する手段として、自サイトでの閲覧行動だけでなくよそのサイトでの閲覧行動まで追跡するタイプが現れたことだ。 (～中略～) 仕組みはこうだ。Webページのリンクは標準では青色で表示されるが、訪問済みのリンクは紫色に変わる。このリンクの表示色をJavaScriptなどのプログラムで取得することができれば、閲覧者が特定のサイトに行ったことがあるか否かを調べることができてしまう。 <style type="text/css> #sita-A a:visited{background:url("/beacon/site-A.gif")} #sita-B a:visited{background:url("/beacon/site-B.gif")} </style> <ul> <li id="sita-A"><a hr

inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を

定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows／IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする（右図）。 角マル矩形は、 frame_top.gif（トップの部分）、 frame_bg.gif（中間部分）、 frame_btm.gif（ボトムの部分）、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである（→サンプルページ1）。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w

直書きライクな、HTML+CSSコーディング。 【追記】これは、ネタです。 以下の内容は、良いHTML+CSSコーディングを推奨するものではありません。 こんなに反響があると思ってなかったので追記しておきます　(´-ω-｀)ｺﾞﾒﾝﾅｻｲ CSSはHTMLから切り離して外部ファイルとして保管され、 その外部CSSファイルを修正すれば、HTMLファイルに触れずとも、 HTMLページの見た目を柔軟に変更できる、ということが 近年のHTMLページ制作におけるスタンダードになっています。 ですが、 私はHTML+CSSコーディングをする際に、 この外部CSSを作るのが非常に億劫でなりません。 idやclassなどのネーミングはもちろん、 どこに、どう設定を書くのか、などに非常に繊細な技術を要するからです。 かといって、styleを使って htmlに直書きするのも面倒だなと思っていました。 そこで

higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

Typechartは、WindowsやMac環境でタイポグラフィがどのように見えるかと、それを実装するスタイルシートをダウンロードできるサイトです。 Typechart - Browse Web Type, Grab CSS. タイポグラフィのカテゴリは、以下の３つに分かれています。 typeface Arial / Helvetica Cambria Georgia Lucida Grande Lucida Sans Unicode Trebuchet MS Verdana font size small medium / body large/ heading extra large emphasis normal bold italic uppercase タイポグラフィは、それぞれWindowsとMacでの表示を切り替えることができ、「Get CSS」ボタンをクリックすると、そのタ

今日、cssでカラムをfloatさせている際に、驚きの出来事がありました。 IEで親の幅に合わせてピタピタに左右のカラムのwidthを設定すると、レイアウトが崩れる…ってのはよくあることですが、なんと、そんなわけでもないのにレイアウトが崩れたのです。 原因を探しても探しても、どーーーー頑張っても見つからず…。 だって、ピタピタにしたわけじゃないんですもの。余裕がある上に、leftとrightで分けたんですもの。 そこで、最後の手段的なものとして、アテで入れていた<img src="#" alt="*******" />のalt部分を削除してみました。altだけ適当に長いものを入れてたんです。 するとどーーーでしょーーー！ レイアウトが直った…。 ま、まさかこのaltがジャマをしてくださっていたとは…。 こんな作り方をされる方はめったにいないでしょうが、もし、IEでfloatした時にレイ

コバの備忘録いつも良質なエントリーでブックマークをたくさんもらっている「ウノウラボ Unoh Labs」。 若干前になりますが、そこで「CSSによるデザインワークと相性のよいHTMLって？」というエントリーがありました。 ここにたくさんのことが書かれておりますが、本日はさらに僕が実践していることを紹介したいと思います。 と言っても、まずは「CSSによるデザインワークと相性のよいHTMLって？」の内容の概略から。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように 特に説明するまでもなく、要素の役割に応じてID・クラスを適切に付けようねということですね。 同じようなものには同じクラスを割り振る 良く、「IDだけを振っておしまい」と言う状況がありますが、さらに同じような役割の要素にはクラスも設定しておきましょう、ということです。 tableのtrごとに「odd」「

こんにちは！　最近、iPod Touchを入手するも、なかなか遊べてない（hackできてない？）ゆうです。 さて、withDをご覧の方には、DTPを兼務（もしくは専業と）されている方も少なくないはず！と……そこで、今月はCSSで段組みを行うために策定中の規格について取り上げてみることにしました。 DTP専用アプリケーションやTeX（組版マークアップ言語処理系。テフ、テック、テッヒなどと読みます）などに比べればまだまだ劣るとはいえ、CSSでも着々とDTP的なスタイルが扱えるようになりつつあります。

月ナビ（透過疑似フレーム） 月ナビって？ 作り方 欠陥・問題点 リモートロールオーバー 見本と説明 同時に２箇所のリモートロールオーバー 固定型リモートロールオーバーメニュー 月ナビ+リモートロールオーバー CSSだけでポップアップ CSSだけでポップアップ プルダウンメニュー プルダウンメニューの作り方 このプルダウンメニュの問題点 CSSplay さんの紹介 疑似背罫コラムレイアウト疑似背罫コラムレイアウト ２段リキッド版(互換) ３段リキッド版(厳格) フリーソフト配布 ｃｓｓ使いの為のカラーピッカー サイトマスター　はじめ 技術・資料提供　か　ず ２コラム罫線レイアウト ハックを必要としない伸び縮みする２段コラムレイアウトです。右が長くても、左が長くてもちゃんと両方下まで罫線が引かれます。何で失敗かって？失敗じゃないけど、別背景イメージが使えないので没です。下のソースを見てもらうと

背景を下までずずーっと伸ばしたい時は、bodyにbackground-imageを指定すればよいですが、div等に指定した背景やborderをページの下まで伸ばしたい時は、以下のようにします。 <body> <div id="Container">高さ100%</div> </body> *{ margin:0;padding:0; } html{ height:100%; } body{ height:100%; } #Container{ height:100%; min-height:100%; width:80%; background:Khaki; border-right:1px solid red; } body > #Container{ height:auto; } 下まで背景伸びたHTML完成サンプル 以下、なぜこれで実現できるのかの解説と疑問点。とても長い。 Step

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま

World & Sociery ゲリラ・オープン・アクセス宣言 last modified on 2024-01-12 アーロン・スワーツの「ゲリラ・オープン・アクセス宣言」の日本語訳と解説です。 冒頭に戻る World & Sociery On “Google’s Ideological Echo Chamber” last modified on 2021-04-03 Google の元技術者であるジェイムズ・ダモーアが回覧用に社内で発表した “Google’s Ideological Echo Chamber” という文書を発端にして展開している論点をとりあげています。 「街場」なんて存在するのか last modified on 2015-10-27 以下の文章は、何度か途中まで書いて「くだらない」と思いながらも、再び書き直してきたものである。どうして書き直すたびに「くだらない」と

最初に結論 ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない？ きっかけはTwitter 昨日、@reaさんがTwitterにポストした一言がきっかけです。 最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。 それに対する@hamashun（僕）の反応がこんな感じです。 @rea 実はぬかみそ的な CSS は使った事がなかったりします。　必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。　浅漬け CSS 。 ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。 Twitterのログだけだと説明不足だったのでここで追記。 @reaさんから頂いた更なる反応。 @h