IE7のみをハックするCSS (Happy Swing)
久しぶりにCSSネタを。 クライアントから「IE7でフォームのテキストフィールドが突き抜けるんですけど・・・」と言われた。 とりあえず、IE7で確認してみると、崩れてない。 まさか！と思って、会社に数台しかないVistaを借りて確認してみたら、ものの見事に突き抜けてました＾＾； というわけで、急遽IE7のみをハックすることに。 せっかく調べたので、IE7のハック方法を自分のメモのために残しておきます。 IE7のみにCSSを適用する場合 *:first-child+html div.test { } IE7以外のIE（IE6以前、MacIE5）にCSSを適用する場合 *html div.test { } IE（IE7含む）以外のブラウザにCSSを適用する場合 html>/**/body div.test {} IE7とその他ブラウザにCSSを適用する（IE7以前のIEのみ除外する）
[JS]スムーズにスライドするパネルを実装するスクリプト
Switch On The Codeのエントリーから、スムーズにスライドするパネルを実装するスクリプトを紹介します。 Inline Sliding Panels タブ「Click Me」をクリックすると、パネルがスムーズにスライドし、それに追随して他のコンテンツも移動します。 追随しない旧版は下記です。 Javascript Sliding Panels Inline Sliding PanelsはjQueryやPrototypeなど他のJavaScriptに依存することなく動作し、動作環境はIE7, Fx3, Op9.5, Safari3.1となっています。 ※IE6, Fx2でも動作しました。
[CSS]Hack無しで実装する、中央に配置するタブ型ナビゲーション | コリス
Matthew James Taylorのエントリーから、リスト要素でマークアップしたタブ型ナビゲーションを中央に配置するスタイルシートの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a></li> <li><a href="#" class="active">Tab two</a></li> <li><a href="#">Tab three</a></li> <li><a href="#">Tab four</a></li> </ul> </div> </textarea>
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
オンラインで確認しながらグリッドの設計ができる -Grid Designer | コリス
Grid Designerは、確認しながらグリッドの幅・数、マージンなどが設計ができるオンラインサービスです。 Grid Designer Grid Designerの画面では、「Columns：カラム数」「Pixels：全体の幅」「Gutters：カラム間の幅」「Margins：両横のマージン」を確認しながら、デザインの設計をすることができます。 それぞれの値は、数値を直接入力したり、右のボタンを使用して少しずつ調整することが可能です。 「Typography」を選択すると、実際にテキストを流し込んだ際にどのようになるのかを確認することもできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス![[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
CSS/ベーステンプレート