独学!Webサイト構築日誌

学習手順&構築ルート

ほぼゼロの知識から、1つ目のサイトを27日で完成させ、2つ目のサイトは7日間で完成させました。
振り返ってみて最適だと思う学習順序/構築ルートを考えてみた。


言語類

  1. html
  2. Webサイトの基礎。これが無いと始まらない。
  3. css
  4. Webサイトの装飾。これが無いと殺風景。
  5. JavaScript
  6. Webサイト上の動き。動きを持たせたいならコレ。
  7. php
  8. Webサイトとサーバーの橋渡し。裏方。
    入力フォームなどのサーバーとやり取りが発生するもの、ヘッダーなどの定型箇所をまとめて操作できるのもコイツ。
  9. SQL(MySQL)
  10. Webサイトのデータベース。無くてもゴリ押しで行けそうだけど、あると便利。

1. htmlのみ

文章だけのテキストサイトだとしても殺風景過ぎる。
99.99%の人が物足りなさを感じるはず。


2. html + css

テキストサイトや、簡易なHPなら問題無い。
機能的、見ため的にも必要最低限のものは揃っている。連絡が欲しいならメールアドレスも公開しちゃいなさい。
WordPressベースで運用するなら、ココまでの知識があると外側を弄れる。


3. html + css + JavaScript

もう少し動きのあるサイト構築をしたい方向け。
表面的な動きはココまでの知識ですべて実装できる。
ただ、JavaScriptはHP上での動きに限定されるので、ココまでしかやらないなら、JavaScriptは勉強しないという手もある。
cssだけでも多少動きを付けることは出来るので、個人的には十分だと考える。


4. html + css + JavaScript + php

最近の一般的なHPを求めているなら最低限欲しい知識。
ココまで知識を付ければ大抵のことは実装出来る。
WordPressベースで運用するなら、ココまでの知識があると中身を弄れる。


5. html + css + JavaScript + php + SQL

無双モード。
Webサイト構築の知識の幅を広げるより、深堀していく段階。
WordPressベースで運用するなら、ココまでの知識があるともう少し中身を弄れるが別途WordPress内のルールを知る必要がある。




構築ルート

  1. 5W1HPSを考える。
  2. PC画面&スマホ画面の完成デザインを考える。
  3. 2.の片方(例:PC)を html + css で構築する。
  4. もう片方(例:スマホ)のcssを追加する。
  5. JavaScriptを追加する。
  6. phpを追加する。
  7. (SQLを追加する。)

1. 5W1HPSを考える。


2. PC画面&スマホ画面の完成デザインを考える。

細かい方が良いけども、例えば
・サイドバーを付けるか。付けるなら左右どちらか。
・メニュー(カテゴリー)は何個で、どこに配置するか。
程度のザックリしたものでも構わない。
全く考えなしにやってしまうと、私のように手直しの必要性が増える。
また、作成途中で気になる案が出てくるが、どこかにメモしておいて一旦最後まで作り上げた方が、全体的なバランスを確認できるので良いと思う。


3. 片方(例:PC)を html + css で構築する。

個人的にオススメなのが、トップページだけをまず完璧に仕上げること。

リンク先、別ページは完全に無視で、ベースとなる部分だけ作っておけば、コンテンツを追加するのは容易い。


4. もう片方(例:スマホ)のcssを追加する。

一旦片方が出来れば、もう片方を調整するのは容易い。
追加するにあたって、htmlの改行位置やclassなどを変更した方が調整し易いので、cssだけでどうにかしようとせず適宜htmlも変更する。
注意点として、頭がこんがらがったりするので、JavaScriptなどは触らないこと。


【説明】htmlとcssをこれから学ぶ方には良い。図、プログラム、説明文、余白とどれも整っており見やすい・分かり易い。「モバイルファースト」「レスポンシブWebデザイン」など最近の知識や情報も盛り込まれており良い。ただ、デザイン例などを求めて買ってしまうと、あまり参考にならない。
【説明】1日で全部やろうと思ったら頭が割れますが、1週間なら可能。のんびりやっても1ヶ月でマスターできる。フルカラーで、中タイトルはオレンジ、変更部分は赤など、分かり易い色使いになっている。ありがちな、無駄なカラフルではない。目標とするHPも応用範囲が効くもので、プログラムも簡単なものを扱っているのが良い。書籍ということもあり、ネット情報のようにコピペが出来ないのが残念だが、非常に分かり易い。

5. JavaScriptを追加する。

JavaScriptは動きを与えるものの、html + css で土台を固めておけば大きな変化は無いように思う。


【説明】「たった1日で基本が身に付く! HTML&CSS超入門」と同様こちらも非常に分かり易い。ただ、JavaScriptとHTML/CSSではボリューム感がそもそも違うので、こちらは1週間以上かかるんじゃないかなと。ただ、文章や色使いは安定の見やすさなのでオススメ。残念な点としては、日記作成のページを、別のことに充てて欲しかったな、と。
【説明】htmlとcssにも軽く触れ、難しめのJavaScriptも分かり易くまとめられています。複雑なことをやるには物足りませんが、導入本としては良いのではないでしょうか。
【説明】非常に丁寧で分かり易い。2014年と発行年が古いものの、初歩的な部分を抑えてくれるので、これで学んで後はネット検索で事足りそう。

6. phpを追加する。

phpに関しても、更新作業を楽にするためだったり、データベースとやり取りするようなものがメインだと思うので、デザイン的な変更は少ないと考える。


【説明】ちゃんとphpメインの本。htmlなどの記述は最小限で良い。 本文は緑と黒の2色だけの構成だが、図やプログラムは適切で、余白も十分に取ってあるので分かり易い。ただ、初心者がこれを1冊買って組めるようになるかと言われると難しい。テーマごとに分かり易くまとめてあるので、組み始めたあと「上手く行かんな」「これどういう意味かな」て時にザックリ把握するには最適。少なくとも私は、何日も考えた疑問が2つも解消された。原因が分からなかったので、これは大きい。

7. SQL を追加する。

小規模なWebサイトであれば、そもそも必要無いと思う。サイト内検索が無いといって凄い不便ということも少ないだろうし、phpで自動更新させたりしない限り不要。

【説明】オールカラーで見やすく、実際のプログラムも難しくないが、ちょいちょい説明が省略されているので、もう一歩知りたいとなると難しい。記載されている内容を実現するのは簡単だが、自分で何かしようと思って読んでも得られるものは少ない。が、MySQLの立ち上げには非常に役に立った。





最初の1週間ぐらいで html + css を確実に理解すれば、思ったほど苦労せずに学べるんじゃないかな。
恐らく仕事しながらでも、休日や空き時間を見つけて勉強すれば、3ヶ月程度で大まかな流れを掴めると思います。




一度ゼロから立ち上げてみれば分かりますが、やたら凝ったことをしない限り簡単です。

出来るだけ短期間で立ち上げ~完成までやることをオススメします。




作成日:2021/01/10 - 更新日:2021/02/07

HOME > 学習手順&構築ルート