CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色で表現してみたいと思ったことはないですか？　今回ご紹介する「HalfStyle」は、CSSとjQueryを使って、文字を

「このサイトのココどうやっているんだろう？」そう思ったとき、 ソースを見るか、ChromeのデベロッパーツールやFirebugを利用しているかと思います。 でも、いまいち使いにくくないですか。特にCSSの部分が。 必要と

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきました。 クリックしたらボタンがボンッと大きくなっり、ブルブル震えたり。 使っているほうの楽しいですよね。 今後どんどん増え

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレーターですが、今回ご紹介するジェネレーターは表組の決定版とも言えそうな使いやすさ、便利さです。 Excelやスプレッドシートで

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみることだそうです。 今回はプロがPhotoshopで作成したテンプレート用PSDデータをコレクションしてみました。 テン

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイトを結構みかけるようになりました。 キレイで気持ちいいので、ついつい何度もマウスオーバーしてしまいます。 今回は、そんな

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。 アイコンフォントを提供するサービスはものすごい数に上りますが、すべてのフォントを利用することはまれ。しかも、使用しない

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当に便利でした。 そしてキレイです。 既存のアイコンを使ったアイコンフォントの利用の仕方は「いまさら聞けないアイコンフォント

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいましたが、無事に表示することができました。 アイコンフォントは、海外のサービスを利用することが多いため、導入に二の足を踏んでい

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ！」と思わせる楽しい動きを簡単に実装できてしまいます。 CSSのトランジションプロパティを使った、マウスオーバーアニメーションです。 簡単なのに、なめらかな動きで

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目がガラリと変わるWEBやグラフィック。 それだけに背景はデザインの重要な要素です。 でも、いちから自分でつくるとなると、結

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用できそうなサービスがありましたのでご紹介します。 CSSを丸裸にして見やすく整理してくれるWEBサービス「CSS STA