はみ出したらスクロールさせる方法!CSSのoverflowの使い方を紹介!

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

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

  • @masatamu7757
    @masatamu7757 4 года назад

    わかりやすかったです!すごく早くコーディングされているのですが、エメットの使い方なども教えてほしいです!

    • @webFrontEndChannel
      @webFrontEndChannel  4 года назад

      ありがとうございます!
      もしよろしければ以下の動画リストにEmmetの動画が2つありますので、見てみてください!
      他にもショートカットの紹介などもしております。

    • @webFrontEndChannel
      @webFrontEndChannel  4 года назад

      すみません、リンクを貼るのを忘れてました💦
      ruclips.net/p/PLv7E5OqNAIPwaMNSePoxrx8NFqadonTPv

  • @黄鼻
    @黄鼻 4 года назад

    やっぱり実践ものはわかりやすい!
    Webkit-animationの解説して欲しいです!

    • @webFrontEndChannel
      @webFrontEndChannel  4 года назад

      ありがとうございます!
      webkit-animationというのは、css animationのことでしょうか?それともjsの animation APIでしょうか?

    • @黄鼻
      @黄鼻 4 года назад

      こんなコードを見つけて実装したら動いたんですが、概念がわからず、応用ができんのです。
      .main_img:nth-of-type(5) {
      -webkit-animation-delay: 24s;
      animation-delay: 24s; }
      .main_img:nth-of-type(6) {
      -webkit-animation-delay: 30s;
      animation-delay: 30s; }
      @keyframes anime {
      0% {
      opacity: 0;
      }
      8% {
      opacity: 1;
      }
      17% {
      opacity: 1;
      }
      25% {
      opacity: 0;
      transform: scale(1.2) ;
      (続きあり)
      というか、このやり取りがすでに有料級。

    • @webFrontEndChannel
      @webFrontEndChannel  4 года назад +2

      なるほど!それはCSS animationですね。
      まず-webkit-とついているのは、ベンダープレフィックスと言います。
      ベンダープレフィックスについては、動画を上げようと思っていましたので、もし調べても分からなければ動画をお待ちください汗
      結果だけ言うと、現在は-webkit-と書かれている行は不要なので消してしまっても動きます。
      それから、CSS animationについてはこちらも複雑なので少しずつ動画を分けて配信していく予定でしたが、基本的な考えについては、以下の動画で説明していますので、もしよろしければご覧いただければと思います。
      ruclips.net/video/PlfrFMwiRLw/видео.html
      今後CSS animationに関しましては順を追って動画を公開していきますので、申し訳ありませんが少しお待ちいただければ幸いです。
      このコメントのやりとりは、私も視聴者様のニーズが分かりありがたいので、今後もよろしくお願い致します!

    • @黄鼻
      @黄鼻 4 года назад

      めちゃめちゃ楽しみにしています。
      今は、基礎固めばかりで、次はJs、そのあとvueに入っていくつもりです。
      見たい動画がまだたくさんあるので、ゆっくりお待ちしています。

  • @aaaqwd
    @aaaqwd 4 года назад

    この場をお借りさせていただきます、ご容赦ください。
    私は横にスクロールさせたくて頑以下の通りに設定しているのですが、横向きのかスクロールバーが表示されなくて困っています。
    よければ何か問題点があれば教えていただけると幸いです。
    【css】
    div#rank{width: 56.32em;
    height: 640px;
    background-color: gray;
    overflow-x:auto;
    }
    table#rank{width:400px;
    margin-left:0;
    margin:5px;
    padding:0px;
    background-color:#ffffff;
    border-collapse:collapse;
    border:1px solid #000000;
    float:left;
    }
    table#rank{width:400px;
    margin-left:0;
    margin:5px;
    padding:0px;
    background-color:#ffffff;
    border-collapse:collapse;
    border:1px solid #000000;
    float:left;
    }
    table#rank{width:400px;
    margin-left:0;
    margin:5px;
    padding:0px;
    background-color:#ffffff;
    border-collapse:collapse;
    border:1px solid #000000;
    float:left;
    }
    【html】


    2019年
    🌟男の子🎀女の子
    1位レオ1位あんず
    2位すばる2位おはぎ
    3位そら3位こはる
    4位のん太4位しぐれ
    5位はるか5位ひめ
    6位みずき6位ゆずり
    7位ゆず7位るん
    8位オジー8位ココ
    9位シエル9位サラ
    10位ジョン10位スピカ





    2018年
    🌟男の子🎀女の子
    1位シュシュ1位リリー
    2位ルル2位うずら
    3位レオ3位ノル
    4位SOL4位ノルン
    5位いち5位ハル
    6位おもち6位いちご
    7位かのん7位おこめ
    8位きなこ8位お嬢
    9位きび9位かえで
    10位こてつ10位きなこ





    2017年
    🌟男の子🎀女の子
    1位むぎ1位すず
    2位そら2位むぎ
    3位レオン3位ハル
    4位Kai4位ミルク
    5位あお5位ララ
    6位きり丸6位Sea
    7位こはく7位あずき
    8位ちくわ8位あやめ
    9位とら9位あられ
    10位はく10位かなた





    2016年
    🌟男の子🎀女の子
    1位レオ1位ルル
    2位ハル2位はる
    3位アル3位アンジュ
    4位ノア4位ベル
    5位ノル5位モモ
    6位ERU6位ラム
    7位Fee7位リリィ
    8位あとむ8位あんず
    9位あらん9位きなこ
    10位いくら10位くるみ





    2015年
    🌟男の子🎀女の子
    1位こたろう1位さくら
    2位ゆず2位小雪
    3位エル3位小梅
    4位ジル4位あずき
    5位Muu5位しぐれ
    6位いぶ6位すず
    7位くり7位たま
    8位ここ8位ぴけ
    9位こてつ9位ほのか
    10位てとら10位みあ





    2014年
    🌟男の子🎀女の子
    1位りく1位シェリー
    2位サム2位きなこ
    3位トラ3位こはる
    4位ミント4位こんぶ
    5位こはく5位はな
    6位こはる6位ぽんず
    7位しおん7位イル
    8位しんく8位エル
    9位たいが9位エルサ
    10位なつ10位クク





    2013年
    🌟男の子🎀女の子
    1位くりお1位なつめ
    2位しぐれ2位ひな
    3位つくも3位ぴゅん
    4位ぶり4位みーこ
    5位らい5位みやび
    6位りく6位もも
    7位アトム7位るり
    8位アム8位エレナ
    9位ジェイ9位キティ
    10位ジェイ10位ジル

    • @aaaqwd
      @aaaqwd 4 года назад

      display: flex
      を入力することで解決いたしました!