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