【初級編】未経験からwebサイトを作れるようになるには？

はじめまして、はるです。

僕はweb制作を1年以上経験しているのですが、スクールなどには通わず独学でwebサイトを制作することができるようになりました。
そんな僕がどのように勉強を進めていったのか、書いていこうと思います。

今回は初級編ということで、簡単なwebサイトを作るまでの流れを紹介していますので、ぜひ参考にしてください。

順に説明していきます。

HTML,CSSを学ぶ

HTMLとCSSはweb制作に興味のある方は一度は耳にしたことがあるかもしれません。
これらはマークアップ言語と呼ばれるもので、webサイトを作るにあたって必須なものです。
プログラミング言語とは厳密には違うものなので注意しましょう。

まずHTMLは、Webページの「構造」を定義する言語です。

テキストや画像、リンク、フォームなど、Webページに表示されるすべての要素をこれで入力します。
タグというものを使って入力するのですが、例えば見出しを書きたいときは、以下のように『h1タグ』というものを使います。

<h1>ここが見出しのタイトルです。</h1>

このようにサイトに必要な情報を入れるのがHTMLの役割です。

次に、CSSは先ほどHTMLで入力したテキストや画像の見た目を整える役割をします。
これがないとただの文字と画像の羅列になってしまいます。

h1 {
  background-color: aquamarine;
}

このコードで、先ほど書いた見出しの背景色をアクアマリンに変更しています。

このようにHTMLで情報を加え、それをCSSで整えるという流れでwebサイトを作ります。

これらのマークアップ言語を学ぶのには、Progateかドットインストールをオススメしています。
このサイトはweb制作を始めたい人にはぴったりなサービスです。

HTML,CSSの超基本から解説されていて、演習も適度に行うことができます。
二つのサイトどちらもやる必要はないので、自分に合う方を選ぶのがいいと思います。

これらのサイトを利用して手軽に基本を学んじゃいましょう。

ここまで来たら、次は実際にサイトを作っていきましょう。
しかし、デザインから全く新しいサイトを作るのはとても大変です。
そこで模写コーディングをしていきましょう。

模写コーディングはその名の通り、既に存在するサイトを模写することです。
参考にするサイトはなんでも大丈夫です。
あまりにも複雑なデザインのものにすると、後々後悔するので気を付けましょう。

また、Codejumpというサイトもオススメしています。
ここには様々な架空サイトのデザインが載っており、それらを模写することで勉強できます。
ソースコードやコーディングのヒントなどもあるので初心者に超親切なサイトとなっています。
僕も始めたての頃はめちゃお世話になりました。

ここまでweb制作の初級編として書いてきましたが、結局楽しんでやれることが一番重要だと思います。
今はネットにたくさんの情報が転がってますので、様々なものを駆使して頑張っていただければと思います。

自分一人でサイトが作れるようになると、ものすごい達成感がありますのでそれを目指していきましょう！

このブログにはほかにもweb制作に関する記事を載せていますので、ぜひ参考にしてください。