Compass

Compass

[Sass, mixin, css3, animation, keyframes]Sassでanimationプロパティを効率化するよ!

全国1000万人のanemationファンのみなさまこんにちは!好きなアニメはサイコパスとか攻殻機動隊とかカウボーイビバップのcssオタク(アニヲタ否定)のクールでシャイなアンチクショー下山です。とうとうanimationプロパティに手を出...
WEB

[WEB]WEB製作時によく使うお役立ちツール

さすが年度末です。予算消化に託つけたくだらないシゴトワンサカです。今回はボクがWEB製作時によく使うツールやなんやれかんやれをピックアップしてみたいと思います。既出のモノがほとんどですが何かの、誰かの役に立てばと思いながら書いてみます。Su...
Compass

[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。

remと聞くとレム睡眠しか思い浮かびません。体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回はそういう話でなくて、ただの単位です。単位としてのremです。remってなに?rem(roomem)とはro...
Compass

[Sass,@extend]Sassの@extendの使い方。セレクタの継承ってことだけども・・・

今回はSass行くよ!@extend行くよ!@mixinとどう区別したらいいのか分からない!って人もヒントになればいいと思うよ!てか答えはまとめに書いたよ!@extendの基本的な使い方そもそも@extendっていうのはセレクタの継承が目的...
Compass

[sass,css,メディアクエリ]sassでメディアクエリを書くときに簡単だなって思った方法

スマホ対応、タブレット対応のWEBを作るときに使われるレスポンシブWEBデザイン。これはメディアクエリが必須となっています。ボクは日頃レスポンシブWEBデザインは使用しません。なぜなら面倒くさいし、ボクの技量ではデザインが限られてくるからw...
Compass

[CSS3,animate.css,sass]sassを使ってanimate.cssでhoverアニメーション(きっと完全版)

2回続けてアニメーションネタですよ。こんに千葉。鹿児島からこんに千葉。むかしこんな挨拶でスタートするActionScriptBegenersっていうFashのサイトやってたのを思い出しました。animate.cssの基本今回もアニメーション...
Compass

[Compass,Utilitiesモジュール]ちょっと便利なUtilitiesモジュールの使い方

今日はちょっと便利なUtilitiesモジュールのお勉強をみんなとやってみたいと思うよ!リンクの色とかclearfixなんかもUtilitiesモジュールを使えば簡単カルカルー!clearfix回り込みの解除.clearfix{@inclu...
Compass

[Compass,CSS3]CompassのCSS3モジュールをまとめてみた(2)

予定は未定でしたが2度めの更新ですよ。今回は「あ~見たことある~」的なところでいくつかピックアップしてみました。時間的変化transition.hogeI{@includetransition;}↓↓↓コンパイル後↓↓↓.hogeI{-mo...
Compass

[Compass,CSS3]CompassのCSS3モジュールをまとめてみた(随時更新予定は未定)

自分ノートとしてCSS3モジュールをまとめてみるわけさ。とりあえず絶対使いそうなもの3つから。まずは基本の「キ」角丸border-radius.hogeA{@includeborder-radius;}↓↓↓コンパイル後↓↓↓.hogeA{...
css

[Sass,Compass,CSS]Compassで爆速CSSスプライトでSNSボタンでも作っちゃうよ!

CSSスプライト・・・それシュワシュワなの?(とりあえず定番ボケは忘れずに)ということでCompassでCSSスプライトをやってみようと思います。ページ読み込みスピード改善のためにCSSスプライトやってやろうじゃないか!と意気込むで手動でセ...