【超入門】もうCSSの真ん中寄せで悩まない!横向き編【HTML・CSS コーディング】

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 พ.ย. 2024

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

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

    ※※※displayプロパティの理解が不十分な方は、先に下記の動画のご視聴をオススメします!※※※
    ↓『プロパティ「display」10分攻略』はこちら↓
    th-cam.com/video/p5fFAWHj0v4/w-d-xo.html
    <目次>
    ・オープニング 0:00
    ・今回の概要 0:42
    ・①テキスト・画像の中央揃え 1:15
    ・②インライン要素の場合 3:36
    ・②インライン要素の場合【番外編】 5:38
    ・③ブロックレベル要素の場合 6:21
    ・まとめ「真ん中寄せチェックシート」 8:07
    ・今回のまとめ 11:07
    ↓『CSSをはじめてみよう』前編はこちら↓
    th-cam.com/video/iIDpkhgU3gM/w-d-xo.html
    ↓『CSSをはじめてみよう』後編はこちら↓
    th-cam.com/video/mFGmdHgT7DQ/w-d-xo.html

  • @itaru5505
    @itaru5505 4 ปีที่แล้ว +4

    分かりやすすぎる。独学で勉強してるので助かります^^

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

      ご視聴ありがとうございます☘私も独学で学んだので、応援しています📣これからもご視聴よろしくお願いします✨

  • @onigiriponko2_88
    @onigiriponko2_88 หลายเดือนก่อน

    迷う理由がわかりました「親要素」に指定しないと駄目なんですね。
    インライン要素の場合【番外編】の横幅は200pxだと左寄せが有効なのか、右寄せが有効なのかわからなかったのであたふたしましたが、スクショを撮ってパワポで拡大したら、うまく行ってました。(1000pxくらい幅があっても良かったかもです💦)

  • @chu556027
    @chu556027 9 หลายเดือนก่อน

    ものすごく初歩的な質問なのですが…
    いつもimgタグは単体で使用してました。
    でも、pタグの中にimgタグをいれて表示させる方が使いやすいということでしょうか?
    おすすめはどちらですか?

  • @yuyuh03
    @yuyuh03 ปีที่แล้ว

    説明がとても分かりやすいです!ありがとうございます!

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

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

  • @Star-qp7rv
    @Star-qp7rv ปีที่แล้ว

    思ったのですがブロックを中央寄せにしたい場合、親(例えばbody、ページ全体)にposition relative 子要素にabsolute、たったこれだけで中央寄せできますか?

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

      ご質問の意図を汲めていなかったらすみません!
      positionプロパティで絶対配置する方法でしたら、下記動画で縦方向の真ん中寄せの際に使っております。
      th-cam.com/video/FjJMlqj2_Qo/w-d-xo.html
      上記の方法は、もちろん横向きの真ん中寄せにも流用できます🙆‍♀️

    • @Star-qp7rv
      @Star-qp7rv ปีที่แล้ว

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

  • @野田京介
    @野田京介 ปีที่แล้ว

    なかなか難しいですね。CSSは配置が難しくて少しいじるだけでも大変だということがわかってきました↓

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

      ご視聴ありがとうございます!参考書や教材で見ているだけではなかなか感覚がつかみにくいので、自分で好きなだけいじったりいろんなプロパティを使ってみたりするのが一番近道の学習だと思います🙇‍♀️

  • @escuela_de_gorriones7788
    @escuela_de_gorriones7788 ปีที่แล้ว

    最高に分かりやすい動画でした。今丁度、中央寄せで悩んでいる時でしたから助かりました。ありがとうございました😊

  • @やす-l7n
    @やす-l7n ปีที่แล้ว +1

    ホントに神様!
    わかりやすい動画ありがとうございます。

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

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

  • @jack1999-b9w
    @jack1999-b9w ปีที่แล้ว +1

    Pタグはブロック要素ではないのでしょうか?実際移動しているのでインラインなのでしょうけど、テキスト自体はインラインっていうことなのでしょうか。ということはどのようなブロック要素のタグで囲っても、すべて中身はインラインていうことですか?h1タグで囲まれた文章(テキスト)でも、その文章自体はインラインって考え方ですか?
    また、インライン要素のみに効くということですが、Pタグはブロック要素でimgはインライン要素ですが、imgの親要素に指定するpタグはブロック要素なので、(インライン要素を含んだ)ブロック要素に指定していることにはならないのでしょうか?
    ブロック要素は横幅いっぱいなので、その中の短いテキストや画像などはブロック要素の幅のなかで真ん中に移動しており(ブロック要素の中の見えない余白が存在している)、インライン要素はそれ自体の幅しか持たないので(表示領域の真ん中が無い状態)、その親要素のブロック要素の幅を指定してtextalign center を指定している ということなのでしょうか。
    ブロック要素の幅いっぱいに広がるようなテキストなどはそもそも真ん中に移動するということ自体がないので?

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

      まず、「インライン要素」であること自体がそもそも「テキストと同じような振る舞いをする」という意味合いなので、「テキストとインライン要素は、ほとんど同じ性質を持つ」とお考えください。
      >> ということはどのようなブロック要素のタグで囲っても、すべて中身はインラインていうことですか?
      →ブロックレベル要素で囲ったからといって、中身の要素がインライン要素に変わったり、中身の要素を全てインライン要素と呼ぶわけではありません。
      インラインかブロックレベルかというのは、要素ごとに決まっています。(もしくはdisplayプロパティで個別に指定します)
      あくまで、text-alignプロパティが作用するのが、「text-alignプロパティを指定した要素の 中身のインライン要素」だというふうにお考えください。
      ブロックレベル要素であるpタグに「text-align: center;」と指定した時、pタグそのものの位置は変化せず、「中身にだけ」作用します。
      pタグの中身に、インライン要素が含まれているなら、それらの要素の配置が真ん中寄せに変わります。テキストもインライン要素と同じようなものなので、例えば
      ああああいいううう
      こんな状態なら、pタグの中身に相当するのは「ああああいいううう」の部分で、これに「text-align: center;」が作用します。
      「ああああ」というテキストも、インライン要素であるspanタグの中身「いい」も、「ううう」というテキストも、全て同じような動き(真ん中寄せ)になります。
      text-alignプロパティは、テキストやインライン要素の配置を変えたい時に、「それらを覆っている要素」に指定するものです。

    • @jack1999-b9w
      @jack1999-b9w ปีที่แล้ว

      @@webgodweb ご丁寧にありがとうございます。自分の考えで合っているのが確認できました。

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

    Webサイト製作において、複数の画像の大きさが違う場合にどうすればうまく揃えることができるのかググってもうまくできないので、その辺を解説して頂けると嬉しいです‼️
    お願いできますでしょうか❓…

  • @rargo-acappella
    @rargo-acappella 2 ปีที่แล้ว

    わかりやすかったです!
    神様ありがとう!

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

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

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

    動画のエディターだとどこに対して変更を加えているかわかりづらいですね。あとからでも構わないので概要欄に完成後のhtmlフィルとcssファイルを公開していただければありがたいです。

  • @ヤマトモモノキ
    @ヤマトモモノキ 2 ปีที่แล้ว +1

    動画を拝見してます。ただ、説明が早く分かりにくいです。もう少し噛み砕いて説明してもらえるとありがたいです。

  • @昌之小林
    @昌之小林 2 ปีที่แล้ว +5

    「text-align:center」と「margin:0 auto」の使い分け、今までうまくできていなかったですが、今回の動画を拝見して、使い分けが明確にわかりました。いつも役に立つ動画をありがとうございます。

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

      ご視聴ありがとうございます!☺️
      こちらこそ、お役に立てて幸いです!

  • @マメマメ-d2f
    @マメマメ-d2f 2 ปีที่แล้ว +2

    まさしくよくわからなかったとこだ
    やっと理解できて、スッキリしました!
    本当にありがとうございます!

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

      お役に立ててよかったです☺️こちらこそご視聴ありがとうございます!

  • @昌之小林
    @昌之小林 3 ปีที่แล้ว +1

    いつも拝見させていただいております。ありがとうございます。今回の動画はちょうど困っていた時にピンポイントで拝見することができ、困っていることがすべて解決しました。これからもよろしくお願い申し上げます。

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

      ちょうどお役に立てて良かったです!!いつもありがとうございます☺️

  • @yuri-yg1ru
    @yuri-yg1ru 3 ปีที่แล้ว +2

    いつもわかりやすい動画をありがとうございます。こちらの動画で1つわからないところがあったので質問させていただきました。
    2:50〜のところで、テキストはブロック要素であるにも関わらず、text-align: center;で中央寄せになるのは何故でしょうか?

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

      コメントありがとうございます!
      pタグ自身はブロックレベル要素ですが、pタグの中身のテキストは、それ自体がインライン要素のような振る舞いになります。
      pタグにtext-align: center;を指定すると、中身のインライン要素に作用して真ん中寄せにすることができるので、つまりはテキストが真ん中寄せになりますが、ここではpタグ自身の配置は変わっていないことに注意してみてください。
      pタグ自身の横幅が画面いっぱいに広がっているからわかりづらいのですが、pタグにwidth: 50%;などと指定していただくと、pタグ自身が左に寄ってしまうのがわかると思います。それを真ん中に配置させるには、text-align: center;の役割ではないので、今度はmargin: 0 auto;という指定が必要になります!
      参考になれば幸いです🙇‍♀️

    • @yuri-yg1ru
      @yuri-yg1ru 3 ปีที่แล้ว +3

      text-align: center;を指定しようがしまいが行の端から端までがpタグのエリアであることに変わり無いけれど、中のテキストがpタグのエリア内のどこに配置されるのかが変わる、ということですね。
      よく分かりました。ありがとうございました。

  • @さくら桜-b7m
    @さくら桜-b7m 3 ปีที่แล้ว +1

    分かりやすいです!!
    完了しました!!

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

      お役に立ててよかったです!!
      おめでとうございます!✨

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

    初歩的な質問で恐れ入ります。pタグはブロック要素とのことですが、なぜ動画序盤はtext align centerが効くのでしょうか?💦
    margin 0autoでないのは何故ですか??

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

      ご質問ありがとうございます!
      pタグに「text-align: center;」を指定すると、中に含まれている画像やテキストは真ん中寄せになりますが、pタグ自体の配置が変わるわけではありません。
      「text-align: center;」は、指定した要素の"中身"のインライン要素を真ん中に変えるためのプロパティ指定なので、指定した要素自体の配置は変化しないのです。
      そのため、pタグ自体を真ん中に寄せたい、となった場合には「margin: 0 auto;」を指定する必要があります。
      お判りいただけるでしょうか🙇‍♀️

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

    これは役立つ。助かりすぎる。。

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

      コメントありがとうございます!✨
      お役に立てているようで嬉しい限りです…!

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

    動画ありがとうございます😊
    いつも参考にしてます。
    Width100%のヘッダーで横並びのリストを作成します。縮めると、2段3段とレイアウトが崩れてしまうのはどうすればいいのでしょうか?

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

      ご返信が遅れてしまいすみません💦
      ヘッダーの最小幅を指定して、これ以上は縮まらない、という状態にしておく仕様が一般的かと思います。
      例えば、「width: 100%; min-width: 1000px;」になっていれば、画面幅をどんなに縮めても1000pxより狭まることがなくなります。
      (画面幅が1000pxより小さい場合、画面の外にはみ出して行って、隠れて見えなくなる)
      あくまでPC表示の対処ではありますが、このような回答で大丈夫でしょうか?🤔

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

      @@webgodweb
      大変助かりました☺️
      メディアクエリなど、スマホ表示の対応についても現在修行中です!😄

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

    とても分かりやすい解説です。ありがとうございます😊

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

      ご視聴ありがとうございます😃励みになります🍀

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

    いまいち、曖昧で、どっちかで動けばいい!とやってました(笑) inline-block をheaderなどにかけることは、これから注意します。 囲んだpタグにmargin:0 auto;  いい勉強になりました。

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

      どっちかで動けばいい!は最初のうちはあるあるですね!私もそうでした笑 場合によって、どっちがより相応しいかどうか考えて、コードを書いていただければ良いと思います😊

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

    例えばタグでテキストを囲んでいる場合、テキスト側から見るとタグは親であり、
    タグにtext-align: center;をかけるとテキストインラインなのでは中央揃えになるという事でしょうか?
    そうするとテキストは必ず子であり、それを囲んでいるタグは必ず親になるという考え
    方で良いのでしょうか?

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

      コメントありがとうございます!
      そちらの考え方で、基本的に破綻はこないと思っています🙏
      このあたりは、「テキスト自身は、いかにもインライン要素のような振る舞いをする」程度の認識にとどめておくのがオススメです。

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

      @@webgodweb
      ご回答ありがとうございます。
      大変勉強になりました!

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

    めちゃくちゃ分かりやすかったです!動画作成感謝です!!

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

      コメントありがとうございます!
      お力になれて嬉しいです☺️

  • @TK-he8hp
    @TK-he8hp 3 ปีที่แล้ว +1

    とてもわかりやすい動画をありがとうございます。
    細かいことなのですが質問させてください。
    序盤で「テキストや画像などのインライン要素」と解説されている点、
    また中央寄せしたいインライン要素ではなくその親要素に指定する、との解説で一点、納得ができず暫く悩んでしまいました。
    最初の例でpタグの中のテキストという文字を中央揃えにした際は
    pタグにtext-align: center;を指定する事で、横幅が画面いっぱいになっているpタグの範囲の中で左に寄ってしまっている「テキスト」という文字を、中央に移動しているのだと思います。
    ということは解説の通り「テキスト」という文字自体が、「インライン要素」なのでしょうか?
    そしてそれを囲むpタグが「テキスト」という文字の「親要素」なのでしょうか?
    要素というのはあくまでHTMLタグである事が前提のように捉えていましたので不思議に思いました。

  • @服部半蔵-e1g
    @服部半蔵-e1g 3 ปีที่แล้ว

    箇条書きだけ中央揃いにならないんですけど

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

      ご質問ありがとうございます。お手数ですが、要素の調査と、実際の表示のスクリーンショット等、お教えいただけないでしょうか?

    • @服部半蔵-e1g
      @服部半蔵-e1g 3 ปีที่แล้ว

      ヘケ

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

    テキストそのものはインライン要素だったんですね。
    Pタグやh1タグなどで囲って使うことしかなかったので、ブロックレベル要素だと思い込んでましたσ(^_^;)

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

      初めは、各要素の初期値がブロックレベル要素なのか、インライン要素であるのか覚えるのが大変だと思いますが、そのうち自然と身につくのでご安心ください💡✨

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

      ありがとうございます😊
      少しずつ頑張って覚えます。

  • @たど子
    @たど子 4 ปีที่แล้ว

    ありがとうございます!完全に理解できました!今後もなつこさんの動画をみていきますね!

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

      ご視聴、嬉しいお言葉ありがとうございます😊これからも宜しくお願い致します🍀

  • @kana6760
    @kana6760 4 ปีที่แล้ว +2

    模写コーディングでここに躓いていたのでほんとに勉強になりました ありがとうございます!

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

      お役に立てて嬉しいです!コメントありがとうございます☺️

  • @okazakiryohei371
    @okazakiryohei371 4 ปีที่แล้ว +9

    margin 0 autoってその要素にwidthを指定しないと効かないんでしたっけ?

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

      ご視聴ありがとうございます🍀
      はい、左様でございます😊このセンタリング方法は、ブロックレベル要素の場合に有効なので、withを指定しなければ、BOXが親要素の横幅いっぱいに広がるような動きとなり、センタリングされません💡

  • @naoeno3672
    @naoeno3672 4 ปีที่แล้ว +2

    「【超入門】初心者必見!模写コーディングをやってみた 実践編」でnavメニュー中央化の部分が判りづらかったので視聴しました。疑問が氷解!中央化は自信がつきました!!

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

      ご視聴ありがとうございます!
      解決したようで良かったです✨今後は是非とも自信持って使いこなしてみてください!

    • @naoeno3672
      @naoeno3672 4 ปีที่แล้ว +1

      ​@@webgodweb  引き続き活用させて頂きます。編集大変でしょうが、頑張って下さい。応援してます!😊

  • @小黒祐花
    @小黒祐花 4 ปีที่แล้ว +3

    とても分かりやすく、完全に理解できました。ありがとうございます!(*^^*)
    お忙しい中大変恐縮ですが、position relative・absoluteも理解しづらい為、今後動画解説して頂けたら嬉しいです…!

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

      ご視聴ありがとうございます。positionについてのリクエストありがとうございます😊もう少し詳しく別の動画で解説するようにしますので、これからもよろしくお願いします☘

    • @小黒祐花
      @小黒祐花 4 ปีที่แล้ว +1

      Webの神様 ありがとうございます!とても嬉しいです😊 たのしみにしています✨