【HTML入門講座】marginとpaddingの違いをマスターする!2種類の余白指定。

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

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

  • @野田京介
    @野田京介 Год назад +3

    よく拝見しています。paddingとmarginがよくごちゃ混ぜになります。繰り返し見るようにしますね♪

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

      ありがとうございます😆❗️❗️❗️

  • @human-iv6ve
    @human-iv6ve Год назад +2

    とても勉強になり、チャンネル登録させて頂きました。
    7:30の所なんですが、なぜパディングなんでしょうか?自分も同じようにコーディングしてみたんですが、隙間ができません。マージンにすると同じようになるのですが‥教えて頂けると助かります。

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

      ありがとうございます🙇‍♂️❗️
      padding: 10px;て指定してるところでしょうか??なぜでしょう😵💦
      コード載せていただくか、概要欄のファイル見ていただけたらわかるかもしれません❗️

    • @たける-s8h
      @たける-s8h Год назад

      私もなぜpaddingで隙間が開くのかが不思議です。
      paddingによって内側の幅が広がることでボックスが大きくなり、flex:wrap;で改行されるのが通常の動作なのかと考えていたのですが…

    • @sskk8098
      @sskk8098 11 месяцев назад

      動画のコードを拝見すると、タグの中にタグがあり(2重になっている)、を青いボックスにしているため、
      につけたpadding:10pxがの周りにできているようですね。

  • @ermpyn
    @ermpyn 3 года назад +2

    9:209:23では違うことが書いてありますが、9:20の説明の上右下左の順でいいですよね?

    • @hirocode
      @hirocode  3 года назад +2

      ご指摘いただきありがとうございます🙇‍♂️❗️
      ほんとですね、肝心な箇所間違えていますね😱💦
      おっしゃる通り上右下左の順が正しいです🙇‍♂️🙇‍♂️🙇‍♂️

  • @asa___1165
    @asa___1165 2 года назад +1

    概要欄にファイルのリンクがないと思うのですが、リンク追加してほしいです💦

    • @hirocode
      @hirocode  2 года назад

      コメントいただきありがとうございます😊♪
      概要欄に動画内で使用したファイル追加したのでご確認ください🙇‍♂️❗️

  • @なぎりん-y8d
    @なぎりん-y8d 2 года назад +1

    急にすみません😭
    ワードプレスFAKEテンプレートを使ってます!
    画像が1200px以上の時は左右の余白を100px付けたくて、
    (PCの時は左右margin100px)
    (モバイルの時は全画面)
    カスタムcssでコードを書いたのですが反映されませんでした。。
    書いたコード
    @media screen and (min-width: 1200px) {
    width: auto;
    margin: 100px;
    padding: 50px 30px 50px;
    }
    ご教授お願いします🙇‍♀️

    • @hirocode
      @hirocode  2 года назад

      コメントいただきありがとうございます😊♪
      メディアクエリは下記のようにセレクタを指定する必要があるので、そこがうまくいっていないかも知れません!
      @media screen and (min-width: 1200px) {
      .selector {
      width: auto;
      margin: 100px;
      padding: 50px 30px 50px;
      }
      }
      確認してみてください🙇‍♂️❗️

  • @furutei920
    @furutei920 4 года назад +4

    びっくりするぐらい解りやすいです。ありがとうございました。本当に感謝しています。

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

      そう言っていただけてめちゃめちゃ嬉しいです😭❗️ありがとうございます🙇‍♂️

  • @Yuni0523
    @Yuni0523 4 года назад +5

    わかりやすかったです!ありがとうございます。

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

      ありがとうございます☺️❗️❗️

  • @ヒートヒート
    @ヒートヒート 3 года назад +5

    Progateの道場コースでこれでつまずいて全然進めなかったので助かりました

    • @hirocode
      @hirocode  3 года назад

      参考にしていただけたようで嬉しいです😆‼️ありがとうございます🙇‍♂️

  • @あいうえお-n9u6s
    @あいうえお-n9u6s Год назад +1

    [html]
    aaaa
    HP=108
    こうげき=130
    防御=95
    とくこう=80
    とくぼう=85
    すばやさ=102
    [css]
    .contena{
    display: flex;
    }
    .a{
    margin-right: -500px;
    }
    このプログラムでmargin-rightが反映されないのですがなにが原因か教えていただけませんか?

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

      コメントいただきありがとうございます😊♪
      margin-rightに-500px(ネガティブマージン)を指定しているので、この場合ulタグが左に500px動くのが正しい動きになります❕

    • @あいうえお-n9u6s
      @あいうえお-n9u6s Год назад

      @@hirocode ありがとうございます

  • @kondolman
    @kondolman 4 года назад +1

    お聞きしたいのですが、例として書いてる時のそのアプリ?サイト?はなんですか?
    練習用にそれを使ってなれたいので。

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

      コメントありがとうございます😆❗️
      coda2というコードエディタを使ってコードを書いて、GoogleChromeというブラウザに表示しています❗️
      ご質問の内容このことであっていますかね🤔?ご質問の意図違っていたり他不明点あれば再度コメントください🙇‍♂️❗️

  • @Ha-ma
    @Ha-ma 4 года назад +1

    これ理解出来なかったのでとても有難いです。

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

      そういっていただけて嬉しいです😭こちらこそありがとうございます🙇‍♂️❗️