[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニックDeaxon's CSS playground [ad#ad-2] 下記に、CSS playgroundで掲載されているデモを紹介します。 これからもどんどん増えるといいなあ。 ※デモを楽しむには、Chromeでご覧ください。
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
積極的に取り入れたい9つのCSS3（+jQuery）テクニック
CSS3（+jQuery）を使った、ちょっといいかも！と思うエフェクトを集めてみました。 まだまだ非対応ブラウザが多い CSS3 ですが、できるだけ積極的に使ってみたいなーとも思ってます。 まずはいろいろ試してみることからはじめてみましょう！ CSS3 の登場で、いろんな CSS のトリックを使ったエフェクトが考えられてます。まだまだ CSS3 に非対応のブラウザも多いので、全てを CSS3 で表現する訳にはいかないのが現状ですが、私的には積極的にどんどん取り入れていきたいなーとも思ってます。 海外ブログなどで、色んな CSS3 を使った Tips が紹介されているので、その中からいくつかご紹介します。どれもサンプルを作って試してみたものばかりです。以下の環境で動作確認もしています。 Mac : firefox、Safari、Chrome Win : firefox、IE8、Safari、
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
CSS3のナビゲーションが簡単に作成できる無料のソフトウェア -CSS3 Menu
あらかじめ用意された豊富なテンプレートから簡単にCSS3のナビゲーションを作成できる無料のソフトウェアを紹介します。 CSS3 Menuの画面 CSS3 Menuの使い方 使い方は簡単で、CSS3やHTMLに詳しくなくても作成できると思います。 「+」ボタンをクリックして、ラベルの数を増やします（下記キャプチャ）。 「-」ボタンは数を減らします。 右側のパネルのテンプレートからナビゲーションのデザインを選択します。 カスタマイズが必要な場合は、下のパネルからデザインをはじめ、文言・リンクなどが変更できます。 完成したら、「ディスクアイコン」をクリックしてCSS3 Menu用に保存します。 HTML+CSS+画像ファイルを生成する場合は、「Publish」ボタンをクリックします。
HTML5 & CSS3 Demo
top HTML5とCSS3のデモページです。 ほとんどの機能は特定のブラウザでないと動きません。 一部CSSNite Vol.45の福田氏、高津戸氏の資料より抜粋しています。 border radius 信号機 <div class="signaler"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> div#border_radius div.signaler { text-align: center; width: 400px; height: 100px; background: #CCC; border: 3px solid #999; padding: 10px; -moz-border-radius: 40px; -webkit-border-radius
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
Beautiful CSS3 Search Form - Web Designer Wall
Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers. View Demo Searc
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
CSS3 Dropdown Menu - Web Designer Wall
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS サンプル集 Vol. 2｜Webデザインレシピ
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集
http://www.designwalker.com/2010/06/html5-template.html
