ちょっと便利なCSS Tips いろいろ - DesignWalker
CSS Hack for Safari | コリス
Safari のCSS Hackのまとめです。 Safari 3の検証には、2007年6月11日にリリースされた「Safari 3 ベータ版 for Windows XP」を使用しています。 ※Safari 3の正式版は、2007年10月にリリース予定です。 html*element sign after a semi-colon html:¥66irst-child html* box brackets html* underscore @media all body:last-child:not(:root:root) html[xmlns*=""] body:last-child body:first-of-type -webkit-min-device-pixel-ratio:0 /**/ html* 下記の10個のうち、Safari 3のみ有効だったのはbody:first-of
safari用のCSSハック − ミモザガーデン
safariは専用に振り分ける必要が少ないブラウザですが、案件によっては、とっても繊細な設定が必要な場合があって、ハックのお世話になることもあります。 まとめ記事はBLOG × WORLD ENDINGさんが素晴らしいです。CSSハックにあります。 個別指定はこんな感じです。 html[xmlns*=""] body:last-child .class名 { safari用個別設定} Safariはフォントのデフォルトサイズが大きめなので、13pxくらいが標準に近い感じです。%であわせるなら、88%にするとそうなるようです。でも、Safariはpxで書いたcssでも、ブラウザの機能でフォントが大きくなるので、より他のブラウザに近い13pxで書いても問題ないと思います。 /* safari only ¥*/ html:¥66irst-child body { font-size:88%; }
css filters (css hacks) - centricle
Windows Mac OS X Macintosh Other IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko Windows Mac OS X Macintosh Other voice-family:"\"}\""; voice-family:inherit; property:value;
Web Style
The Purposes of E-commerce Website and Web format Since the importance of eCommerce internet site is growing bizarre and fantastic, the importance of e-commerce internet format also is growing. Before going to talk about more or less E-commerce internet format, everybody ought to necessarily notice more or less e-commerce internet site, and its services and products. Here are a few compulsory diff
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 | 100SHIKI
テキストの回りこみ処理をCSSで実現するための『CSS Text Wrapper』 December 7th, 2007 Posted in その他 Write comment 他サイトでも紹介されているが、個人的にぐっと来たのでご紹介。 複雑な図形の形にあわせてテキストを回り込ませたい、というときがたまにある。 ワードやイラストレーターではそういった処理が可能だが、ウェブでそれを再現しようと思うとちょっと厄介だ。 そこで登場したのがCSS Text Wrapperだ。このサイトでは自分で好きな図形を描き、それにあわせてテキストを配置することができる。 そのようにして作った「テキストの回りこみ処理」はCSSのコードでダウンロードすることができる。このコードを回り込ませたいテキストの直前に配置するなどすれば自分のサイトで簡単に応用可能だ。 ウェブで表現するのが厄介、で思考停止せずに、こうした
text-indent:-9999pxを使ったときFirefoxで出る無駄な点線は消せます::::::STOPN' LISTEN::::::to the silence:::::::
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
TokuLog 改め だまってコードを書けよハゲ - ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース
Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
clearfixハック｜CSS HappyLife
通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。 コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。 IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。 ソコでかなり便利に使えるテクニックが、clearfix。 使い方は、clearしたい親要素に下記のように記述。 div:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-hei
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
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」で表示されてしま
DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌
Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ
Spiffy Corners - Purely CSS Rounded Corners
Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff. What? Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript. Why? I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSハック | BLOG × WORLD ENDING
http://youmos.com/news/fancymenu
http://spreadsheets.google.com/pub?key=prvB_MFPHuEHOYL7ulKmYOQ&gid=0
最初に指定しておくと便利なCSS | Tech de Go