【HTML入門講座】marginとpaddingの違いをマスターする！2種類の余白指定。
今回は、初めは理解するのが難しい、marginとpaddingについて解説しました。
それぞれの余白の捉え方や、実際の組み方の例なども含めて説明しています☺️
※[修正] 9:21~ paddingの順 × top left bottom right ○ top right bottom left
🗂この動画で使用したファイル🗂
www.craft.do/s/oaYH9bNBlBZgyh
この動画が気に入っていただけたら、ぜひチャンネル登録よろしくお願いします😆❗️
その他のSNSもフォローいただけたら嬉しいです🙇♂️❗️
◆ チャンネル登録
kzread.info?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
---- マウス ----
【 ロジクール アドバンスド ワイヤレスマウス MX Master 3 】
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
---- キーボード ----
【 ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS 】
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
---- パソコン ----
【 Apple Macbook Pro 16inch 】
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
---- 周辺機器 ----
【 Apple AirPods Pro 】
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
【 Apple iPad Pro 11インチ 】
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
---- デザイン 基礎編 ----
【 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 】
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
【 なるほどデザイン 】
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
---- デザイン 思考編 ----
【 誰のためのデザイン？ 】
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
【 IAシンキング Web制作者・担当者のためのIA思考術 】
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
---- 書籍デバイス ----
【 キンドルペーパーホワイト Kindle Paperwhite 】
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
Пікірлер: 25
よく拝見しています。paddingとmarginがよくごちゃ混ぜになります。繰り返し見るようにしますね♪
@hirocode
9 ай бұрын
ありがとうございます😆❗️❗️❗️
びっくりするぐらい解りやすいです。ありがとうございました。本当に感謝しています。
@hirocode
3 жыл бұрын
そう言っていただけてめちゃめちゃ嬉しいです😭❗️ありがとうございます🙇♂️
わかりやすかったです！ありがとうございます。
@hirocode
3 жыл бұрын
ありがとうございます☺️❗️❗️
Progateの道場コースでこれでつまずいて全然進めなかったので助かりました
@hirocode
2 жыл бұрын
参考にしていただけたようで嬉しいです😆‼️ありがとうございます🙇♂️
これ理解出来なかったのでとても有難いです。
@hirocode
3 жыл бұрын
そういっていただけて嬉しいです😭こちらこそありがとうございます🙇♂️❗️
急にすみません😭 ワードプレスFAKEテンプレートを使ってます！ 画像が1200px以上の時は左右の余白を100px付けたくて、 (PCの時は左右margin100px) (モバイルの時は全画面) カスタムcssでコードを書いたのですが反映されませんでした。。 書いたコード @media screen and (min-width: 1200px) { width: auto; margin: 100px; padding: 50px 30px 50px; } ご教授お願いします🙇♀️
@hirocode
2 жыл бұрын
コメントいただきありがとうございます😊♪ メディアクエリは下記のようにセレクタを指定する必要があるので、そこがうまくいっていないかも知れません！ @media screen and (min-width: 1200px) { .selector { width: auto; margin: 100px; padding: 50px 30px 50px; } } 確認してみてください🙇♂️❗️
9:20と9:23では違うことが書いてありますが、9:20の説明の上右下左の順でいいですよね？
@hirocode
3 жыл бұрын
ご指摘いただきありがとうございます🙇♂️❗️ ほんとですね、肝心な箇所間違えていますね😱💦 おっしゃる通り上右下左の順が正しいです🙇♂️🙇♂️🙇♂️
とても勉強になり、チャンネル登録させて頂きました。 7:30の所なんですが、なぜパディングなんでしょうか？自分も同じようにコーディングしてみたんですが、隙間ができません。マージンにすると同じようになるのですが‥教えて頂けると助かります。
@hirocode
Жыл бұрын
ありがとうございます🙇♂️❗️ padding: 10px;て指定してるところでしょうか？？なぜでしょう😵💦 コード載せていただくか、概要欄のファイル見ていただけたらわかるかもしれません❗️
@user-zv1et6ft9y
10 ай бұрын
私もなぜpaddingで隙間が開くのかが不思議です。 paddingによって内側の幅が広がることでボックスが大きくなり、flex:wrap;で改行されるのが通常の動作なのかと考えていたのですが…
@sskk8098
5 ай бұрын
動画のコードを拝見すると、タグの中にタグがあり(2重になっている)、を青いボックスにしているため、 につけたpadding:10pxがの周りにできているようですね。
お聞きしたいのですが、例として書いてる時のそのアプリ？サイト？はなんですか？ 練習用にそれを使ってなれたいので。
@hirocode
3 жыл бұрын
コメントありがとうございます😆❗️ coda2というコードエディタを使ってコードを書いて、GoogleChromeというブラウザに表示しています❗️ ご質問の内容このことであっていますかね🤔？ご質問の意図違っていたり他不明点あれば再度コメントください🙇♂️❗️
概要欄にファイルのリンクがないと思うのですが、リンク追加してほしいです💦
@hirocode
2 жыл бұрын
コメントいただきありがとうございます😊♪ 概要欄に動画内で使用したファイル追加したのでご確認ください🙇♂️❗️
[html] aaaa HP=108 こうげき=130 防御=95 とくこう=80 とくぼう=85 すばやさ=102 [css] .contena{ display: flex; } .a{ margin-right: -500px; } このプログラムでmargin-rightが反映されないのですがなにが原因か教えていただけませんか？
@hirocode
Жыл бұрын
コメントいただきありがとうございます😊♪ margin-rightに-500px（ネガティブマージン）を指定しているので、この場合ulタグが左に500px動くのが正しい動きになります❕
@user-sm2up8pe5b
Жыл бұрын
@@hirocode ありがとうございます