htmlとcss

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

サムネイル:Designed by Rawpixel.com

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

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

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

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

かもしくは、

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

という2つの方法。

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

Webでホームページを作ろうとし始めたばかりの人

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

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

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

mafi
mafi
HPなら何でもいい!わけではなかったのです

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

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

だけれども、

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

問題山積みです。

mafi
mafi
こんなにつまずくのであれば、一からサイトを作る方が早いのではないだろうか?

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

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

ネットに公開されているHPをマネ

つまずく

一から作り始める

つまづく

・・・。

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

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

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

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

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

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

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

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

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

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

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

こんな感じで。

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

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

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

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

に、box1が入っているのが条件。

【index.html】

【style.css】

mafi
mafi
index.htmlもstyle.cssも「box1」という言葉でつながっている

もしBOXの部分に、div class="BOX1"「BOX1」と名前を付けていたら、style.cssの「box1」とアルファベットが違うから反応しない。

僕が伝えたいhtmlとcssのつながりというのは、このhtmlとcssの関係性のこと。

僕にはこのことが良くわからなくて、最初のころは無意識にタグをコピーして困っていた経験がある。

既存から修正も、一から作っても、結局基本知識は欠かせない

手っ取り早くホームページを作りたいという気持ちは十分にわかる。

でも自分でホームページを作っても、人に作ってもらっても、必ずエラーや修正はどこかで必要になるもの。

mafi
mafi
HPは作って終わりじゃない

だからこそ、コードの基本知識は欠かせない。

既存から入る方法も、一から作る方法も、とにかく自分がコードの関係性を想像しやすい方法を選ぶことをオススメします。
想像とは、立体的にイメージしやすいってこと。

そして余白をイメージすること。

まとめ:僕は『ネットに公開されているHPをマネし修正して、理想に近づける』方法を選択した

僕がホームページ作成を始めたころの知識レベルは、「メニュー」「パンくずリスト」「body」「php」などの専門用語も全くわからない程度でした。

検索レベルも低いからこそ、マネをしつつも一からサイト構造を学びつつ作成することに方向転換。
余白を意識し始めたころから、一気に理解が深まりました。

一見すると寄り道ですが、自分の理想を実際に見える形に作り上げる中で自分が困っている課題を解決しようという取り組みは、やぱり今のブログを運営する上でもとても重要な力になっていると思っています。