HTML CSSでSVGをプロ級に使うための2つの実用的な方法

SVGを便利に使う2つの方法を紹介しています?❗️
1. SVGスプライト → １箇所でSVGを定義して、いろんな箇所で表示させる
2. 背景指定 → 背景画像としてSVGを指定。色やストロークも変更可能

? この動画の構成 ?
00:00　SVGを便利に使う2つの方法
00:19　一般的なSVGファイルの使い方
01:10　そもそもSVGってなに？
02:00　SVGファイルの中身は？
02:51　1. SVGスプライト
03:32　- 実際の書き方
05:25　- スタイルの変更
05:52　- いろんなプロパティ
06:10　- スタイルの指定サンプル
06:53　- 別ファイルで読み込む
07:15　2. background-image（背景画像）
08:27　- 指定方法
09:05　- 色の指定
09:53　- ホバーの指定
10:24　- 自作関数
12:24　- デザインデータからsvgをコピー

ご視聴いただきありがとうございます?♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
?『HIROCODE.ヒロコード』をチャンネル登録する ?
http://www.youtube.com/hirocode?sub_confirmation=1

⭐️ 自分でWebサイト作ってみませんか？ ⭐️
誰でも、できる！Webサイト公開の流れ！
https://youtu.be/vHmMklqr0oA

◆ Twitter. ツイッター
https://twitter.com/hirocodeweb

◆ Instagram. インスタグラム ? オススメ❗️
https://www.instagram.com/hirocodeweb/


? 僕が使っている、おすすめのデバイス ?
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "

【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "

【 パソコン 】
✅ Apple Macbook Pro 16inch
https://amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "

【 周辺機器 】
✅ Apple AirPods Pro
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。

✅ Apple iPad Pro 11インチ
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "

? おすすめ書籍 ?
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "

✅ なるほどデザイン
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "

【 デザイン 思考編 】
✅ 誰のためのデザイン？
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "

✅ IAシンキング Web制作者・担当者のためのIA思考術
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "

【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。


? BGM ?
––––––––––––––––––––––––––––––
Happy and Joyful Children by Free Music https://youtu.be/lv1YPeP1O8k
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: http://bit.ly/2PV1WMi
Music promoted by Audio Library https://youtu.be/zXnuDrEN9Xo
––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––
BGM：トーマス大森音楽工房
https://www.youtube.com/c/FreeMusicThomasOomori
––––––––––––––––––––––––––––––

#webデザイナー #figma #webdesign