【Webデザイン入門】SVGって何?SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ม.ค. 2025

ความคิดเห็น • 27

  • @webgodweb
    @webgodweb  3 ปีที่แล้ว +3

    SVGって聞いたことあるけど、よくわからない。使ったことがないという初心者の方へ!
    Webデザイナーを目指すなら、SVGの正体を理解して、正しく適切に扱えるようになりましょう!
    SVG画像の作成方法からダウンロード方法まで解説しています!
    ★動画内で使用している主なショートカットキーについて
    下記動画で詳しく紹介していますので、効率的な模写コーディングのお供に是非ご覧ください。
    【超入門】作業効率爆上がり!必ず覚えておきたい超絶便利ショートカット【HTML・CSS コーディング】
    th-cam.com/video/2Egsijek-aM/w-d-xo.html
    【初心者向け】Visual Studio Codeの使い方・便利機能解説!ショートカット/日本語化/Emmet【作業効率化】
    th-cam.com/video/pQ7tmTx5Zbk/w-d-xo.html
    【作業効率UP!】Web制作にマストのGoogle Chrome拡張機能10選!現役Webディレクターも愛用【HTML・CSS コーディング】
    th-cam.com/video/mfc6iCcgMq0/w-d-xo.html

  • @aknr7704
    @aknr7704 3 ปีที่แล้ว +3

    なんとなくしか理解してなかったので、すごく勉強になりました❗️
    ありがとうございました😊

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      お役に立てて嬉しいです!☺️
      こちらこそありがとうございます!!

  • @noahsailer
    @noahsailer 2 ปีที่แล้ว +1

    なんだ、ただの神か。

    • @webgodweb
      @webgodweb  2 ปีที่แล้ว

      コメントありがとうございます😂

  • @egawatakuma
    @egawatakuma 3 ปีที่แล้ว +3

    今までSVGは、ロゴとかアイコンに適しているものというくらいの認識しかなかったのですが、
    動画を見てテキストデータになっていることに驚きました。
    サイズ変更に対応しているという点は、レスポンシブデザインにおいても強みだと思うので使いこなしていきたいです。

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว +1

      コメントありがとうございます!
      そうですね!スマホ用に別サイズの画像を用意したり、スマホでもPCと同じ画像を使って、余計な容量を読み込んだりする必要がないので、使い方によってはかなり便利で使える子だと思います🙇‍♀️✨

  • @午後の紅茶-n8u
    @午後の紅茶-n8u 3 ปีที่แล้ว +2

    ちょうど調べてたのでとても助かります!

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      コメントありがとうございます!
      タイミングが良くてこちらも嬉しい限りです✨

  • @omi4753
    @omi4753 3 ปีที่แล้ว

    どの動画も分かりやすくて本当に助かってます。優しい先生に教わってる感じで癒されるし楽しく学ばせてもらっております。今回のファッション好きです💜

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      コメントありがとうございます!とても励みになります🙇‍♀️わーっ嬉しいです!!💜

  • @masatamu7757
    @masatamu7757 3 ปีที่แล้ว

    ほんとにわかりやすいチャンネルです!最高なので、もっと色々なことをたくさんアップして欲しい〜ーーーー

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      有り難いお言葉ありがとうございます😂 かしこまりました!!これからも幅広いテーマで発信していけるように頑張ります🙇‍♀️

  • @sayang_CCA60
    @sayang_CCA60 3 ปีที่แล้ว

    SVG...恥ずかしながら初めて聞きました。知るは一時の恥。知らぬは一生の恥。勉強になりました!

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      ご視聴ありがとうございます!おっしゃる通り、この機会に知っていただけて良かったです✨
      最近のWebサイトのアイコンなどの要素に注目してみると、結構使われてるものも多いと思いますー!

  • @たかゆう-o7m
    @たかゆう-o7m 2 ปีที่แล้ว

    とてもわかりやすかったです!

  • @未知ミチ
    @未知ミチ 3 ปีที่แล้ว

    ファビコンの作成方法もお願いしたいです!

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      リクエストありがとうございます!今後の動画テーマの参考にさせていただきます!🙇‍♀️🙇‍♀️

  • @masa-qg3xp
    @masa-qg3xp 3 ปีที่แล้ว

    ありがとうございます✨✨

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      こちらこそありがとうございます🙇‍♀️✨

  • @user-tomida-aichi
    @user-tomida-aichi 3 ปีที่แล้ว

    オープニングアイキャッチの太陽が登る動きはsvgアニメーション使ってます?

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว +1

      こちらは動画編集ソフトで作っているので、また違う仕組みのお話ですが、同じようなアニメーションをWebサイト上で表示したいなら、SVGアニメーションで実装できますね!☀️
      SVGはWeb上で表示するコンテンツに活用すると、この動画で紹介したようなメリットが得られます!

  • @闇やみつき
    @闇やみつき 3 ปีที่แล้ว

    なつこさん、見間違えてなければファイルの保存日時深夜なのでは……ご自愛ください🙏

    • @webgodweb
      @webgodweb  3 ปีที่แล้ว

      ハッ、気づかれてしまいました😂
      気にかけて頂きありがとうございます🙇‍♀️🙇‍♀️夜型なんです。。笑

  • @chilloji1202
    @chilloji1202 2 ปีที่แล้ว

    今回のなつこさんアーティストのiriさんに似てる気がする

  • @cfhky
    @cfhky 2 ปีที่แล้ว

    勉強になりました!たすかります

    • @webgodweb
      @webgodweb  2 ปีที่แล้ว

      ご視聴ありがとうございます🙇‍♀️