Labo 247: ホームをコンテナに分割する
Labo 247: ホームをコンテナに分割する
新しいページ、index.html を作成する
デザインを確認して、コンテナに分解する
ホームのページ（index.html）を作成するにあたり、どのようにコンテナに分割するかを考える
コンテナに分割できるところを探す
背景や幅が変わる部分は、ヘッダとフッタを除くと2箇所ある
1つ目はヒーロー画像が表示されている部分と、それより下の部分
分割したコンテナは、ヒーローコンテナ、メインコンテナとする
2つ目は NEWS 見出しの上
分割したコンテナは、ニュースコンテナとする
index.html のヘッダとフッタにはさまれた部分は、3つのコンテナに分割できる
このコンテナは PC 向け、モバイル向け共に写真が端から端まで広がっていて、上にあるヘッダコンテナとの間にスペースもない
下のメインコンテナの背景が写真のすぐしたから始まっているので、上下左右どの場所にもスペースは無い
幅も指定しないので、ヒーローコンテナにサイズやスペースを調整する CSS は不要、ということになる
メインコンテナ株に大きなスペースが空いている
このスペースをコンテナ下のパディングと考えることも出来る
コンテナに含まれるコンテンツのマージン（またはパディング）とコンテナのパディング、両方が適用されていると考えられる
メインコンテナに含まれる他のコンテンツを確認すると、一番上のキャッチフレーズの下と、カード型のボックスが並ぶ部分の下に、同じだけのスペース（マージン）が空いている
メインコンテナの一番下のコンテンツにも同じスペースを付けておけば部品の共通化が出来る
CSS を編集しなくても順番の入れ換えが可能になる
メインコンテナ下部のスペースは、中に含まれるコンテンツ（モジュール）の下マージンと、コンテナ自体の下パディングにわける
薄いグレーの背景色が適用され、コンテンツ部分の幅が狭く、最大が 740px になっている
左右のパディングや左右中央揃えにするためのマージンの設定はメインコンテナと同じにする
index.html を作成し、各コンテナの HTML を追加する
ページのヘッダーや、ページ下部コンテナを含むフッター部分は共通
該当部分のソースコードをコピーする
CSS は引き続き style.css を使用する
3つのコンテナの幅、パディング、マージン、背景の設定をする
ヒーローコンテナは、幅やパディングなどを調整する必要が無く、背景も使わないがあとの節で追加する