コンテナに分割する

デザインの分割を行って、コンテナを作成する

デザインファイルを確認する

記事ページを作成するためにデザインを確認する

デザイン画像に線を引くことで、視覚的に分割する

定型的な分割イメージが持てるようになれば、線を引く作業は不要

例としてシングルカラムレイアウトでページ（コンテンツ）を作成する

ページの中心的なコンテンツを表示する部分が 1カラム（1列）になっているレイアウト

ポイントになるのは CSS を書きやすいように、ページを小さなグループに分ける

背景色、背景画面、ボーダーラインに着目する

ヘッダ部分は複雑で、判断が難しいところがあるので後回しにし、コンテンツの主要部分を先に分割しメインコンテナを決める

コンテナに分割するときは、PC 向けのデザインとモバイル向けのデザインの両方を意識して、同じ場所で分割する

背景はコンテンツの要素に CSS を設定すれば良いので、コンテナに分割するときは無視して良い

メインコンテナより下の部分を分割する

2つに分割したコンテナのうち、上をページ下部コンテナ、下をフッターコンテナとする

ページ上部は様々な情報が集中していて、レイアウトも複雑になっているので、狭い範囲を細かく分割することになる

PC の表示とモバイルの表示の違いを考えながらコンテナへの分割を考える

パンくずリストはモバイルでは表示されない

ページ上部のコンテナは、上をヘッダコンテナ、下をパンくずリストコンテナとする

PC とモバイルでナビゲーション表示が異なる仕様となる

CSS でコントロールできるので、ナビゲーションはコンテナとして分割しない