AFFILIATEBLOGWebデザイン拡大しても美しい、CSSでデザインできる「SVG」とはWebデザイン2019.05.08拡大しても美しい、CSSでデザインできる「SVG」とは私たちが日々目にするWeb上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。ビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。2019.04.17JPEG,PNG,GIFの使い分けてWebページを最適化する方法ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。一般的な仕事をしている方はもちろん、ウェブ関係の仕事に携わっている人たちでも明確な使い分けができていない方々も...上記の記事を参考に用途によって使い分けることがポイントです。ベクター形式には何があるのか。Webサイトで使用できる画像の形式の中では「SVGファイル」と呼ばれるものが唯一のベクター形式になります。JPEG、PNG、GIFに比べて聞き慣れない方も少なくないかと思いますので、今回は基本的な仕組みから主な使い道をご説明いたします。WordPressではデフォルトではSVG形式に対応していないので、アップロードするとエラーが発生します。Support」こちらのプラグインを有効化することで、問題なくSVGのファイルをアップロードできます。ビットマップ形式とは画像を色のついた点の集合体で表現する形式で細やかな色の表現に向いています。(写真や絵画など)しかし、点の集合体がゆえに拡大すると画像が粗くなってしまいます。JPEG、PNG、GIFなどすべてのビットマップ形式の画像は拡大すると画像が粗くなりますよね。ベクター形式とは点と線の情報を数値化した画像形式で、コンピューターが計算をして描画している画像です。画像の拡大や縮小を繰り返しても数式が変化しその都度コンピューターが計算し、描画しなおすので画質が変化しないのが特徴です。一方で、複雑な写真などを表現するには膨大な計算を必要とし向いておらず、線や図形、シンプルなロゴなどに適しています。Graphics」の略称です。その名の通り「計測できる画像」ですので、数式を計算して描画している画像形式です。その特徴からSVGファイルは、画像ファイルでありながらSVG(HTMLに似た言語)で記述され、テキストエディターにて編集することも可能です。SVGでできることスマホやRetinaディスプレイ用に画像ファイルを複数用意する必要がない下記の記事で記述しているとおり、Retinaディスプレイに対応する為には同じ画像であれば、各サイズの画像を数枚用意する必要がありました。2019.04.24Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。iPhoneやMacなどで採用されているRetina(レティーナ)ディスプレイで画...しかし、SVGファイルであれば、解像度による画質の変化がないので一つのファイルですべて対応できます。これによりデータの総容量が軽減され、ページをスムーズに表示できることも良い点です。CSSで画像を編集できる画像ファイルでありながら数式やテキストで記述されたデータですので、SVGファイルにクラス名を指定することもできます。専門の画像編集ソフトを起動しなくてもCSS上でサイズや色を変更できるということです。通常の画像ファイルですと一から画像を作り直す必要がありますが、SVGファイルであれば、あとからでも簡単に修正可能です。JavaScriptを用いたアニメーションにも対応しているアニメーションといえばGIFですが、SVGファイルに直接コードを記述して滑らかな動きのあるアニメーションをつけることもできます。HTML、CSS、JavaScriptの理解が必要です。※SVGのアニメーションはIEなどの一部のブラウザで対応しないので注意が必要です。アニメーション対応ブラウザについてまとめSVGファイルの主な使い道としてはロゴやアイコンなどのシンプルな画像になります。複雑な写真やイラストの場合、表示速度が遅くなり、データ容量も大きくなるので注意が必要です。ロゴやアイコンに限っては高解像度のディスプレイ(Retinaディスプレイ等)にも対応できるので、その他の画像ファイルの形式に比べて優れているといえるでしょう。シンプルでいて、かつどのブラウザでも美しく見せるべきロゴやアイコンなどは、SVGを。それ以外の複雑な写真やイラストなどは、用途に応じてビットマップ形式の画像ファイル形式を活用しましょう。...2020.02.11ワードやエクセルの表をテーブルタグに変換する便利なツール・ジェネレータ集2020.02.10上質な癒しを感覚レベルで訴えかける。Macでzip圧縮する時に注意しておきたいこと。2019.12.28【初心者向け】Gitとは何なのか。基本用語やその仕組みをまとめています。2019.12.27WEBマーケティングより広義のデジタルマーケティングについて基本から考える2019.09.18今更聞けない?Webサイトのアクセス解析やマーケティングにおいて知っておくべき基本用語2019.09.17読み手の心を動かすコピーライターの仕事とは?ライティングやコピーの基本要素を知ろう2019.07.21国内有力ウェブメディア17サイトの記事更新頻度を調査してみた。No.1】人はコンテンツのどこをどう評価するのか。コンテンツマーケティングに関する重要な話2019.07.01スクリーンショットの撮り方でここまで変わる!かっこいい記事にする為の10のテクニック2019.04.07強烈なインパクトでユーザーの視線を鷲掴みにするWordPressテーマ【MAXX】のトップページについて2017.01.26ファーストビューで動画を使うと見る側にどう伝わっているかという考察記事2019.12.15プロ級の会員制サイト運営をあなたの手に。No.1】人はコンテンツのどこをどう評価するのか。