ブラウザごとにスタイルを指定できるベンダープレフィックスについて昨年・今年とCSS3案件が確実に増えています。そんな中でよく使うのがベンダープレフィックス。今日はそんなベンダープレフィックスについて書いてみます。スポンサードリンクベンダープレフィックスとはCSS3のプロパティには接頭辞が必要な場合があるCSS3を使えるようになってはいますが、これって実はまだ仕様策定の途中なんですよね。CSS3で将来的に採用予定のプロパティは、各ブラウザ側で「本実装はまだだけど、とりあえず先行して使える状態にしてあるよ」といった対策がされてたりします。これらを私たちが使えるように、各ブラウザが独自の接頭辞を用意しています。ボックスに影を付けるCSS3のプロパティ「box-shadow」。5px;}となります。このプロパティがFirefoxで仮実装の段階であった場合は、Firefox用に用意されている接頭辞を付けてものを追記する必要があります。5px;}先頭に「-moz-」と付いた行が追記されましたよね。これは「Mozilla」の略で、Firefoxが用意しているベンダープレフィックスです。以下は主要なブラウザの接頭辞です。(Opera)上記を見ると察しがつくと思いますが、各ブラウザの接頭辞(ベンダープレフィックス)は、ブラウザのリリース元やレンダリングエンジン名を省略した形ですね。上記の主要ブラウザで、先行実装されている段階のプロパティを使う場合は、以下のように各ブラウザ用のベンダープレフィックスを一つ一つ記述してあげます。5px;}ただし、ブラウザ側で本実装された場合はそのベンダープレフィックスは不要になります。したら、そのベンダープレフィックス自体が使えなくなるかもしれません。5px;}のように、どのベンダープレフィックスが無効になってもいいように、通常の指定方法も記述してあげる必要があります。上記の場合は、通常の指定を最後に書いていますが、これはCSSが後に書かれた指定を優先するからです。将来的にベンダープレフィックスが将来的に機能しなくなるならいいんですが、予期せぬ解釈をされてしまうと大変です。それらを念頭に、必要のないトラブルには遭わないように(各ブラウザも配慮はしているはずですが)、不要なベンダープレフィックスは書かないように注意しましょう。各ブラウザのCSS3対応状況については、以下の2サイトがオススメです。DesignCSS3の主要プロパティが各ブラウザで対応しているかどうかが一覧でサクッと見られます。etcこちらもCSS3の対応状況が確認可能。上記サイトよりも多少多めにプロパティがフォローされてますね。olリストに1などの丸数字を使う方法olリストで表示させる番号を「1.」とか「2.」ではなく、「1」とか「2」などの丸数字へCSSで強引に変更する方法について。コーディングjQueryを勉強した時にタメになったサイトいまやウェブ製作の世界においてFLASHに代わって必要不可欠な要素となっているのがjQueryプラグインによる簡単かつ動的なアクションの実装。これから、勉強される方にオススメなサイトのご紹介です。文字は透過させずにそのまま、背景だけ透明にする方法CSSで背景を透過させようと思ってopacityを使ってみたんだけど、文字まで一緒に透過されてしまう...。そんな時に使えるTIPSです。スマホサイトで折り畳みやスライドメニューを実装する時にオススメのプラグインスマートフォンサイトを製作する際に、ポイントの1つとなるのが「メニューどうする?」って話。スマホ画面って狭いので、情報の見せ方に工夫が必要なんですよね。画面の幅(width)に応じて要素にclass名を付与・変更する方法jQueryを使って、ある画面幅を境に任意のボックスへ動的にclass名を付与したり外したりする時のTIPSです。コーディングサイト移転・引越しなどでドメインURLが変更になった時の”正しいリダイレクト”方法サイトの移転によってドメインが変更になったり、諸事情でページのURLが変更になる際には正しくリダイレクトを行う必要があります。画像ページの先頭へ某企業のウェブ担当を経て2012年に独立。現在は東京・神奈川を中心にウェブ企画/デザイン/コーディングなどウェブ製作業務に従事してます。