Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

SVGアイコンをCSSで色を替えられるようにしよう

使用ソフト: Illustrator CC 2020、Dreamweaver 2018  

今回はSVGアイコにCSSを適用させて色を変えられるようにする方法を紹介します。


まずはIllustratorでアイコンを作ります。


別名保存でSVGを選択し保存すると「SVGオプション」がでます。
「SVGコード」をクリックしてくだい。


SVGがコードとして変更されますのでコピーしてhtmlに貼り付けます。


貼り付けたら<g></g>など不要な部分を消します。

<style type=”text/css”>
.st0{fill:#F7C0B3;}
</style>

という部分が色を指定しているCSSなのでカラーコードを変更すると色が変えられるようになります。
widthを入れれば大きさも変えられます。
この部分は「.st0{fill:#F7C0B3;}」を抜き出してCSSファイルに書くことも可能です。
※CSSファイルに書く場合はhtmlファイルにある「<style type=”text/css”>.st0{fill:#F7C0B3;}</style>」を消してください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Just Code

    Web

    Just Code cssで画像加工

    CSSを使用して、画像を加工するツールを紹介します。オンラインで利…

  2. Web

    cssだけで、グラデーション入りのラインを作る!

    cssの擬似要素を使った、グラデーション入りのボーダーラインを作りまし…

  3. Web

    CodePenの使い方を極めよう

    jqueryでスライダーなど調べた際に、出てくる「CodePen」を…

  4. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  5. Web

    WEBで使える画像は4つ!ファイルサイズも比べてみた

    WEB用の写真やイラレやフォトショで作った画像を書き出すとき、「とりあ…

  6. htmlcssアイコン画像

    Web

    オススメ!【Animate.css + wow.js 】を使ったスクロールアニメーション

    どうもこんにちは。今回はweb制作で使えるスクロールアニメーシ…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP