こんにちは、あすみです。

1-1の作成手順に沿ってサイト作成していきましょう。

そちらの記事を見ていない人は、最初にそちらを見てくださいね。

html/cssだけ!簡単なサイトを作ってみた 1-1

株式会社ヒロックラボ blog

①デザインカンプの全体像を把握しよう。

②header/section/footerごとにブロック分けをし、形を想像しよう。

③header/section/footerの中身を1つ1つ作成してみよう。

今回は ①デザインカンプの全体像を把握しよう。について書いています。

まず想像してみてください。上記のサイトを作成して欲しい、、、

と言われた場合、どんな風に取り掛かりますか?最初からheader/section/footer作成しようとしていないですか?

間違ってはいないですが、どこの場所にどんなcssが使われているか、頭の中で形を組み立てていきましょう。

頭の中や紙に書いてもいいです。(わたしはずっと紙に書いて、色付けまでしていました笑)

そうすることで、何度もコードを書いて消してを繰り返さず、整ったコードを書けるようになるからです。

例えばですが、こんな感じです。

どんなcssを使ったらいいか想像できましたか?

これを頭の中で想像していきましょう!

次回はこれを深掘りしていきます。