Webサイトの写経練習2日目

8月19日（月）の日記です。

この日は「川平湾」のWikipediaのページの写経を行ないました。このページを選んだ理由は、知り合いから「写経に慣れるのにちょうど良い内容」と聞いたからです。

さて、川平湾のページを写経して気付いた点を書きます。

1. ヘッダーエリアが無いようである。
2. どの様にブロック要素を決めるかで、右側の写真のレイアウトの調整のしやすさが大きく変わる。
3. 何でもかんでもpタグで済まそうとすると大変。
4. 場所によってはul・olタグやtableタグを有効活用すると簡単にレイアウトの調整が出来る。
5. 文字の色が真っ黒（#000000）ではない。

ですかね。

ブロックの区分けに関しては、全体像を見て「大まかにエリアを区切る」事で解決しました。最初は右側の写真の枠を1つ1つブロック分けしようと考えたのですが、Wikipediaの特徴を考えて、下記の完成形のブロック構成にしました。

勉強になったのは、やはり適材適所でul・olタグを使う事ですね。「list-style-type」を消したりする事で元のページと同様の作りをより簡単に行えるのが大きな長所です。あるページを作るにしても、色々なやり方がありますが、それが魅力でもあり悩まされる所でもあります...。

後は、ほんの微妙な色やmargin・padding、文字サイズの差に気付けるかも問われます。いざ完成して見直してみたら、「実は色が違った」という事に気付かされたもので。また、その僅かな配色でページの見易さも変わる事を知りました。見ていて疲れない色を考える、これもまたWebサイトを作るうえで重要ですね。

下記が完成させたページです。元のサイトの要素検証は一切行わずに作ってみました。ブロック構造は赤枠で囲ってあります。