【週刊ドットインストール】 考える力を養うための新クラス『データで学ぶアルゴリズム』を256timesでリリース!
お世話になっております。 初歩的な質問になってしまうかもしれませんが、表題の件についてお聞きします。
レッスン内でこのようなコードがありました。 CSS ファイルの 22 行目
header .container { width: 400px; margin: 0 auto; outline: 2px solid red; display: flex; }
現在、このレッスンの完成版を元に模写コーディングの練習を行なっているのですが、 header の container クラスに対して width の設定をしなかったところ、 margin:0 auto; が反映されず、左寄りのままでした。
header
container
width
margin:0 auto;
完成版のソースコードを見直し、 width:400px; を追加したら、 margin: 0 auto; も適応され、レッスン通り中央寄せにすることができたのですが、 この場合、margin: 0 auto; で中央寄せにするためになぜ width の設定が必要だったのかが理解できず、質問させていただきました。 (そうゆうものだと覚えた方が早いのかもしれませんが、特に width の設定をしなくても margin: 0 auto; が適用されていることもあったので疑問に思いました) ご回答よろしくお願い致します。
width:400px;
margin: 0 auto;
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
お世話になっております。
初歩的な質問になってしまうかもしれませんが、表題の件についてお聞きします。
レッスン内でこのようなコードがありました。
CSS ファイルの 22 行目
現在、このレッスンの完成版を元に模写コーディングの練習を行なっているのですが、
headerのcontainerクラスに対してwidthの設定をしなかったところ、margin:0 auto;が反映されず、左寄りのままでした。完成版のソースコードを見直し、
width:400px;を追加したら、margin: 0 auto;も適応され、レッスン通り中央寄せにすることができたのですが、この場合、
margin: 0 auto;で中央寄せにするためになぜwidthの設定が必要だったのかが理解できず、質問させていただきました。(そうゆうものだと覚えた方が早いのかもしれませんが、特に
widthの設定をしなくてもmargin: 0 auto;が適用されていることもあったので疑問に思いました)ご回答よろしくお願い致します。