ベンダープレフィックスってなに?自動で付与する方法とは?ベンダープレフィックスってなに?自動で付与する方法とは?普段Webサイトのコーディングを行う時にベンダープレフィックスは当たり前のように使っていると思いますが、きちんと理解して使えていますか?また、基本的にベンダープレフィックスは自動で出力するのが制作の現場では当たり前となっています。ベンダープレフィックスの自動出力は比較的簡単に行えるので、初心者の方でも大丈夫!今回は、ベンダープレフィックスに関する基本知識から、自動でベンダープレフィックスを付与する方法までご紹介したいと思います。INDEXベンダープレフィックスとはベンダープレフィックスはなぜ必要?ベンダープレフィックスを自動で付与する方法テキストエディタの拡張機能でベンダープレフィックスを付与するgulpでベンダープレフィックスを付与する2019年ベンダープレフィックスを付けておいた方がいいプロパティまとめベンダープレフィックスとはベンダープレフィックスとは、簡単に言ってしまうとそれぞれのブラウザでCSSを正しく適用するための識別子です。ブラウザによってベンダープレフィックスを付けておかないと適用されないCSSのプロパティがありますが、ベンダープレフィックスを付けることによって正しく表示させることができます。ベンダープレフィックスの種類は大きく分けて下記の4種類です。msは現在でもよく目にするベンダープレフィックスですが、oは現在は基本的に不要です。ベンダープレフィックスはなぜ必要?ベンダープレフィックスのそもそもの役割は、ブラウザでまだ正式にサポートされていないプロパティを適切に表示するためのものなので、ブラウザがアップデートされると不要になります。ユーザーのPCやスマホにインストールされているブラウザが常に最新版へアップデートされているという訳ではないため、保険としてベンダープレフィックスを付けておくというのが慣習となっています。Gridなどを使う時にmsのベンダープレフィックスを付けておかないと正しく表示されなくなる場合があります。徐々にベンダープレフィックスが必要になるケースは減ってきていますが、それぞれのブラウザで正しく表示するためにはまだまだ欠かすことができません。「コードが増えてめんどくさい」と思う方もいるかもしれませんが、ベンダープレフィックスは自動で付与することによって、手間をかけずに正しくベンダープレフィックスを付与することができます。ベンダープレフィックスを手書きしている人はほとんどいないと思いますが、下記にご紹介する方法を使ってベンダープレフィックスを自動で付与するようにしましょう。ベンダープレフィックスを自動で付与する方法いちいちオプションがブラウザに対応しているのか調べて、ベンダープレフィックスを正しく記述していくのはかなり手間がかかり、効率的ではありません。実際にWeb制作の現場ではどうしているかというと、自動でベンダープレフィックス付きのCSSが出力される環境を作り、そこで作業を行っています。ベンダープレフィックスを自動で付与する方法は大きく分けて下記の2つの方法があります。テキストエディタの拡張機能を使うgulpを使うどちらもそこまで時間をかけずに準備することができるので、簡単にご紹介します。Textを利用している場合はエディタの拡張機能を利用することで簡単に自動でベンダープレフィックスを付与することができるようになります。Codeを利用している方は、「Autoprefixer」という拡張機能をインストールすれば、簡単にベンダープレフィックスを付与することができるようになります。Compiler」を使えばscssをコンパイルする時に自動でベンダープレフィックス付きのCSSを出力してくれるので、scssでCSSを記述する場合はこちらがおすすめです。trendsgulpでベンダープレフィックスを付与するgulpというのは、SassをCSSにコンパイルしたり、ベンダープレフィックスを付与したり、CSSを圧縮するという作業を自動で行ってくれるタスクランナーです。gulp.js公式サイト導入に少し手間がかかりますが、一度設定してしまえばどのテキストエディタで編集しても必要な処理を自動で行ってくれるようになるので、使いこなせるようになると非常に強いです。gulpの導入方法については、下記のページで詳しくまとめられています。gulpでの環境づくり2019年ベンダープレフィックスを付けておいた方がいいプロパティ2019年9月現在、ベンダープレフィックスを付けておいた方がいいプロパティをいくつかピックアップしました。Animationwebkitradial-gradientwebkitここで紹介しているのはあくまで一例です。そもそも1つずつベンダープレフィックスが必要なのか調べたり自分でベンダープレフィックスを記述するのは非常に効率が悪いので、やはりテキストエディタの拡張機能やgulpなどを使って自動でベンダープレフィックスを出力できる環境を作るのがおすすめです。use」というサイトを見れば、プロパティごとにベンダープレフィックスが必要なのか不要なのか調べることができます。自分でベンダープレフィックスを確認したい場合はこちらを利用してみてください。useまとめ書籍やWebサイト上のコードによっては、すでに不要なベンダープレフィックスも一緒に書かれたコードが掲載されている場合もあるので、それを鵜呑みにしてしまうと無駄なコードが増えてしまいます。ベンダープレフィックスの基本知識と役割だけは理解しておいて、後はベンダープレフィックスを自動で出力できるような環境を作ることがおすすめです。Codeは初心者の方でも簡単に機能を拡張したりカスタマイズすることができるので、まだ使ったことがない方はこの機会に導入してみてはいかがでしょうか。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。