野良猫の隠れ家

ガジェット系や私の興味のあることを記事にしていくブログです!

【HTML初心者】やらなきゃわからない!初心者がウェブサイトを作ってみた。

f:id:stlaycat2:20180321214615p:plain

どうもstlaycatです。

 

以前からhtml(というかwebデザイン)を勉強したいと思っていましてチョコチョコ勉強していました。実をいうとこのブログも勉強の一つだったりします。

 

最初は参考書買って、見よう見まねで作って終わりでした。しかしそれで終わりだと、自身の身につかないことに気づく。

 

多分初心者の方が勉強しよう!ってなると

→参考書を買う!

→それっぽい学校に行く!

勉強サイトで勉強する!

 

ぐらいがぱっと思いつきますが、大体が基本のことを教えて終わりです。そこからどうすればいいのかはあんまり教えてくれません。

 

今回は下手でもいいからきちんと「公開すること」ウェブサイトを作る「目的」を念頭に置いて作成しました。

 

 

 

初めに!

今回作ったウェブサイトですが、めちゃくちゃ下手に仕上がっています。もう公開したくないぐらい(笑)。一応公開しますが参考にはなりません。

 

サンプルページ

 

ソースはchromeで右クリックすると「ソースを表示」があるのでそれをクリックすれば見れますのでここでわざわざ公開はしません。cssは右クリックで「検証」をクリックすれば見れます。

 

今回はいくつかウェブサイトを作成するにあたっていくつかの要点に分けて書いていこうと思います。同じ初心者の方の参考になればよいと思っています。

 

 

3つの要点

  • 目的
  • 作って初めて気づいたこと
  • 公開すること

これを念頭に置いて作っていきました。

 

 

まずは目的!

目的といってもが「ウェブサイトを作ること」が目的となってはいけません「何を目的でウェブサイトを作る」が大事です。

 

例えば...

ある商品の認知度を上げたい→プロモーションサイト

(例:カップヌードルのサイトなど)

 

ブランドイメージを上げる→ブランディングサイト

(例:ブルガリのサイトなど)

 

商品を販売する→ECサイト

(例:Amazonのサイトなど)

 

店舗に足を運んでもらいたい→店舗サイト

(例:料亭きりんのサイトなど)

 

会社の情報を伝えたい→コーポレートサイト

(例:松竹芸能のサイトなど)

 

 今回は「写真を投稿する写真家」をイメージしました。なので今回は店舗サイトとコーポレートサイトに似た感じになったでしょうか。

 

 

作って初めて気づいたこと

f:id:stlaycat2:20180323012202p:plain

作って初めて気づいたことは3つあります。

 

1.本の通りに書いても身につかない!

 

前述しましたが、よく私がやっていたのは参考書を買って(または借りて)、本の通りにコードを書いたりしても結局身についてないことが多いです。これは自分の解釈ですけど本に書いてあることが右から左に流れているのだと思います。ただ受動的に書いても脳に残らないと思うのですよ。

 

解決策→大事なことはメモを取る、サイトを公開する

公開することでモチベも保てる、メモをすることで次に生かせる。

 

 

2.作って初めて気づく!

本の通りにやったらそりゃいい感じのページを作ることができますよ。けどやはり実際にゼロから自分で作るとうまくいかないし、全然きれいに作れません。私のように。うまくいったら多分才能あります。

けど、うまくいかないのはいいことでそれで色々調べたらきちんと頭に残ると思う。

 

反省点→お気づきかもしれませんが、私のサイトのトップページの横幅を変えるとボタンが変な感じになります。

加えて、他のサイズのモニターのことを考えていなかったです。MacbookAir(今回はこっちを使って作成した)で作るのとデスクトップパソコンでは全然印象が違いますね。スマホで見るとお察しって感じですね。

Macbookではいい感じにできたんだけどなー(言い訳)

 

 

3.最初はすべて自作で作るほうがいい!

 最近は(最近でもないけど)CSSのテンプレート(コピペだけでできるやつのこと)がネットを調べればたくさん出てきますが、それを使ってページを作るのは非常にまずいです。中身を理解していればよいですが、コピペするということはそれを理解していないことが多い。

 

できるだけ自分のできる範囲で作成してみましょう。

 

といっても実は私のサンプルのコンタクトページはほとんどコピペなんですが....実際にコピペで作ると全然理解できない。

 

次回はコンタクトページのラジオボタンやメールの書き込みまでのことをしっかりやっていこうと思っています。

 

 

 

 公開すること

f:id:stlaycat2:20180323135056j:plain

まあほとんど前述しましたが、公開することは次のモチベにつながるし、それっぽいものを1つ作ったという自信にもつながりますのでお勧めです。最近では無料のサーバもありますので簡単にウェブに載せることができます。

 

 

 まとめ

今回は3つの要点に絞っていますが、大事なことはたくさんありますね。

  • 目的
  • 作って初めて気づく
  • 公開すること

これはあくまで持論であります。

以前の私は特に「目的」というのをはき違えていたようです。きちんと何を目的なのかを定めてから勉強したほうが良いですね。そして作って初めて気づくことも多かったですね。

私に関しては特に技術が足りない、知識が足りないですね。まだまだたくさん勉強しなきゃいけませんね。

 

 

 

 

今日はこんなところで!

 

ではでは!