• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Code School

プログラミング初心者向け応援メディア

  • Home
  • Swift
  • Python3
  • Ruby
  • Ruby on Rails
  • CSS
  • Sketch
  • How to Study
  • Column
You are here: Home / Web制作 / CSS / [CSS]SVGアイコンの色を変更する方法

 

 

[CSS]SVGアイコンの色を変更する方法

2018年5月6日 By Code School編集部

SVGアイコンを使用した時にSVGアイコンの色を変更する方法をサクッと変更します。

colorプロパティを使いたいところだけど・・・

CSSでSVGアイコンのサイズや色は変更することができます。

ここで、色変更と聞いたらcolorプロパティを使いたいところですよね。

でも、SVGの場合colorプロパティでは色変更ができません。代わりにfillプロパティを使って色の変更を行います。

See the Pen yjzvrd by code-school (@code-school) on CodePen.


SVGタグの方でクラス(もしくはID)の指定を忘れないようにしましょう。

 

まとめ

いかがでしたでしょうか?今回、SVGのカラーをCSSで変更する方法を紹介しました。

まとめると、

  • colorプロパティではSVGの色変更はできない!
  • SVGの色変更はfillプロパティで行う!

ですね。ぜひ参考にしてみてください。








 

関連記事



Filed Under: CSS

Primary Sidebar




Categories

  • iOSアプリ開発 (48)
    • Swift (30)
    • Xcode (13)
  • Python3 (28)
    • Django (9)
  • Ruby (17)
    • Ruby on Rails (6)
  • Scratch (1)
  • Unity (2)
  • Web制作 (42)
    • CSS (34)
    • HTML (4)
  • コラム (11)
  • プログラミングスクール (93)
    • 子供向けプログラミングスクール (58)
    • 社会人向けプログラミングスクール (41)
  • プログラミング学習方法 (8)
  • 開発ツール (30)
    • Atom (1)
    • Brackets (5)
    • Github (2)
    • Mac (1)
    • Pycharm (3)
    • Sketch (16)
[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Python]Scrapyを動かした時にSyntaxError: invalid syntaxとエラーが出る場合の対処法

[Django]TextField内に記載した改行を反映させたい

[Django]TextField内に記載した改行を反映させたい

[Django]変数内の文字列をトランケートする

[Django]変数内の文字列をトランケートする

[Django]変数内に格納したhtmlコードを反映させたい

[Django]変数内に格納したhtmlコードを反映させたい

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]画面上で変数の文字列の長さを返すフィルター

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django]モデルを追加した時にmigrateエラーが出ないための方法

[Django] def __str__(self)とは?

[Django] def __str__(self)とは?

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoでMySQLを使う方法、ハマったことまとめ

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

[Python]DjangoのチュートリアルDjangoGirlsをやってみた感想

Swiftの命名規則まとめ

Swiftの命名規則まとめ

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

PycharmでDjangoをインストールしようとするとAttributeErrorが出る時の対処法

Pythonの命名規則まとめ

Pythonの命名規則まとめ

[Python]Djangoで構築されたWebサービス18選

[Python]Djangoで構築されたWebサービス18選

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

iPhoneアプリを公開する手順まとめ!デベロッパー登録からアプリ公開までの流れ

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法

[iOS]アプリ申請時、バンドルIDにアプリがない時に手動で登録する方法