ゼロから Web ページを組み立てる

複雑なデザインのページの HTML をゼロから核には、デザインを細かいグループに分けて、小さなパーツを作る

そうすると HTML や CSS が書きやすくなると同時に、サイト公開後もメンテナンスがし易いソースコードとなる

デザインを小さなパーツの集合と考える

ページ全体を細かく分けて、HTMLがすんなり書けるくらいまで、小さなパーツとして作る

デザインを大きく分割して、ページ（コンテンツ）全体をいくつかのグループに分ける

グループのことをコンテナと呼ぶ

コンテナにすることで、HTML や CSS を書くための砲身を立てやすくする

コンテナ数はデザインによって異なる

サンプルデザインとして、5つのコンテナに分ける

横幅が変わるところで分割する

背景の塗りつぶし方法が変わるところで分割する

コンテナは原則としてページの上から縦に順に下に並ぶ形になる

コンテナが橫に並んだり、重なったりすることはない

コンテナに含まれる中身を、情報の内容やレイアウトに合わせてさらに分割して、パーツを作る

パーツのことをモジュールと呼ぶ

コンテナに含まれるコンテンツをモジュールに分割する際には、どこが情報のまとまりかを把握する

HTML、CSS のコーディングをどのようにするかを検討する

デザインをモジュール単位まで分割したら、HTML コーディングを行う

コーディングは、コンテナ単位、モジュール単位で行っていく

コンテナの HTML ができたら、その中にモジュールの HtML を追加する作業を繰り返す

CSS は、HTML と同時にコーディングする場合と、HTML が管制してからコーディングする場合がある

テキストでは、結果のわかりやすさを重視して、HTML と CSS とを同時に書いていく

各部品をモジュール化し、お互いに出来るだけ独立させておくことで、Web サイト完成後の管理が容易になる

共通して使える部品を作る事で、HTML や CSS のコードが使い回せる

Web サイトのリニューアル時に、モジュール化され部品が独立していると、部分的な変更に対応し易くなる

Web サイトのデザインは、デザイン画像を作成して、そのデータを元に HTML/CSS コーダーを行うという流れになる

デザイン画像の作成は、Adobe XD や Sketch などのアプリケーション、もしくは Figma という Web サービスを使うことが多い

以前は、Photoshop や Illustrator が使われていた

Adobe XD、Sketch などは、Web サイトやアプリケーションの画面デザイン構築に特化している

Web ページのデザインが素早く作成できるだけでなく、コーディングにも便利な機能が用意されている