[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
注目を集めるためのCSS3を使った光るボタンサンプル実装例:phpspot開発日誌
注目を集めるためのCSS3を使った光るボタンサンプル実装例が公開されています。 Safari4や Firefox3.5、ChromeでみるとCSS3の機能を使ってボタンが光ります。少しだけ次世代ですがこんなことができるんだなと覚えておいてもよいかも。 アニメーションで輝くボタンはまるでイルミネーションのようです。 @-webkit-keyframes を使うことでこんなことができるんですね。 Firefox3でみると次のように光りはしませんが、それなりにきれいなボタンで表示されます。 デモは以下のエントリを参照してください。 Radioactive Buttons with CSS Animations and RGBa - ZURB Playground - ZURB.com 作成のチュートリアルは以下を参照してください Pushing Your Buttons With Practic
[CSS]CSS3のプロパティを使用した次世代のタブナビゲーション
対応ブラウザも増えたCSS3のプロパティを使用して実装するタブナビゲーションのチュートリアルをMarcofolio.netから紹介します。 Sweet tabbed navigation using CSS3 demo 使用しているCSS3のプロパティは下記のとおりです。 rgba opacity text-shadow pseudo selectors rounded corners gradients box-shadow 画像やスクリプトを使用して同等のものを実装することは可能ですが、軽量でシンプルなコードで実装でき、変更も簡単にできるのが大きなポイントになります。 タブはリスト要素で、HTMLは下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul> <li><a href="#" ti
CSSグラデーションを使ってクールなボタンをつくる方法 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable 公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートしてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうちグラデーションは応用の幅が広くさまざまな便利な効果が期待できる。 building beautiful buttons with css gradientsにおいて、CSSグラデーション機能を使ってボタンを作成した例が紹介されている。Firefox 3.6 beta4でCSSグラデーションボタンを閲覧するとグラデーションのかかったボタンが表示される。同じページをFirefox 3.5.5で閲覧するとグラデ
Firefox 3.6でCSSグラデーションを使う方法 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable 公開が近づいているFirefox 3.6 (Gecko 1.9.2)ではCSS関連の機能が強化される。従来サポートされてきた機能の強化に加え、CSS3からいくつか新機能の取り込みと、Mozillaが提案する独自の機能が追加されることになっている。Mozillaが提案する機能のうち、グラデーションに関する説明がcss gradients in Firefox 3.6 at hacks.mozilla.orgで紹介されている。 グラデーション機能がどのように動作するかは、Firefox 3.6 beta4などでCSS Gradient & Firefox 3.6ページを閲覧するとよくわかる。Firefox 3.5で閲覧した場合と3.6で閲覧した場合では表示される内容が異なっている。
はてなブログ | 無料ブログを作成しよう
初めて梅干しを作ってみた話 今年の夏、初めて梅干しを作りました。 私梅干し大好きなんですが、自分で作るという発想がなくて…同僚が梅シロップを作っているのに影響されて去年から梅仕事を始めてみたんですが、そのときの説明書に「梅干しの作り方」というのも入っていて、えーー梅干しって自分…
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm
CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして本題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非
ASCII.jp：Googleも採用！CSS3実践テクニック
「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。 Googleの検索ボタンに注目する 「Google？」と意外に思った方も少なくないかもしれない。次の画面は、Google検索のトップページをSafari 4で開いたところだ。実はこの検索ボタンにCSS3が隠れている。
CSSをお手軽にデバッグする方法 | Happy My Life
何重にも依存して定義されているCSSをを簡単にデバッグする方法。以下の内容をCSS内に追加しておくとよい。 コードを見ての通り該当する個所が色付きで輪郭線が表示されるので、どういった構造になっているか一目瞭然。不要になったらコメントアウトするとよい。 * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * *
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
CSSでゲームのような円形メニューを作るサンプル:phpspot開発日誌
Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSでゲームのような円形メニューを作るサンプル。 次のような、可愛い円形メニューが作れます。 アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。 鉛筆にカーソルを合わせると、追加で２つのアイコンが表示され、次のアクションにいけます。 人型のアイコンにカーソルを合わせると、４つのアイコンが表示。 メールアイコンにあわせると次のアクションとなる４アイコンが表示。 という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。 実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。 こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でＵＩと
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グリッドをオンラインで簡単に設計・作成できる -960 Layout System
IDEA * IDEA
CSSのオンライン圧縮ツール色々:phpspot開発日誌
[CSS]Mac OS Xのドック風のバブルエフェクトを実装するスタイルシート | コリス%26utm_content%3DGoogle%2520Reader)
css-lecture.com