デザイン – MainContainer

2022-06-20Hack Util Apps 開発記録

ヘッダ、フッタと、ページの上と下ができました。ですが、何かが足りません。そうです。メインコンテンツがまだありません。

ということで、今回はメインコンテンツを囲むラッパ、 MainContainer について話します。

初回から：

MainContainer

もうここまでこれば MainContainer も……なんてことはなくて、これは自作コンポーネントではないんです。

これは Layout コンポーネント中の一つの div タグで、そのクラス名に mainContainer がついてるだけです。

しかも内容は <main className={styles.main}>{children}</main> だけ¹という、わざわざ記事にして説明する必要があるのかどうか疑うようなものです。

ですが、やっぱりメインなのに説明しないのはだめだろうと思ったので今回この記事をかきました。 CSS についても少し触れるので許してください（）

前述の通り、これは Layout コンポーネントの中に入ってる div タグです。

この div タグは padding のためにあります。この padding は、左右の padding だけでなく、上部の padding も行います。

なぜなら Header コンポーネントがひっつきタイプで、その文の高さを開けておく必要があるからです。

また、なかに main タグがあります。これはメインコンテンツに一番近いラッパーです。こちらは上下の padding を行います。つまり、外側の MainContainer の padding に追加で padding しているわけです。

これはなぜなのかというと、外側のはヘッダとかぶらないようにするためなのに対し、内側のは見やすくするために端から遠ざけるためという役割の違いがあるからです。

次回予告

はい、以上で今回の記事は終了です。短すぎると私も思います。

次回は Sidebar について話します。これはちゃんと長くなるので期待してください（笑）

1. あとになると、ダークモードボタンが途中参加します。