[CSS]さりげないアクセントとして面白い、キーフレームを使ったCSS3アニメーション
IE7でのキャプチャ（アニメーションは静止状態で表示） [ad#ad-2] キーフレームを使ったCSS3アニメーションのスタイルシートは、下記のようになります。 CSS 1枚目の葉っぱのスタイルシート。 ※ヘッダの葉っぱは同様に4枚の葉っぱをコントロールします。 .deco { position: absolute; } .leaf-1 { left: 670px; -webkit-animation: leaf1 2s ease infinite alternate 0; top: -32px; } @-webkit-keyframes leaf1 { from { } to { -webkit-transform: rotate(11deg) translateX(-6px); } } ※デモページでは「-moz-」も使用しています。
クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント
リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 When (and when not to) use an anchor tag? [ad#ad-2] 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました。 例えば、Gmailのソースを調べてみると、クリック可能な大部分の箇所はdiv要素を使用しています。これはJavaScriptのイベント用のもので、a要素を使用すべきではないものです。 では、そのa要素を使用しない場合、ユーザーにそれがクリック可能であるように見せるために、どのようにしたらよい
[CSS]CSS3アニメーションを使ったスタイルシートのテクニックのまとめ
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ
IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント：スタイルシート Conditional classnames -条件付きコメント：class名 CSS hack -安全なCSS hackとは 条件付きコメント：class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント：スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ
[CSS]「:target疑似クラス」をつかった実用的なスタイルシートのテクニック集
「:target疑似クラス」をつかって、タブコンテンツ、画像ギャラリー、画像拡大、アコーディオンなど実用的なコンテンツを実装するチュートリアルを紹介します。 キャプチャはW3Cの「The target pseudo-class :target」 [ad#ad-2] 「:target疑似クラス」はCSS3で、アンカーリンクがアクティブな状態にスタイルを適用するものです。 IE6～8では「:target疑似クラス」は動作しないため、代替を用意したり、スクリプト「Selectivizr」を利用するなどなんらかの対応が必要です。 「:target疑似クラス」をつかって、タブコンテンツを実装 「:target疑似クラス」をつかって、画像ギャラリーを実装 「:target疑似クラス」をつかって、画像の拡大表示を実装 「:target疑似クラス」をつかって、画像のズームイン・アウトを実装 「:targe
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート
Sticky Notes with CSS3 デモ：左、デモ：右 [ad#ad-2] 付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Notes with CSS3<br />by <a href="http://www.accidentalhacker.com/sticky-notes-with-css3/">accidental hacker</a></p> </li> </ul> [ad#ad-2] CSS3のグラデーション、ボックスシャドウ、回
テーブルやリストを使用した価格表のデザイン集
プロダクトやサービスを販売しているサイトにとって非常に重要な価格表のデザイン集を1st Web Designerから紹介します。 40 Fantastic Pricing Tables for Your Inspiration 価格表はその設計を決しておろそかにするものではなく、直観的で使いやすく、ユーザーに最も重要な情報を提供する非常に重要なコンテンツです。 上記サイトでは、シンプルなテーブルからフューチャーリストなど優れた手段で価格表を提供しているサイトが多数紹介されています。 その中から、下記にいくつかピックアップしました。 傾向としては、ページ幅いっぱいに配置し、お勧めを目立つようにしています。
プラグインを使用しないでWordPressをより便利する10のチップス
WordPressにほんの数行記述するだけで、多くの便利な機能を付け加えるチップスをMegaMagから紹介します。 10 wordpress hacks & tricks that I like 1.コメントがついた記事をサムネイル付きで表示 サイドバーやフッタなどどこにでも、たくさんコメントがついた記事をサムネイル付きで表示します。 「http://an-alternative-image.jpg」はサムネイル画像が無い場合のデフォルトの画像を指定してください。 <textarea name="code" class="html" cols="60" rows="5"> <?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($popular->have_po
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
画像にできる濃淡の縞「バンディング」をおさえる方法
画像の滑らかなグラデーションに現れる濃淡の縞「バンディング」をおさえる方法をFringe Focusから紹介します。 左：通常、右：バンディング 右側の画像では空の滑らかなグラデーション箇所にバンディングがおきています。これは圧縮した際に色の数を制限することで発生させたものです。 人の目は高いコントラストのエリアを見ると、微妙な明るさの変化を認識しにくいため、この写真では建物のセクションでうまく働いています。ここでのカラーは「少し明るい青」から「少しそれほど明るくない青」を使用しています。 この画像の圧縮というのは、バンディングの要因となります。 画像を構成しているピクセルの一つ一つは、それぞれの周りのピクセルと混ざり合うことはなく、それ自身が小さい正方形のピクセルです。ピクセルは我々の目からみると、あまりにも過度に小さいものです。ここで取り上げる方法はそれよりもっと大きいグループでカラー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
[CSS]リンクの情報を補う、「content」プロパティのスタイリング集
[CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版
[CSS]背景画像を使用しないCSSスプライトのテクニック
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs
[CSS]アイコンがアニメーションでズームするスタイルシート
[CSS]HTMLとCSSだけで実装する、ごく普通のアイコン
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