WEB制作する前に好きなページのHTMLとCSSを読んでみよう

初めてWebページを制作する場合や、月に何回かしかWeb制作をしない場合、自分の思うようなページにならなことがよくあります。これはHTMLやCSSを使いこなせていないことが原因の一つです。ではどのようにしてこれらの勉強をすると、効率よく思い通りのWebページを作ることができるのでしょうか。

お気に入りのページを３つ見つけよう

どんなにHTMLやCSSを思い通りに使いこなせていたとしても、最終的に自分が理想としている形がわからない場合には、満足の行くWebページを作ることができません。自分がよく訪れるページやかっこいいなと思ったWebページを３つ探して見てください。そして、見つけた３つのページ共通点を探してください。自分の好きなものは何か共通点があるはずです。

その共通点があなたがかっこいいと思ったり、使いやすいと思うページに必要な要素です。まずはこの要素を自分のWebページに再現することから始めて見ましょう。

共通するアイテムのHTMLとCSSを読み込む

次に先ほど発見した共通項の部分のHTMLやCSSをしっかり読んで見ましょう。最初からWebページ全てを読むとなると大変ですが、自分が気に入っている部分だけを読むのならそこまでの量にはならないはずです。

絵を描くときにもいきなりモナリザを描いてと言われてもなかなか描けませんが、モナリザの鼻を一時間見た後に鼻だけを書いてと言われたらそこそこ描けるはずです。

確かに全体を把握したり、全体のバランスを整えたりすることも大切ですが、最初のうちから全てをやろうとする必要はありません。あなたが気に入っているページであっても、全ての要素をあなたが必要としているわけではないので、全てを勉強すると無駄ができてしまいます。

読み終わった頃にはそれぞれのパラメーターが持っている意味がなんとなくわかってくると思います。次のステップでは実際に自分のページに導入して見ましょう。

自分のWebページに好きなアイテムを追加してみよう

先ほど読み込んだお気に入りのページに共通するアイテムを次は自分のWebページに導入して見ましょう。

自分で全てを描くとなるとなかなか難しいかもしれません。そういうときはコピーして使っても構いませんが、そのまま使うことはせずに、少しパラメーターを変更して見てください。そうすると、変数の意味がわかってくるはずです。

このように、Webページを丸々新しく作るよりも自分の好きなアイテムを取り入れていき、最終的にバランスを整えるという方法でWEBページを作っていきましょう。

漫画で例えると、今は模写の時間です。そのため、どんどん面白そうなページを見つけたらプログラムを見て、真似して見ましょう。