ホーム(記事一覧)へ

ホームページ制作の勉強方法

まさに「今からホームページを作ろう!」と思ったあなた!

「そもそもどうやって勉強して覚えていけばいいんだろう?」と思ったはずです。

 

私は地方でWebデザイナーを9年ほどやっているものです。

とはいえ最初からホームページを作れたわけではありません。

ホームページを作成できるようになるためにたくさん勉強しました。

そんな私の経験と一般論からホームページ制作の勉強方法をご紹介します。

ホームページ作成方法2種

ホームページ作成方法はざっと2つあります。

html、CSSを学んでソースから作り上げる

まさに今あなたがやろうとしていることです。

ホームページはhtmlとCSSからできています。あとphpやjavascriptもありますが、初心者は手を出さない方がいいです。

すべてのホームページは必ずhtmlとCSSを使っており、「ホームページを勉強する」=「htmlとCSSを勉強する」ということになります。

htmlとは

htmlとは「マークアップ言語」と言われ、その名の通り印をつけるためのような言語です。

右クリックから「ページのソースを表示」を選んでみてください。

アルファベットや日本語がたくさんでてきましたよね?

これがhtmlです。

 

「ソース」というのはコロッケなどの揚げ物にかけると非常においしくなるあの調味料のこと…ではありません!

htmlなどの言語の塊のことを「ソース」や「コード」と呼びます。

ホームページを勉強していて「ソース」というワードがでてきたら99.9%調味料のソースではありませんので気を付けましょう!

また、このソースやコードを作り上げる作業を「コーディング」やら「html構築」とやら呼びます。

さて、「ページのソースを表示」したら、うん千行ものソースが表示され心が折れかけたかと思います。

安心してください。実際はうん千行もhtmlを書かなくても数百行でホームページはできあがります。

html入門でも紹介していますが、最低限覚えるhtmlタグはなんと!たったの!9種類(程度)です。!

CSSとは

CSSは「スタイルシート」と呼び、長さや配置、色などデザインを指定するための言語です。

htmlのタグやセレクタに対して指定していきます。

CSSはhtmlに比べるとさすがに種類が多いですが、覚えるべきCSSはある程度絞れますので無理なく勉強していきましょう。

WordPressなどのCMSを利用する

「CMS」とはコンテンツマネジメントシステムの略で、コンテンツ(記事)をマネジメント(管理)するシステムの総称です。無料ブログもCMSの一種です。

そして最も有名で普及しているのが「WordPress」というCMSです。名前くらいは効いたことがあるのではないでしょうか。

ぶっちゃけた話すれば「WordPress」で更新できる状況が整っていればhtmlもCSSも勉強しなくていいです。

ただし、WordPressを使えるようにするのも知識が必要だし、オリジナルのデザインにしたければhtml、CSSの知識は必須になります。

ホームページを運営する以上htmlやCSSの知識を持っておいて損はないどころかいろんな表現ができるようになります。

あなたが本気なのであればhtmlもCSSもWordPressもしっかり勉強しましょう!

ホームページ制作の勉強方法

さて本題です。

まずは勉強方法手段編です。

方法1.ネット上の情報から勉強する

なんの分野でもそうですが、ネット上にいくらでも情報が載っています。

ましてホームページを作ろうとしているあなたはラッキーです。ネット上はホームページだらけ!むしろホームページしかないわけです。

参考案件だらけです。

「html入門」や「ホームページ作成入門」などで検索してみましょう。

初心者のあなたへ向けた情報がたくさんあります。

実際当サイトでも無料でhtml入門を掲載しています。

 

またさらにレベルアップしようとしたときや、各要素の詳細の仕様を確認するとき調査しやすいというメリットもあります。

本だと載っている情報しかありませんので、検索しようがありません。

方法2.本で学ぶ

なんの分野でもそうですが、勉強と言えば本であり、ホームページ制作の本も数多くあります。

ただし、私は本を買って勉強したことがありません。

なぜならネット上に本と同程度の情報がいくらでも転がっており、また、ホームページ制作の先輩が周りにいて、調べてもわからなければ聞くことができる環境にあったためです。

 

本は本で良い点があります。

ネットの情報はポツポツと点の情報であることが多いので、完成までたどりつけないかもしれません。

本の場合は一通りすべて勉強すればホームページ制作できるようになるでしょう。

方法3.詳しい人から学ぶ

なんの分野もそうですが、詳しい人に聞くのが近道です。

特にソ-スを書いていると、ネットや本に書いている通りにやっているのに同じ結果にならない!そんなことがあります。

