CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS

CSS のお勉強：マウスオーバーで背景画像を入れ替える a 要素をプロック化し、疑似クラスを使って、背景画像を入れ替える。 使用している画像 a:link　 a:visited　 a:hover　 a:active img テキストリンクに疑似クラスを使う クリックしる 未訪問 ソース <p class="Reg"><a href="Over.html" title="クリックしる">クリックしる</a></p> <p class="Reg"><a href="urn:nai:1234" title="未訪問">未訪問</a></p> スタイルシート p.Reg a{ display : block ; width : 100px ; padding-top : 100px ; text-align : center ; background-repeat : no-repeat ; ba

! [rejected] master -> master (fetch first) is an error message that occurs when Git rejects changes to a remote repository from your local repository because the remote repository was … Read more

overflow を使用したボックス背景のこと 幅、高さ、overflow:auto;を指定したボックスの背景に画像を指定した場合、IEでだけ背景の表示が変。やりたかったことは固定サイズのボックスに背景画像を指定して中身がそのボックスの高さより溢れたらスクロールしてほしいという内容。とりあえずサンプルあげてみます。 >>サンプル1(背景を指定してno-repeatを指定) 【CSSソース】 #sample{ width:400px; height:150px; background:url(img/xxx.jpg) no-repeat; overflow:auto; border:1px solid #f00; margin:20px auto; } Firefox、NN、Opera、Safari(win)では意図どおりにボックスがスクロールしても背景がリピートせずに固定される。でもIE6

Download Now CSS Buttons is the latest tool for web designers and developers concerned with accessibility and flexibility. CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n' play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges. Take for example

シンプルなドロップダウンメニューの詳細版になります。 マウスカーソルをメニューの見出しに重ねると垂れ幕のようにメニューが表示される…と言うよくあるドロップダウンメニューです。好きなように使って下さい。 ただし、このページのスクリプトはあくまでサンプルであって素材ではありません。このままでも使えなくは無いですが、以下の点に注意を払う必要があります。 標準準拠ブラウザの場合、CSSが機能していなくてもメニューとしての構造を保つように作っています。 が、CSSオン・javascriptオフのIEではメニュータイトルしか見えない状態になります。 このシチュエーションをフォローするには、IEが読めないようにCSSのpositionとdisplayにハックコード(例えば、dl[id=foo]など)を入れ、代わりにJavascriptでpositionとdisplayのスタイル指定を書

今日は昼から今までずっとバイトでした。約10時間、さすがに疲れました。 ちなみに、これは帰りの電車で書いてます。携帯から投稿できるのって便利ですね… はてさて、何をしたかと言えば、CSSによるプルダウンメニューを作ってました。リストを入れ子にして、子要素の方のvisibilityをいじるだけで、FireFoxとかはすんなり行ったのですが、WinIEに大分してやられました。 詳しいことは帰って気が向いたら、追記しますが、WinIEのせいで、無駄に時間を食いました、、、 2006年10月15日…追記しました（遅くなってすいません。） 2006年10月21日…修正しました。Operaでも表示できるようになりました。 確認済みブラウザ WinIE6 FireFox1.5 Opera6以上 Safari とりあえず下のリンクを見てください。 CSS DropDown メニュー部分のCSS おそ

タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

Better Blockquotes Blockquote examples By CSS-Tricks [DOWNLOAD EXAMPLE] Blockquotes are html elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take contro

記事データ 投稿者 望月真琴 投稿日時 2004-11-27T15:50+09:00 タグ CSS Firefox IE Opera Safari バグ 概要 hxxk.jp の場合は :before 擬似要素 / :after 擬似要素を随所に活用していますので、その例をいくつか紹介します。 リプライ 3 件のリプライがあります。 :before 擬似要素 / :after 擬似要素の使用例 :before、:afterってcontentプロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。 同感です。 というか、 hxxk.jp の場合は随所に活用しており、 CSS の便利さを存分に噛み締めています。 私は e-luck さん ( Lucky bag::blog ) のアイデアのようなフッタ部分の更新には使っていません (