10分で出来そうなSVG+CSSのボーダーエフェクト
- 2014/08/01
- 近藤
こんにちは。制作部の2児の父、近藤です。
最近HTMLを勉強し始めた新卒2年目の子に、
「簡単にできる、ちょっとカッコいいマウスオーバー表現ってありますか？」と相談されたので、
3分くらいで試せるエフェクトをご紹介したいと思います。
早速ですが、以下、完成例。
最近良く見かける、ボーダーがアニメーションするエフェクトです。
続きを読む
アイコンフォント「Font Awesome」を活用して制作を効率化しよう！
- 2014/07/25
- 鈴木潤一
こんにちは。すーさんです。
今日は、普段よく使うアイコンが439個もパッケージされたウェブフォント「Font Awesome」のご紹介。
アイコンはベクターデータなので、サイズの指定も自由自在、色やアニメーションなどCSSでの装飾も簡単にできて非常に使いやすいです。
ではさっそく使っていきましょう。
!importantはもう使わない！CSSの優先順位をおさらいしよう
- 2014/07/16
- atsuko.a
先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。
こんにちは、フロントエンドエンジニアのあつこです。
HTMLとCSSでお仕事をするようになって暫く経つのですが
未だにスタイル効かない、何故だ。。。→優先度が低かった！ってことがたまに起こります。
Sass等メタ言語を使ってると、コンパイル後の形を想像しにくくなるのですね(´・ω:;.:...
今日はそんな「CSSにおけるスタイルの適応の優先順位」についてまとめてみました。
続きを読む
Web Starter Kitを触った感想とかとか
- 2014/07/09
- てっちゃん
こんにちは、デザイナーのてっちゃんです。
今回は最近Googleの方でリリースされたWeb Starter Kitが気になったので、触ってみました。
私は業務の中でBootstrapを使ってデザイン・コーディングを行っていますが、Bootstrapを使うために色々補助ツールを使っています。Sass、compass、grunt、画像圧縮、ブラウザのオートリロード とかですかね。
こんな感じで環境を整えていますが、もっと簡単に必要な環境を使うことが出来るパッケージになっているツールがWeb Starter Kitです。
【CSS】今更clearfixについて解説してみる
- 2014/06/30
- atsuko.a
こんにちは、フロントエンドエンジニアのあつこです。
先日システム部の先輩に「2カラムのデザインがなんで実装できるのかよくわからない(´・ω・)」と言われたので、
2カラムのレイアウトを例にCSSの定番テクニック「clearfix」について簡単に解説してみたいと思います。