CSS

CSS 知識更新！ 参考: MDN - CSS カスタムプロパティ (変数) の使用 謎のスタイル定義を発見 ある日、いつものようにスタイルをデバッグしていたときのこと。 適用スタイルの下の方に、見慣れない書き方の項目があるのに気づきました。 --blue ってなに？　そんなスタイルあったっけ？ CSS カスタムプロパティ (変数)とは これは、 CSSカスタムプロパティ または CSSカスタム変数 といって、CSS 内で変数として記述する書き方だそうです。 CSS で変数の使い回しが出来ないと思いこんでいたので衝撃。 今まで sassやらlessやらじゃないと出来ないと思っていた CSS 内で使える変数が、実はブラウザでサポートされていたとは。 例によってInternet Explorerでは使えません。 ちょっと前のプロジェクトは IE 対応必須だったので、「CSS では変数が使えないので sass 使います」って言ったのは間違いではなかった。 使い方 とっても簡単。 どっかで定義して、どっかで使うだけ。 変数として宣言するとき

ツールチップを表示させるのに、jQueryやBootstrapなどのライブラリを使うまでもないなーってとき、CSS だけで記述する方法があります。 まずはサンプルをご覧ください。 マウスホバーでツールチップを表示 ここにマウスを載せる ↑ の要素にマウスを載せるとツールチップが表示されます。 このサンプルでは JavaScript は使わず、CSS のみで対応しています。 ソースコード解説 HTML HTMLにはdata-tooltipというカスタム属性を設定します。カスタム属性は、data-プレフィックスで始まっていれば自由に設定して良いというHTML5の仕様です。 <button data-tooltip="ツールチップ表示!">ここにマウスを載せる</button> CSS CSSはちょっと複雑です。 下記はボタンの見た目を定義しています。 button { position: relative; padding: 7px; border-radius: 5px; } ここか