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

[@sota-blog]

めちゃめちゃわかったです！！ 3回見ました！！ いつもありがとうございます！！！

[@webgodweb]

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

[@smami5740]

分かりやすい説明ですね！

[@webgodweb]

ご視聴ありがとうございます😊そう言って頂けると励みになります🍀

[@NyanNya.]

ヘッダー部分の模写を幾つかのサイトでしているのですが、要素がなかなか思うような配置にならず苦戦しておりました。 ものすごく分かりやすく解説して下さりありがとうございます！他動画にも大変お世話になっております。なつこさん、本当に神様です😭🙏✨

[@webgodweb]

コメントありがとうございます！！ お役に立てて嬉しい限りです🙇‍♀️🙇‍♀️

[@P君ちゃんねる]

4分4秒と4分22秒あたりにとあと、その後に1ケ所謎の音声が入っています。誰もこの音声に気がつかないんですか？聞こえるのは自分だけ？

[@つべよう-b2x]

聞こえます

[@つべよう-b2x]

編集でカットするの忘れたとかですかね

[@野田京介]

よく拝見しています。意外に高さの中央寄せが難しいことがわかりました。paddingで個別に調整をかけてもいいけど、後から編集していったときに面倒さもあるのでflexが一番簡単に感じました！

[@takeshiyoshimura4454]

後半10分以降で、音が途切れてる部分があります

[@webgodweb]

ご指摘ありがとうございます🙇‍♀️ 聞き苦しく大変失礼いたしました。

[@牛ばか]

ブロックレベルで 縦横を中央に配置するやり方知りたかったので すごく参考になりました！わかりやすかったです！ありがとうございます！

[@webgodweb]

お役に立てて嬉しいです！ どうやるんだっけ？となった時は是非また観にきてください🙏

[@週末テニス部村本プラス]

たとえば3層以上になっているboxがあって、それぞれすべteを親要素のセンターに配置するにはflexを使うしかないですか？ 何層にもなっている場合、positionで指定する方法を思いつきませんでした。

[@週末テニス部村本プラス]

一番外の親をrelativeにして、それぞれ内層するboxすべてにabsoluteを充てていけばいいのかな！？混乱中。

[@うめ吉-s2t]

丁度仕事でフレックスボックスで高さの異なるフレックスアイテムを中央揃えにに出来ず悩んでいた所だったのでとても参考になりました。。

[@webgodweb]

ご視聴ありがとうございます！お役に立てて嬉しい限りです✨

[@okinu4044]

ワンポイントの注意点などを説明してくれるので知識の整理となりました。 チャンネル登録しました！

[@webgodweb]

ありがとうございます！今後も要点のわかりやすい動画になるよう心がけますので、ご視聴いただけると嬉しいです✨

[@webgodweb]

今回は真ん中寄せ「縦向き編」です！「横向き編」はこちらから ↓ kzbin.info/www/bejne/rGW4k3ton9aVnck ※※※displayプロパティの理解が不十分な方は、先に下記の動画のご視聴をオススメします！※※※ ↓『プロパティ「display」10分攻略』はこちら ↓ kzbin.info/www/bejne/pmbJd3SNfc9jrJY ↓『CSSをはじめてみよう』前編はこちら ↓ kzbin.info/www/bejne/n3qnoZ6enLpmna8 ↓『CSSをはじめてみよう』後編はこちら ↓ kzbin.info/www/bejne/o3eqnpd-nLlqerM

[@TheMarimomarimo]

とても分かりやすい動画ありがとうございます。初めの方の動画から全て見させていただいて独学に活かしております。 頭では理解できるのですが、手を動かさないと理解が追い付かないので『テキストエディター』の画面もチラッとで構いませんので映していただけると、動画の一時停止をつかって説明の内容を手元で実践できるようになり助かります！！ これからも動画見させていただきます。本当に初心者にもわかりやすい解説ありがとうございます。

[@webgodweb]

ご視聴ありがとうございます！また、貴重なご意見感謝いたします。今後の動画では改善して参りますので、引き続きご視聴していただけると嬉しい限りです🙇‍♀️

[@山崎洋次郎]

質問です。margin:0 autoが真ん中揃えで、 margin: auto 0はなぜ効かないのでしょうか。ブロックは縦に余白がないからですか？margin: auto 0は使わないものとして認識していいのでしょうか

[@webgodweb]

marginプロパティで縦方向の「auto」が全く効かない訳ではありません。 「position: absolute;」が指定されているとき、親要素に「display: flex;」が指定されているときなど、「margin: auto;」を使って縦方向の真ん中寄せができる場合もあるのですが、状況に応じて使えないことがあります。 別の方の解説で恐縮ですが、下記リンクの通り、真ん中寄せの方法はたくさんあります！ ics.media/entry/17522/ その中でも特に使いやすい、記述がすっきりしているものを厳選して動画内で紹介しているので、今回紹介したもののみ覚えていただければ十分かと思います。 仰る通り「margin: auto 0;」を使う場合などは考えなくて良いと思います🙏

[@山崎洋次郎]

@@webgodweb 丁寧にありがとうございます。神様は対応も神対応なんですね。応援してます！

[@大好きこねこ]

メニュー要素の中身を揃えるCSSが 検証ツールで見れないのが 惜しいです。 模写コーディング Sample Companyのヘッダーに挑戦してますが 中々くせ者で img要素の設定が上手くいかず 行き詰まっているので 基本の復習をしたかったのですが… 苦しんでる間に 他の人が ISARA に進んでいる事に 焦ってます💦

[@webgodweb]

いつもご視聴ありがとうございます！貴重なご意見参考にさせていただきます🙇‍♀️ メニュー部分の中身の真ん中寄せは、「ul li」に対してline-heightプロパティとheightプロパティの両方に同じ数値を指定すれば、実現できます。 imgタグは確かに少し扱いづらいので、普通の要素に効くような指定が効かなかったりして混乱するかもしれません…。お困りの箇所を具体的に教えていただければ、お手伝いできるかと思います💦

[@okazakiryohei371]

トランスフォームで-50%を指定するとどこに-50%が聞くのですか？

[@webgodweb]

「transform: translate();」では、要素の表示位置を変更します！ 「transform: translateY(-50%);」であれば、その要素の高さの「50%」ぶんの長さだけ、Y軸（=縦方向の軸）のマイナス方向（=上方向）に要素の表示位置を変更する、といった意味の指定になります。 もし単純に「transform: translateY(-5px);」だったとしたら、要素が上方向に5px移動します。

[@yamato185]

ちゃんとお礼言いましたか？ 時間割いて教えてもらったんだから

[@ヤマトモモノキ]

いつも見てます。この動画でイメージ画像をいくつも縦並び、中央配置にするcssの書き方はどうしたら良いですか？ 何個かは中央配置になるのですが、その中の数個が左に寄ったままで動きません。 全てを縦並び、中央配置にしたいのです。アドバイス宜しくお願いします。

[@hidekiwatabe2823]

なつさん。いつもためになる動画配信ありがとうございます。希望なのですが、できれば動画の中で使用した上手くまとまった一覧をPDFで置いてほしいです。以前flexboxの時は修正があったので、pdfをダウンロードできるようにしてくれてたのが、非常に役にたってるので。