そしてその理由を自分一人で見つけて直すのはかなり困難です。

1個壁にぶつかり解決できないと嫌になり、つまらなくなり、ホームページ制作をしなくなってしまうかもしれません。

 

私の話になりますが、今でこそホームページを作り続けて10年ほどたちますが、入社したてのころはhtmlなんぞ知らずホームページは1ミリも作れませんでした。

ホームページを作れる先輩からhtml、CSSを教えてもらいながらホームページの基礎・応用を勉強しました。

2~3ヵ月経った頃にはある程度ホームページを作れるようになったように覚えています。

  

下記に当てはまるかたはプログラミングスクールで学ぶのもありだと思います。

  1. ホームページ制作に詳しい人が周囲にいない
  2. 短期間でホームページ制作とWebデザイン制作を身に着けたい
  3. お金をかけてもいい

 

逆にのんびりなんとなくやっていこーというかたはWebで調べながら勉強していけばいいと思います。

勉強方法具体編

プログラミングスクールを受講する方はスクールの方針に沿ってやっていきましょう。

本を買った方は本で教えている順で勉強していきましょう。

そうでない方つまりWeb上で情報を探しながら自力で勉強するかた向けに具体的なオススメ勉強方法をお教えします。

方法1.html入門を学ぶ

「html入門」でググるとhtmlやCSSの基礎中の基礎を教えてくれるサイトがたくさんでてくると思います。

まずはここで基礎中の基礎を学びましょう。

ちなみに当サイトでもhtml入門用意しているのでご参考までに。

おそらくhtmlだけなら10時間くらいで理解できると思います。

CSSも含めると50時間くらいでしょうか。

この辺はさくっといきましょう。

方法2.既存サイトをまねて作成する

htmlとCSSをある程度理解したら次は既存サイトをまねて作ってみましょう。

javascriptの部分は難しいので、ないことにして進めていきましょう。

既存サイトのマネをオススメする理由

  • Webデザインの手間を省く
    コーディングの練習なのでデザイン作成は今いりません。
  • ソースを見れば答えが載っている
    どうしてもうまくいかないときはソースをみてコピーしてしまいましょう。ちょっと改変してみてもとのサイトを良くしちゃうというのもいい勉強方法かもしれません。

マネしやすいサイト

最初はできるだけ単純なサイトをマネすることをオススメします。ちょっとダサ…否!古き良きデザインでかつスクロールが少ないサイトだとコードが少なくてマネしやすいかと思います。

画像は右クリックからダウンロードできます。
もちろん著作権がありますから、一般公開するサイトには使えません。
あくまで個人の練習としてだけ使いましょう。

ソースを見てみて千行を超えているなら回れ右して別のサイトを探しましょう。特にWordPressのサイトの場合どうしてもソースが複雑になる場合が多いです。

狙うべきはWordPress(php)を使っていない、htmlだけで作成しているサイトです。

htmlサイトの見分け方

トップページ以外のサイトをいくつか見てみましょう。

そのURLを見てください。一番最後が「.html」であればhtmlだけで作っているサイトです。

作成時間の目安

サイトトップページ1つあたり8時間で作れればなかなか早いほうだと思います。初心者なら20時間を目安に作ってみましょう。

可能であればレスポンス対応(スマホ対応)もしてみましょう。

完成したらレベルアップ

単純なサイトができたらもう少し複雑なサイト、最近のデザインのサイトに移行しながらいくつか作ってみましょう。

慣れてきたらソース(答え)を見ないで作ってみましょう。
これならWordPressのサイトだろうと気にせずマネすることができます。

方法3.自分でデザインして作る

いよいよ本番です。

自分でホームページのデザインをし、それを作成していきましょう。

ホームページデザイン作成のコツも掲載しています。

 

デザインの作成に20時間、Webコーディングに同じく20時間を目安に作ってみましょう。

 

これができればもうWebデザイナーを名乗っていいでしょう。

まとめ

ホームページ作成方法はざっと2種

  1. html、CSSで作る
  2. WordPressを利用する

ホームページ制作の勉強方法

  1. ネット上の情報から勉強する
  2. 本で学ぶ
  3. 詳しい人から学ぶ

勉強方法具体編

  1. html入門を学ぶ
  2. 既存サイトをまねて作成する
  3. 自分でデザインして作る

 

上記の方法を参考にホームページ作れるように勉強していきましょう。

以上、ホームページ制作の勉強方法のご紹介でした。

関連記事