CSS
Animate.cssとinview.jsを利用して要素が表示されたタイミングでアニメーションさせる
以前はWOW.jsを利用して簡単にアニメーションを導入するという記事のように、WOW.jsとAnimate.cssでアニメーションを導入させていたのですが、いつの間にかWOW.jsが商用利用の場合は有料となっていました。…CSS：rgba指定を使わずに背景画像を透過する
<div class=”bgimage”>というブロックに透過した背景画像を重ねたい場合は以下のようにCSSを記述します。 rgbaを重ねる方法だと、背景画像の上にさらに透過した背景画像を重ねるのが難しいため…CSSでテキスト選択中の背景色と文字色を変更する
::-moz-selection { background-color: #f06292; color: #fff; } ::selection { background-color: #f06292; color: #…
IE11とWindowsEdge用CSSハック
IE11 @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .クラス名 { セレクタ } } Windows Edge @supports (-m…スマホでのスクロールがスムーズではないときに設定するCSS
webページをスマートフォンで開いたときに、表示はおかしくないのにスクロールが遅いというか突っかかるような感じがするときは、以下のCSSをまずは設定してみるといいようです。 html { -webkit-overflow…
CSSだけでSVGをアニメーションさせる
こんにちは、ゴトーです。 ロゴにSVGアニメーションを利用しているサイトを最近たまに見るので、試したところJSを使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きましたが、この…Webページを印刷するときの余白をCSSで設定する
webページを印刷する際指定しないと結構大きな余白がとられてしまいますので、余白なしに設定したい場合などは以下のように設定します。 @page { margin: 0; } ただし、印刷時の動作はブラウザによって大きく異…