CSS3の便利なセレクタをおさらい、「:nth-child()」と「:nth-of-type()」疑似クラスの使い方
「:nth-child()」と「:nth-of-type()」セレクタは、他の単純なセレクタでは表現できないドキュメントツリー内の情報に基づいて要素を選択することを可能にする構造的な擬似クラスです。 この2つの疑似クラスは非常に似ていますが、基本的に異なる方法で機能します。その仕組みを確認しておきましょう。 nth-child vs nth-of-type 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :nth-child()がどのように機能するか :nth-of-type()がどのように機能するか 他にもある便利な「nth」疑似クラス :nth-child()がどのように機能するか nth-child（）擬似クラスは、それの兄弟の中での要素の位置をあらわす数に基づいて要素を一致させるために使用されます。具体的には、その数はド
こういうの欲しかった、デザイン・コーディングが捗るツールまとめ
作成：2016/09/26 Tool > 使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 アニメーション12の基本原則デモ ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。 [tool] THE ILLUSION OF LIFE [参考] ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation CSSで写真にフィルタ加工してコード出
簡単な図形を描きながら、SVGの基本的な仕組みを理解してみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。はっちゃんです。 みなさんSVGは使っていますか？ 文字やボタンの淵をアニメーションしながら描くような、ちょっとした表現にも効果的だったり、拡大・縮小しても画質が劣化しないため、最近ではロゴやアイコンに使用するケースも多いですよね。 今回は、簡単な図形を自分で描いてみて、SVGの基本的な仕組みを理解していこうと思います。 SVGとは 見た目は画像と同じ SVGで描画した情報は、SVG形式の画像として認識されます。 アニメーションさせることができる SVGタグは、通常のHTMLタグと同じようにDOMオブジェクトとして管理されるので、javascriptで動的に書き換えることでアニメーションさせることができます。 サーバーに対する負荷をかけずに、描画することができる 画像のように、サーバーにファイルを置いておく必要がなく、負荷をかけずにクライアント側で動的に生成させることができます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
