"CSS"に関連する記事

CSSのアレとか

:focusでsafariのハイライトが超ジャマじゃね?


知ってる人は知っている。知らない人はちょっと幸せになるCSS3のテクニックを紹介。

CSSで:focusを使用してフォームを作ったとき、safariではちょっとマズいことが起こります。
safariには自動的にハイライト機能が働いて、青いボーダーが表示されます。
こんな感じで…ちょっと残念な感じですね。

CSSで:focusを指定したときのSafariの表示 これを、ナントカします!(`・ω・´)

Continue Reading »

画像を使わないでフォントをユニークに!


ユニークなフォントをWEBサイトに使いたい。WEBデザイナーさんならよくある事だと思います。
今までは、フォントサイトからダウンロードして、photoshopなどで画像化したものをWEBに上げていましたね。

これからはWEBフォントを利用するのが、一般的になるかもしれませんよ。
今回は、CSS初心者向けにWEBフォントを利用するためのデモ。
知ってる人は知っている、知らない人は知っててソンはないテクニックですw。

Webフォントを利用するデモ

Continue Reading »

まるでPHOTOSHOPの様にグラデーションを作れるCSS ジェネレーター


これはマジで使える!Photoshopのようにグラデーションを作れるし、プリセットも秀逸。
タイムリーにプレビュー出来るので、視覚的にも分かりやすい。
できたグラデーションをCSS3のコードを取得して、自分のCSSファイルにコピーすればOK。

colorzilla Ultimate CSS Gradient Generator
colorzilla.com gradient-editor

対象ブラウザは、

  • Firefox
  • Safari
  • Chrome (Webkit)
  • Internet Explorer.

IEに対応しているのはうれしいですね。

CSS3が苦手な方は、マジ使っとけww。

CSS3のグラデーションをIE7.8でも使いたいからIEハックを書くんだ!


CSS3にはグラデーションというすばらしいプロパティがあるんですが、やっぱりIEはCSS3に対応していないのだな。
なので、CSS3のグラデーションをIE7や8にも適応させる為のIEハック。つぅか、IEってなに?頑なにCSS3を実装しない理由がわかんない。

Continue Reading »

IEでもCSS3を対応させたい時の対処法”ie-css3.htc”


以前にIEでも角丸と影をCSS3で表現したい!しかも簡単に!という記事を書きましたが、もうちょっとだけ簡単にするスクリプトがdesign-developさんにありましたので紹介。
たった1行追加するだけでOKの超簡単スクリプト。
角丸やシャドーなんかの、比較的良く使いそうな要素に対応しているんで、案件でIE6対応必須の時でも安心して使えそうですね。


Continue Reading »

スライドするフォームでコンバージョン向上!なjQuery


よくコンバージョンなんて言葉を聞くと思いますが、コンバージョンとは簡単に言うと目標設定のこと。
ECサイトのような商用サイトでは、会員登録や商品購入完了とかの目標のことですが、このコンバージョン率を上げる施策がサイト運営の要といってもいいかもしんない。
そんなコンバージョン率を上げることが出来るかもしれないjQueryライブラリを紹介です。
Continue Reading »