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. Web

    無料!30秒で!グーグルマップの色味を変える方法

    グーグルマップの色味はCSSのfilterプロパティを使って簡単に変え…

  2. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

  3. Web

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

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

  4. Web

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

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

  5. Web

    目指せ!positionマスター!

    レイアウトに便利なposition!ようこそ!Dreamwea…

  6. FC2ホームページ 登録からサイトのアップロード

    Dreamweaver

    FC2ホームページ 登録からサイトのアップロードまでの手順

    登録1.ユーザーとIDの登録1.「FC2ホームページ」と検索し…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP