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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

2 жыл бұрын

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

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

@webgodweb

Жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

2 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

2 жыл бұрын

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

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

@webgodweb

9 ай бұрын

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

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

@webgodweb

2 жыл бұрын

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

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

@webgodweb

Жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

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

@webgodweb

3 жыл бұрын

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

@naoeno3672

3 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

@aknr7704

3 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

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

@webgodweb

Жыл бұрын

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

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

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

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

@webgodweb

3 жыл бұрын

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

@user-fj7ig3uw1h

3 жыл бұрын

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

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

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

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

@webgodweb

2 жыл бұрын

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

@yuri-yg1ru

2 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

@odahara2557

3 жыл бұрын

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

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

@webgodweb

2 жыл бұрын

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

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

@webgodweb

3 жыл бұрын

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

@-mosaic7723

3 жыл бұрын

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

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

@webgodweb

10 ай бұрын

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

@Star-qp7rv

10 ай бұрын

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

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

@webgodweb

Жыл бұрын

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

@jack1999jp

Жыл бұрын

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

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

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

@webgodweb

3 жыл бұрын

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

@user-nb5bc5qz6y

3 жыл бұрын

ヘケ