【超入門】初心者必見!CSSアニメーションの基本が学べる入門講座 transition / animation / @keyframes【HTML・CSS コーディング】

Поделиться
HTML-код
  • Опубликовано: 21 окт 2024

Комментарии • 22

  • @webgodweb
    @webgodweb  Год назад +4

    CSSアニメーションの初心者向け解説です!
    transitionプロパティ と、@keyframes でアニメーションを設定する方法を紹介します。
    学習中の方も、早速コーディングに取り入れてみてください。

  • @hikkymama
    @hikkymama 10 месяцев назад

    いつもありがとうございます!CSSだけでこんなことができるんですね。ワクワクします!

  • @vidabowby0106
    @vidabowby0106 Год назад

    色々なことができるんですね。アニメーションってなんかワクワクします。自在に使えるようになったら世界が広がりそうですね。続編も楽しみにしています!

    • @webgodweb
      @webgodweb  Год назад

      いつもありがとうございます☺️
      わかります、学習途中の方は誰しもワクワクする作業だと思います!!実装がうまくいくと楽しいし、華やかな仕上がりになるので是非少しずつ取り入れてみてください🙆‍♀️

  • @akiokunn9962
    @akiokunn9962 Год назад +1

    相変わらずわかりやすくて助かりました😮‍💨

    • @webgodweb
      @webgodweb  Год назад

      お役に立てて良かったです🙇‍♀️🙇‍♀️

  • @user-natural-farming2022
    @user-natural-farming2022 Год назад +1

    いつも有益な動画をありがとうございます😀

    • @webgodweb
      @webgodweb  Год назад

      こちらこそご視聴ありがとうございます!!

  • @sota-blog
    @sota-blog 9 месяцев назад

    お茶目w
    CSSアニメーションもバッチリ吸収させてもらいました!動画配信ありがとうございます!!

  • @週末テニス部村本プラス
    @週末テニス部村本プラス 6 месяцев назад

    やはり分かりやすい☺

    • @webgodweb
      @webgodweb  5 месяцев назад

      嬉しいですありがとうございます🙇‍♀️

  • @yoshi-mh1fz
    @yoshi-mh1fz Год назад +1

    いつもありがとうございます。
    html5プロフェッショナル認定試験取得を目指して勉強中ですが、解説動画など出して頂けると幸いです。

    • @webgodweb
      @webgodweb  Год назад +1

      コメントありがとうございます!
      動画更新の参考にさせていただきます🙆‍♀️ 試験応援しております!!!

  • @holyhorinaonippon
    @holyhorinaonippon 10 месяцев назад

    🇯🇵🇯🇵🇯🇵🇯🇵いいですね

  • @tenmaa8679
    @tenmaa8679 Год назад +1

    申し訳ございませんが、私はインドネシアの大学生の xiella Devinaと申します。コンピュータに関してはあまり経験がありませんが、既にその分野に興味を持っており、合格してから日本で働く予定です。日本語を勉強しながら、コーディングも学んでいますが、まだ尊敬語を習得していないため、お詫び申し上げます。このチャンネルは本当に合っています。一つお願いがあります。インドネシア語への翻訳を入力していただけますか?

  • @えんびフライ
    @えんびフライ Год назад +2

    cssとJavaScript、どちらで動きをつけるかはどう使い分けてますか?

    • @webgodweb
      @webgodweb  Год назад +1

      コメントありがとうございます!基本的に、CSSでできることはCSSで済ませたほうが、処理の負荷的にも望ましいと考えてます💭
      (一般的に、CSSアニメーションのほうが軽量な処理で済むことが多いです)
      画面をスクロールしたら、クリックしたら、みたいなユーザーが起こすアクションやイベントをもとに動きをつけたいときはJavaScriptによる処理になることが多いですね。

  • @yuuki-ww3hz
    @yuuki-ww3hz 9 месяцев назад

    トランジションやアニメーションプロパティは、
    ホバーやアクティブといった擬似要素にしか使えないんでしょうか?

    • @webgodweb
      @webgodweb  9 месяцев назад

      基本的に全ての要素に使えます!
      ただ、アニメーションの実行タイミングを操るには少々工夫が必要です。
      通常の要素だと、ホバーした瞬間、アクティブになった瞬間、という条件で発動するわけではないので、ページが読み込まれた時点でアニメーションしたり、一定間隔でエンドレスで繰り返したりするように実装することはできます。
      それ以外の条件に応じてアニメーションさせたい場合は、JavaScriptとも組み合わせる必要がでてきたりします。(例えば、スクロールしたら、などの条件でアニメーションさせたい場合です!)

  • @Star-qp7rv
    @Star-qp7rv Год назад

    関係ない質問ですみません。
    よくphpはwebサービス開発に特化してる、javaは大規模アプリに向いてる、rubyは高速で開発できる、みたいなことが言われてますが、
    規模の大きさは関係なく、webサービスの「長期的な運用保守」に向いてる言語が知りたいです。
    1個のアプリ開発したら終わりじゃなくて、規模の大きさは関係なく1個のwebアプリをずっと長く運営するのに向いてる言語は何でしょうか?
    あと動画面白いし分かりやすかったです。

    • @webgodweb
      @webgodweb  Год назад +1

      ご返信が遅くなりすみません🙇‍♀️
      ご質問ありがとうございます。恐縮ながら、私自身があらゆる言語に精通しているわけではないので歯切れの悪い回答になってしまいますが、、保守のしやすさ、継続しやすさという点においては、言語よりも使用するフレームワーク(そのバージョン)などの選定のほうが重要になると考えております。
      考え方にもよりますが、例えば保守のしやすさを「手間のかからなさ」と捉えるのであれば、中には Long Term Support(LTS)などと呼ばれる長期サポート対応のものがあり、頻繁な更新やアップデート対応などを避けられる場合があります。
      また、保守に関わる開発者のリソースを考えると、できる限り学習コストが低い言語の方が、人員を充填しやすいとも思いますし。。
      色々な観点があるので、結構難しい話題だと思います…!

    • @Star-qp7rv
      @Star-qp7rv Год назад

      @@webgodweb ありがとうございます!