GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
DOCTYPEとCSS - tikeda's blog
最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IEでIMGにpaddingがつかない FFでanchorのかかったimgにtext-decorationがつかない table内でのtext-alignが普通（？） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> IEでIMGにpaddingがつく FFでanchorのかかったimgにtext-decorationがつく ta
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
CodeWeb: [CSS]クロスブラウザな半透明フィルタ
IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。 しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。（クロスブラウザってJavaScript以外でも呼んでよかったけ？） [Internet Explorer対応] 0～100の数字で制御します。0に近づくほど薄くなります。 MacIEだと確か動きません。 img{ filter: alpha(opacity=20); } [Mozilla / FireFox / Netscape 対応] 0～1の数字、または0～100％で制御します。0に近づくほど薄くなります。 こちらは最新版のMozilla FireFox Netscapeで動作します。 -moz-opa
旧Windowsのメニューに似たリンク - CSS Dencitie
今回は、XP以前のWindows、つまり2000、Me、98や95などのバージョンで見られるようなメニューに似たリンクを作る技法をご紹介いたします。完成図は、以下のようになります。 例によって、サンプルだけ欲しい人は、リンク先のソースをテイクアウトして、お帰りはこちら～(どこ) 作ってみよう まず、HTMLソースから書いてみましょう。キーボードからの入力なので、それっぽいkbdのタグを使います。本番では、アクセスキーの指定は忘れないように！ <div id="x"> <a href="">ファイル(<kbd>F</kbd>)</a> <a href="">編集(<kbd>E</kbd>)</a> <a href="">表示(<kbd>V</kbd>)</a> <a href="">ヘルプ(<kbd>H</kbd>)</a> </div> これでは、改行が余白になってしまって空きすぎますので
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
Collection & Copy - 画像 CSSを使った角丸
画像 + CSSを使った角丸 技術 wg:Introducing DomCorners 上記ページを読んだ。 Nifty Corners 作者はCSSのみで角丸を実現する記事を書いている。当ブログでも、これを利用している。 その上で異なるアプローチの角丸を紹介している。 上のような画像を、1コマずつずらしながらCSSを利用して貼りこんで行く。 対象となる領域のHTMLは以下。 <div id="box"> <b class="btop"><b></b></b> content here... <b class="bbot"><b></b></b> </div> CSSの定義は以下。 b.btop, b.btop b, b.bbot, b.bbot b{ display: block;height: 10px;font-size: 1px; background-image:url(rc.
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSによる段組（マルチカラム）レイアウト講座
CSSの謎