既存から修正する？一から作る？理想のHPを初心者が最速で作る手順はどっち？

サムネイル：Designed by Rawpixel.com

Web好きmafiです。
僕はテキストエディタにhtmlを入力するところから初めて、全くの初心者からホームページ作りの世界に一歩入りました。

HP作りは初めから順調に進んだわけではなく、何度も何度も立ち止まり、途中で投げ出しそうになったこともしばしば。

そんな時、いつも僕の心が迷っていたのは、

『ネットに公開されているHPをマネし修正して、理想に近づける』

かもしくは、

『一から勉強してゼロから作り上げるか』

という２つの方法。

効率を考えた最善の作成方法は、一体どっちでしょうか？

は、参考にしてください。

HP作成に、挫折は付きモノ

僕には、作りたいHPの形があった。
海外のアーティストのHPで気に入っていたものがあったので、全く同じにすることは内容も違うため難しいけど、真似た程度のHPを作りたいと思っていた。

[chat face=”sakana1.jpg” name=”mafi” align=”right” border=”gray” bg=”none”] HPなら何でもいい！わけではなかったのです [/chat]

でもそんなに簡単に、HPは作ることができないですよね。

そこでまずは、インターネット上に例として公開されているHPのコードを参考に、自分の理想の形に修正をしようと思いついたのです。

だけれども、

• そのインターネット上の例には自分の理想のHPには不要なパーツがあれば、不足しているパーツだってある。
• 情報を追加したくても、どこに、何の情報を加えたら、どのように表示されるのかさえもわからない。
• インターネット上にあるパーツの例を見つけて唐突に自分のサイトに加えても、どこか書き方が違うために反応しない。

問題山積みです。

[chat face=”sakana1.jpg” name=”mafi” align=”right” border=”gray” bg=”none”] こんなにつまずくのであれば、一からサイトを作る方が早いのではないだろうか？ [/chat]

そう考えて一からサイトを作り始めても、今度は「まず何から書いたらいいの？」とつまずいてしまう。

とにかく、始めたころは常につまずいてばかりでした。

オススメは、全体的構造が想像つく方を採用すべき

今、少しhtmlコードに慣れてきた時点でホームページ作りに欠かせないな思うことは、ホームページ作りは見えない空白まで構造化しないと作ることができないという点でした。

通常、僕たちは見える部分、色が付いた部分だけを見ている。

例えば、パソコンの文字だってそう。
白い背景に、18ピクセルの黒い文字が書かれている。

ホームページ作りにはここに、画面の横幅のサイズ、文字のサイズ、文字同士の間隔（余白）、背景の色、文字の色、文字の位置など、文字とその文字が乗っている器の情報を書かなけば成り立たない。

情報が抜けていると自然と構造が崩れてしまう、とても素直なシステムなんだよね。

つまずくのはコードの基本知識

まず初心者がつまずくは、とにかくコードの基本知識だと思う。
今だから言えることだけれど、これから始める人は、

1. htmlでできること
2. cssでできること
3. htmlとcssがつながっていること（関係性があること）

の３つは意識しておくといいと思う。

僕は、この３のつながりの面でとても苦労した。
例えば、自分が書いた「BOX」という文字に枠をつけたかったとする。

こんな感じで。

そしてネットで検索して見つけたcssをコピーして、自分が作っているサイトに貼り付けたとする。

.box1 {border: solid 8px #eb6877;}

でも自分のサイトでは全く反応しない、それはなぜか。

このcssは「.box1と書かれたクラスの枠線のCSS」だから、htmlのクラス

<div class="box1">
BOX1
</div>

.box1	{border: solid 8px #eb6877;}