CSS3の擬似クラスを使った柔軟な要素の指定パターン - Qiita
CSS3では:first-childや:nth-child、:not()のような擬似クラスで柔軟にセレクタを指定することができます。OOCSSのようなある種のデザインパターンでも、シングルクラスでコンテンツに依存する書き方の場合でも活用することができると思います。 サンプルはCodepenにまとめています。照らし合わせながら読んでいくと理解しやすいです。 See the Pen pseudo-class-test by ManabuYasuda (@gaku) on CodePen. HTMLは以下のようにしています。.sectionという親要素に.section__itemという子要素が8つ入っています。最初の2つのサンプルには見出しが、後半のサンプルではクラス名を変えていたり、子要素の数を7つにしているものもあります。 <div class="section section1"> <h
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
擬似要素とCSS3を使ってリストメニューを楽しくデザイン
画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
