ホームページ作ってみたいな～
でも何から手を付けていいか分からないや笑
そうですよね。
僕もWeb制作の勉強を始める前は、ホームページの作り方なんてチンプンカンプンでした。
結論から言うと、ホームページを作る方法はざっくり２つです。
ひとつは、プログラミング言語を使わず(ノーコード)簡単にホームページを作成する方法。
もうひとつは、自分でプログラミングのコードを書いてホームページを作成する方法。
ひとつめの、ノーコードでホームーページを作る方法については、別記事で紹介しているのでぜひ一度読んでみてください。
ノーコードのメリット・デメリットなどについても触れています。
【超初心者向け】ホームページってどうやって作るの？- ノーコード編 –
一方で本記事では、コードを書いて(コーディングして)ホームーページを作る手順について紹介していきます。
【超初心者向け】ホームページってどうやって作るの？
– HTML / CSS編 –
そもそもコードとは
ノーコード編を読んでいただいた方には重複する内容ですが、「そもそもコードとは」という点についてまずはお話します。
テレビやネットでもこういう黒っぽい画面に暗号のような文字が並んでいる画面を見たことがあるのではないでしょうか。
基本的にホームページはこのような文字＝「プログラミング言語」を書くことによって作ることができます。
なるほど。
でもプログラミング言語って色んな種類があるよね？どれを使うの？？
まず必須の言語がHTMLとCSSです。
※正確にはこの２つはプログラミング言語ではなく、マークアップ言語と呼ばれています
この２つの特徴については後ほど解説します。
HTMLとCSSが使えればホームページを作ることが可能です。
そして、さらにホームページをかっこよくしたい場合や(動きを付けたり)、色んな機能を付け加えたい場合は、JavaScriptやPHPといったプログラミング言語も使う必要があります。
なるほど、ひとまずHTMLとCSSは必須なんだね！
ちなみに最近CMでもノーコードでホームーページ作成！というフレーズを聞きますが、ノーコードとは一言でいうとプログラムを書かないということです。
最近はこのようなコーディングをしなくてもホームーページを作ることのできるサービスが続々と増えてきています。
これなら初心者でも簡単かつスピーディーにホームーページを作ることができちゃいます。
じゃあ、もうコード書く必要なくない？笑
実はそういう訳でもなく、コードが書ければ自由に思い通りのデザインを実装できるため、必要に応じて使い分けることができればより良いですね。
必須のプログラミング言語「HTML」と「CSS」とは
先ほど必須と記載したHTMLとCSSについてもう少し深堀りしていきましょう。
HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略称です。
ハイパーテキスト！なんかかっこいいね。
HTMLが得意とすることは、文字を表示させることです。
たとえばWebページでこのブログのような文章があったとして、それは基本的にHTMLで書かれていることが多いです。
一方で、CSSとはCascading Style Sheets（カスケーディングスタイルシート）と呼ばれるものです。
CSSが得意としていることは、HTMLで作成した文字や要素を飾り付けすることです。
具体的には、
- 文字の色・大きさ・太さを変える
- 枠線を付ける
- 背景を付ける
- 文字や要素の配置を調整する、、、などなど
ホームページが見やすく整ったレイアウトになっているのは、CSSのおかげです。
なるほど、この２つの言語でホームページの見た目が決まってくるんだね。
ちなみに、ホームページの中には、下へスクロースすると文字やイラストがふわっと現れたり、トップの画像がスライドショーになっていたりするものがありますが、これらはJavaScriptという言語を使っています。
ご参考までに。
コードを使ってホームページを作る流れ
プログラミング言語については分かったけど、どうやったらホームページが作れるんだろう？
ホームページを作るための個々の詳細については、今後別記事で書いていきたいと思いますが、本記事ではホームーページを作る手順の全体像について解説していきます。
HTMLとCSSを勉強する
げっ！？勉強！！
これはどうしても必要です。笑
ノーコードだと慣れが早いのですぐにそれなりのレベル感のホームページが作れちゃいますが、コーディングするとなるとある程度の勉強は避けられません。
とはいっても、HTMLとCSSの他のプログラミング言語に比べてかなり学びやすいです。
他の言語のような、関数や条件分岐、変数などといった概念を使わなくてもよいので初心者でも安心して取組めます。
世の中にはオンライン教材なども豊富にあるので、あまり怖がらずに触れてみることをオススメします。
初心者のための勉強方法について（特に勉強開始０～２ヶ月あたり）、別の記事にて詳しく紹介しているので、ぜひ参考にしてみてください。
まずは基礎的な内容で十分なのでHTMLとCSSの基礎を学んでいきましょう。
ホームページのデザインを考える
HTMLとCSSの基礎がある程度理解できたら、作りたいホームページのデザインを考えましょう。
簡単なホームページであれば、正直なところ紙ベースに下書きしてみてもいいですし、本格的に下書きしたいという場合は、AdobeXDや、Figmaなどといったデザインツールを使ってみるものオススメです。
いざコーディングする時に、このデザインは難しいなという部分が出てくるかもしれませんが、それを解決できれば自己解決力がグッと身に付きますし、どうしても難しい部分はデザイン変更するのもありなので、あまり気にせず好きなデザインを描いてみましょう。
ド派手なサイトにするぞっっ！！
HTMLとCSSでホームページをコーディングしてみる
さていよいよコーディングです。
ついにここまできた。勉強頑張ったー！
ひとまず勉強お疲れ様でした！
さて、HTMLとCSSを書くにはエディタというものを使用します。
これはパソコンでコードを書くためのノートのようなものです。
勉強を始めた段階でだいたいどの教材にもエディタの使い方は書いてあり、勉強段階ですでに使っていると思うのでその辺は全く心配いりません。
有名なものにVSCodeなどといったものがあるので、ググってみてください。（無料です）
先ほど作っておいたデザイン案を見ながら、少しずつでいいのでエディタにコードを書いていきましょう。
自分の作ったデザインがPC上でだんだん目に見える形になっていくのは、すごく楽しい瞬間だと思います。
サーバーを契約する
なんとか全部コーディングできたよ！
でもこれを見てもらうにはインターネット上にアップロードしないといけないよね？
その通りです。
そのためにはサーバーの契約が必要です。
いろいろなサーバーがあるので迷うと思いますが、初心者に超オススメなのが「コノハウイング」です。
僕も使ってます。
よければ別記事に特徴などまとめているので、ご参考ください。
値段も安いうえに管理画面もかなり分かりやすくて、すぐに使い慣れます。
アップロード＆公開する
さてサーバーも契約したことですし、いよいよ公開です。
サーバーへのアップロード方法は各サーバーによって異なるので、契約したサーバーの手順に従ってもらう必要があります。
コノハウイングを例にあげると、めちゃくちゃアップロードは簡単で、アップロード専用のフォルダがあるので、そこに今回コーディングしたファイルを貼り付けるだけ。
ぜひその簡単さを味わってみてください笑
簡単すぎてビックリだね
(余力があれば) JavaScriptやPHPを学習する
最後に、つぎのステップとしてJavaScriptやPHPを勉強することをオススメします。
これらを学ぶことで、サイトに動きを付けたり、メールフォームやログイン機能など様々な機能を追加できるようになります。
Web制作が一気に楽しくなることでしょう！
一緒にWeb制作頑張ろう
関連記事
