id属性とclass属性 | Web標準Blog | ミツエーリンクス
iwaimさまよりCSS Nite Vol.3に寄せていただいたご質問にお答えしたいと思います。 id 属性と class 属性はまったく別の性質を持つ属性なので使い分けが必要です。木達さんが考える使い分けの指針のようなものがあれば教えてください。 使い分けを行う前提として、id属性とclass属性のどちらも利用できる場面、すなわちスタイルシートのセレクタとしてid属性とclass属性のいずれかが必要な場面を想定します。なぜなら、たとえばハイパーリンクを生成するという目的に限定してしまうと、選択の余地なくid属性を使うことになるからです。 仕様書に示されているように、id属性はある要素に固有の識別子を付与する一方、class属性は複数の値を付与することができます。これを活かすよう、あるプレゼンテーションを一括して指定するのではなく、モジュール化して実装していた場合には、必然的にclass属
良いハック・悪いハック | Web標準Blog | ミツエーリンクス
サトウマサシさまより、CSS Nite Vol.3に寄せてCSSハックに関するご質問をいただきました。ちなみにCSSハックとは、Webブラウザ間でのCSS仕様の解釈の相違やバグの有無を振り分けの条件として利用し、特定のブラウザに対しスタイルを適用あるいは非適用とする手法のことです。 2005年10月13日の［IEBlogより：お使いのCSSハックを一掃してください］で取り上げていた良いHACK、悪いHACKについて、具体的に解説いただけたら嬉しいです。 MicrosoftのIE開発チームが、「Call to action: The demise of CSS hacks and broken pages」のなかで使用を控えるよう呼びかけた「悪いハック」には、以下のものがあります。 html > body 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件
Home | Stopdesign
Creative outlet of Douglas Bowman Graphic designer and creative director. Work includes branding, digital, web, print, and application design. Led design teams at Twitter, Google, and Wired. San Francisco Giants fan. Late-start runner. Lernt Deutsch. Writes about design, UX, tech, running, parenthood, food, and travel.
Lucky bag::blog: CSS3 の Selectors と CSS3 Advanced Layout Module
増えているものや削除されたものがあるみたいね。とりあえず、メモとして現状 CSS3 で追加されたセレクタを全て抜き出してみる。 E[foo^="bar"] foo 属性値が文字列 bar で始まる E 要素にマッチ E[foo$="bar"] foo 属性値が文字列 bar で終わる E 要素にマッチ E[foo*="bar"] foo 属性値が部分文字列 bar を含んでいる E 要素にマッチ E:root ドキュメントのルートである E 要素にマッチ E:nth-child(n) 親の中で n 番目の子である E 要素にマッチ E:nth-last-child(n) 親の中で最後から数えて n 番目の子である E 要素にマッチ E:nth-of-type(n) 同じ要素名を持つ兄弟の n 番目の E 要素にマッチ E:nth-last-of-type(n) 同じ要素名を持つ兄弟の最後か
PHP + CSS Dynamic Text Replacement (P+C DTR) - CSS Help Pile - artypapers.com
What is P+C DTR? PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger. P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS. Sick of using the same three fonts? Tired of editing heading images in PhotoSh
RSSモジュールを展覧会っぽく演出 - tikeda's blog
RSSモジュールで表示した写真を横スクロールで展覧会っぽく演出してみました。最近、ダイアリーのヘッダーを触っていて、何かヘッダーを使っていつもと違った見せ方が色々できそうだな〜と思いやってみました。普段ダイアリーのデザインをする時はテーマにする事が念頭にある為、「モジュール＝サイドバーに並べる」と考えてしまってますがその辺を考えず試してみました。 一見複雑そうですが、ヘッダーにモジュールを挿入しdivタグで囲んだだけで、後はCSSです。 <div id="art"> <hatena name="rss" url="http://f.hatena.ne.jp/domu/rss" template="hatena-photo" moduletitle="Okinawa Photo"> </div> <div class="main">CSSは、やっつけで、引き続きいじる予定なので日記には書きま
24 ways: Centered Tabs with CSS
Centered Tabs with CSS by Ethan Marcotte Doug Bowman’s Sliding Doors is pretty much the de facto way to build tabbed navigation with CSS, and rightfully so – it is, as they say, rockin’ like Dokken. But since it relies heavily on floats for the positioning of its tabs, we’re constrained to either left- or right-hand navigation. But what if we need a bit more flexibility? What if we need to place
Web::Blogoscope: XHTMLの最適化手法
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
CSS For Bar Graphs
Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought
stu nicholls | CSS PLaY | image map for detailed information
CSS DEMOS › Image map for detailed information Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Jacopo Bassano - The Flight into Egypt An Old Master He was born around 1510 in the town of Bassano del Grappa, located about 65 km from the city of Venice. His father, Francesco il Vecchio, was a locally successful painter who had esta
Underconstruction by Taiyo@hatena
来年ものすごく流行りそうな手法が公開された。 これは痛い。 Google Desktop Exposed: Exploiting an Internet Explorer Vulnerability to Phish User Information 関連： eWeek記事 ITmediaの記事 I call this attack CSSXSS or Cascading Style Sheets Cross Site Scripting. うまいこと名前を付けたもんだなぁ…… 記事ではGoogle DesktopからHDDの情報を抜けることが問題視されるような書き方になっているが、CSSXSS自体はGDSとは関係がない。 一言で言うと、cssのimport文で任意のWebサイトの情報を抜き出せることを利用した攻撃だ。ログインして利用するWebサイトのHTMLが、ほかのWebサイトで利用で
Stu Nicholls | CSS PLAY | CSS styling of forms
CSS DEMOS › A form with style Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. PERSONAL INFORMATION last name : first name : address : ...more personal information... MEDICAL HISTORY smallpox : mumps : dizziness : sneezing : ...more medical history... OPTIONS CURRENT MEDICATION ...are you currently taking any medication? yes : no
プロパティから CSS 仕様書へのリンク集を作ってみた - lucky bag
CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。 プロパティから CSS 仕様書へのリンク プロパティから CSS 仕様書（邦訳）へのリンク 一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。
ランク付け(CSS利用) - FAX
ランク付け(CSS利用) 技術 Creating a Star Rater using CSS > Blog > Komodo Media よしみかんさんに、コメント欄にてCSSのみで格付けを実現するリンクを教えて頂いた。 正直に言うと以前に見掛けたことがあったのだが、「CSSだらけで大変なくせに、IEではチカチカしていやぁね」と思い読み飛ばしていた。 しかし改めて見直してみて、詳細に調べると楽しかった。ありがとーございました。 リンク先は複雑でわかりづらく感じた。 まず星が縦に2つ並んだ画像と、5つのAタグを用意する。 そして各々のAタグのhoverイベントで、z-indexと、画像の表示範囲と、幅の3つを変更し、星の表示を行なっている。 細かなテクニックから学ぶ点は多い。 position:relative の要素の中で、position:absolute を使い、範囲内での絶対位置を
aamall.jpのデザイナーが作ったテーマがtikedaさんのデザインに似てると思ったので調べてみたのですが - チープカ
aamall.jpのデザイナーが作ったテーマがtikedaさんのデザインに似てると思ったので調べてみたのですが CSS | 12:44 | 前もって書くと別にtikedaさんの作られたテーマはGPLなので、それを改変したデザインを使用して売買をしたとしても問題ないと思いますたぶん。よくわかってませんけど。 http://d.hatena.ne.jp/jazzanova/20051116/1132099774 これなんですけど、一目見たときにこれtikedaさんの作ったテーマに似てるなあと思い、気になったのでソースを見比べてみました。するとコピペしたものから作っているわけではないのですけど（floatが絶対配置になってたりとか）、同じような部分が結構あります。決定的なのは、つけられているコメントが同じという部分です。 http://d.hatena.ne.jp/theme/hatena_w
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS2 Reference
CSS layout tips tricks
9rules - Quality Loves Company.