CSS応用

フォントサイズを画面幅に応じて可変にする

remを使う時の注意点 remで起こる問題を解決するにはSCSSであれば自作関数を使う事で解決出来ます。 scssでのfunction関数の設定 @function 関数名(引数) { @return } @function rem($px) { @return ($px / 16) * 1rem; } h1 { font-size: rem(36); /* font-…

background-attachmentを使ってパララックスを作成する

background-attachmentをfixedにすると簡単にパララックス(視差効果)を使ったスクロールが実装出来ます。ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為(ベンダープレフィックスを付けてもダメ)、iOSでは別…

svgアニメーションの作成

tympanus.net http://gardenstudio.com.br/gardenstudio.com.br jakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。ベクター画像は画像をビットマップ形式では…

色々なセレクタを使ってみる

スタイルを適用する対象を指定するセレクタ(selector)には以下のものがあります。様々なセレクタを使って効率良い命令をしていきましょう。 代表的なセレクタ classセレクタidセレクタ子セレクタ子孫セレクタ擬似クラス webliker.info