CSS3
CSS3：自サイトURL以外へのリンクにスタイルを適用する記法
a:not([href^=”http://www.example.com”]) { //スタイル } 「:not」の非該当セレクタに属性セレクタの合わせ技です。 「:not」は条件に該当しない場合にスタイルを適用するセレ…CSS3：ある一定パターンのクラス名に一律してスタイル定義する
例えば「icon-gear」「icon-tool」など、一定パターンの名前を持つクラスに対して一律して同一スタイルを定義する方法です。 [class^=’icon-‘] { //スタイル } 属性セレクタを使い、「^=」…borderを重ねてアクティブ状態を示す
#header{ padding: 0; border-bottom: 1px solid #e2e2e2; //この線の上にアクティブ状態のborderを重ねます z-index: 1; } #header ul{ p…CSS3：特定の画像に対してスタイルを適用する
img[src$=”test.png”] { //スタイル } 属性セレクタの記述方法ですが、クラス名に限らずあらゆる属性値を参照できます。 srcを「$=」で後方一致させることで特定の画像に対してスタイルを適用させるテ…CSSアニメーションの超基礎
CSSアニメーションの特殊例は避けて超基本的な内容を記してみます。 サンプルはこちら。 See the Pen njaCe by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リ…CSS3：iframeとtransformでスマホ実機風プレビュー
サンプルはこちら。 See the Pen kHIpz by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. transformはなんでも変形させられるので、iframeもこのよう…CSS3：CSSだけでツールチップ
サンプルはこちら。 See the Pen CSS only Tooltip by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リンクにマウスオンでツールチップが出ます。 CS…