CSS note

ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。

情報源: アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス

The scroll-snap-type CSS property defines how strictly snap points are enforced on the scroll container in case there is one.

情報源: scroll-snap-type - CSS | MDN

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。

情報源: jQuery：ページトップへの動きに使えるエフェクト 5 | NxWorld

この記事はシス研 Advent Calendarの24日目の記事です()。 前回はSSHでしたが今回は打って変…

情報源: ウェブを取り巻く日本語フォント環境 〜CSSのフォント指定はこうすることにしました〜

Imagine a simple unsorted list, with some

• items nested inside
  tags. Now, I have defined the bullets to be square shaped via list-style:square; however, if I set the color of the

情報源: Setting bullet colors in UL/LI lists via CSS without ...

情報源: google製のcss最適化処理(Closure Stylesheets)を利用してTwitter bootstrapを最適化してみる | ミラボ

情報源: css boxes

情報源: CSS3 アニメーションについてのメモ | Web Design Leaves

color: currentColor

http://caniuse.com/#search=currentColor

color: inherit

http://www.w3schools.com/cssref/css_inherit.asp

color: initial

http://www.w3schools.com/cssref/css_initial.asp

 

http://www.w3schools.com/cssref/css_animatable.asp

#myDIV { width: 300px; height: 200px; background: red; -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ @-we ...