Webサイトを作れるようになりたいけど、知識がない！業界未経験だからわからない！という方は、どうやって勉強していけばいいかわからない、という方が多いのではないでしょうか？
ネットで簡単に検索して知識が得られる分、初心者・未経験の方からすると、逆に情報量が多すぎる場合があります。
そこで今回は、
- 勉強したいけど、どこから手をつけていいかわからない
- 覚えることが多すぎてついていけない
- 今後サイトを作れるようになりたいけど、勉強方法がわからない
と、これからHTMLやCSSを勉強したいという方に向けて、てっとり早くサイトを作れるようになるためのステップをご紹介したいと思います！
今回ご紹介するステップは、HTMLやCSSの基礎をしっかりと学ぶという手法ではありません。とにかく早くサイトが作れるようになりたい！という方向けに、「実践ベース」でサイト作りを学ぶ方法です。
そのため、理論的にHTMLやCSSの勉強がしたい方や、資格や試験向けに勉強がしたい、という方にはちょっと向いていない方法になるので、注意してくださいね。
※さっさと制作のステップに進みたい！という方は、目次で「これからやることとゴール」まで飛んでしまってください！
この記事の目的と願い
サイト制作の需要は高まっており、また、IT技術者の不足なども問題視されています。インターネットが普及した今、サイト制作を学ぶ方法や機会はたくさんあるのにもかかわらず、です。
これは、ネットが普及したが故の、情報過多によるものではないかと思っています。
さらに、スクール等があったとしても、時間や費用面の問題もあり、なかなか通うのは難しいという人が多いのかなとも考えました。
そして、独学で勉強をしようと思っても、いろいろな情報がありすぎて、どれから学んでいいかわからず、諦めてしまうという人も多いのではないでしょうか。
そんな時に、ここから学ぶと良い、これをやるといい、という道のりのようなものがわかると、すごく助かるのではないかと思ったのです。
実際、私はスクールなどには通わず、すべて独学でHTMLやCSSを学んで来ました。
その結果、Web制作会社で働くことができましたし、今は自分でサイトを作成することも、それを仕事にすることもできています。
独学でも、仕事にできるまで技術を学び、成長することができるということ、そして、そのためにはどういうステップを踏むのが良いのか。
実際に経験した私の視点で、何か発信できればと思い、この記事を書くことにしました。
ここでは、HTMLやCSSの深い歴史は教えません。
HTMLの仕組みや用語などは、最低限しかお伝えしません。
でも、それでもサイトは作れますし、仕事にすることができます。こういった歴史や用語を学ぶことに躓いて、サイトを作る機会を逃してほしくないからです。
この記事をきっかけにして、「サイトを作って、こんなに楽しいんだ！」「出来上がったのが嬉しい！」という気持ちを知ってもらえたらなと思っています。
Webサイトが作れるようになるとどうなるのか
さて、サイト作成を始める前に、なぜあなたはサイトが作りたいか、という点を確認しておきましょう。
Webサイトを作成するのは理由がありますが、自社サイトなどを1つ作りたいという場合は、誰かに依頼すれば良い話です。
そうではなく、自分で作れるようになりたい、ということは、何か目的があるのだろうと思っています。その目的は何でしょうか？
この目的がある、ないでは意欲なども大きく変わると思うので、私が実際に経験して感じた、Webサイトを作れるようになったらどうなったか、というのをお伝えしてみようと思います。
ぜひ、自分がWebサイトを作れるようになりたい目的も、考えてみてくださいね。
副業や転職などに使える
1つは、仕事面でのメリットです。サイト制作を行っている会社は多いですし、すでにサイトを作れるという即戦力であれば、転職などでも有利です。
もちろん、もっといろいろな技術を学ぶ必要はありますが、独学でサイトが作れるようになったという事実だけでも、会社は評価してくれます。
この人は、ここでいろいろ教えたらもっと育ってくれるかもしれない、と思ってもらえるのです。
ポートフォリオなども作れますしね！
また、転職ではなくとも、副業として自分で仕事を取ることも可能です。仕事の休みの間にサイトを作って、副業の収入を得る、ということもできます。
他の言語を学ぶ時に役立つ
HTMLやCSSを使っていると、「コードを書く(HTMLなどを使ってサイトを構築していく)」という事に慣れることができます。
最初は難しく感じると思いますが、慣れてしまうと「こんなものか」という感じになって、他のプログラミング言語を見た時のハードルが下がったりするんです。
最初は難しい内容が並んでいるだけに見えても、HTMLなどに慣れておくだけで「もしかしてここに書いてあるのがこれなのかな？」というのが、なんとなく受け入れやすくなります。
また、HTMLとCSSは、Webサイトを作る上での基本的な事項です。
もっと複雑なシステムだったとしても、機能がたくさんあるサイトだったとしても、Webサイトである以上は、必ずHTMLとCSSが使われています。
そのため、他の技術を学びたいと思っている人でも、HTMLやCSSをある程度知っているだけで、作業などが格段にしやすくなります。
プログラミング言語に慣れる、他の技術や言語を使いやすくするために学ぶための最初のステップとしても、とても良いと思います。
ちょっと難しいお話＆正確なお話をすると、HTMLはプログラミング言語ではなく、マークアップ言語、CSSはスタイルシート言語というものに分類されます。
が、ここではあまり関係ないので、気にせず進めてしまいましょう！
楽しい
私がHTMLやCSSを学んだ最大の理由がこれなのですが、自分でサイトを作れると、やはり楽しいですよね。
普段何気なく見ていたものや、すごいと思っていたことが自分でできるようになると、嬉しいものですし、楽しくなってくるものです。
しかし、この楽しいという気持ちこそが、勉強をしていく中でいちばん大事な気持ちなんじゃないかと思っています。
もし、好きだから学びたい、楽しそうだから学びたいと思っている人は、ぜひその気持を大事にしてくださいね。
きっとその気持ちが、いずれ何かにつながるはずです！
これからやることとゴール
今回、実際にHTMLとCSSでサイトを作るまでを、複数回に分けて書いていきたいと思います。
すべてを読み終えたら、サイトが1つ完成しているはずです。
この記事すべて読んだら仕事が取れる！というわけではありませんが、HTMLとCSSをどうやって学んだら良いか、わかるようになると思います。
ぜひ、この記事たちを、勉強の最初のスタート、きっかけとして利用して下さい！
これからやっていくこと
今回は、下記のサイトを作る過程で、HTMLやCSSについての基礎的な知識と、サイト制作をどう学んだらよいかという方法を書いていきたいと思います！
ということで、下記のようなサイトを実際に作成していこうと思います！※今回の記事用にデザインしたものなので、完全オリジナルとなっています。
こちら全記事となりますので、気になるところだけ読みたい、という方はこちらからどうぞ～！
| タイトル | 概要 |
|---|---|
| 未経験からHTML・CSSでサイトを作れるようになるまでのステップ | この記事たちの目的や、どんなことを学んでいくかの概要 ※現在見ているのはこの記事です。 |
| Webサイトを作るために必要なこと・Webサイト制作の流れ | Webサイトができあがるまでの流れを解説。サイトを作るための必要なものの紹介。 |
| Webサイト制作で使うHTMLとCSSとは？基礎と最初の学習ステップ | Webサイトを作るために知らなければならない基本的な知識。おすすめの学習方法なども解説。 |
| HTMLでサイトをコーディングしてみよう！HTMLの学び方とコツ | HTMLを実際に使ってみる。学習方法や、勉強のコツなども紹介。 |
| CSSでサイトをデザインしてみよう！CSSの学び方とコツ | CSSを実際に使ってみる。学習方法や、勉強のコツなども紹介。 |
| Webサイトのディレクトリ構造とは？複数ページのWebサイトを作る方法 | 1ページだけでなく、複数のページのサイトを作る方法の解説。 |
| FTPってなに？Webサイトをインターネット上に公開する方法 | 作ったサイトをインターネット上で公開する方法を紹介。 |
| Webサイトで使えるJavaScriptやPHPって？もっと便利なサイトを作る方法 | 応用編。HTMLやCSS以外にもある、Webサイト制作で使われる技術の紹介。 |
| 未経験からHTML・CSSでサイトを作れるようになるために大切なこと | 前記事のまとめ。HTML・CSSを学ぶ時に大切にしてほしいこと。 |
この記事を見るときにやってほしいこと
次回の記事から実際に準備をしたり、学習を開始しましょう！
その前に、この記事を見ていく上で、ぜひやってほしいなと思うことをお伝えできればと思います。
それは、「コピペでいいので、実践してみてほしい」ということです。
私は、独学でHTMLやCSSを学ぶ時、1番身についたと感じるのは、実際にサイトを作っているときでした。
もちろん知識として知ることも大事なのですが、それを実際に使ってみて、ようやく身につくものだと感じています。
最初は全くわからないまま、書いてあるものをそのままコピペしてもらって問題ありません。それでも、実際に自分の手で再現したということが大事です。
私も、わからないことや知らないことは、調べたものをそのままコピペしていたりします。でも、そのまますべて使えるわけではないので、書き換えてみたり、追加してみたり……こういう作業をする中で、自然と覚えていくものです。
それに、Webサイトを作るときは、カンニング禁止のテストではありません！忘れたらまた探して、コピーして使えば、それでいいのです。
(もちろん、そういったコピペが禁止の場合もあるので注意はしてくださいね！)
わからないからやらない、となってしまうよりは、ずっと良いと思うのです。
この記事でも、必要なHTMLやCSSは可能な限り書いていきます。どんどんコピーして使って下さい。
※まとめ記事では、今回私が作成したサイトのファイルをすべて公開するので、参考にしたいという方はそちらも見てみて下さい！
それでは、最後までお付き合いいただける方は、どうぞよろしくお願いいたします！！
次回は、実践の前に知っておきたいWebサイト制作の流れと、ツールなどの準備を行います！
