ホームページを自分で作れるようになるには、様々な専門スキルが必要になります。スキルを身につけるとWebデザイナーやWeb開発の仕事で活躍できますよ。
このページでは静的なサイトと動的なサイトに分けて説明します。
静的なサイトというのは、サーバーにリクエスト（問い合わせ）があった時に、サーバーに入れてあるファイルがクライアントにダウンロードされブラウザーに表示されます。
一方、動的なサイトとはリクエストがあった場合に、サーバーでサイトのデータを組み合わせてクライアントに送信されるサイトのことです。リクエストの条件を判別してみせるものを変える仕組みを持ったサイトのことをいいます。
サーバーにリクエスト（問い合わせ）をするというのは、簡単な一例として、ブラウザーでホームページのリンクをクリックするホーとムページが表示される状態のことをいいます。
以上を踏まえて、見ていきましょう。
静的なサイト
ホームページを作れるようになるためには、まず静的サイトを作れるようになる必要があります。もっとも基本的な作り方ですので、マスターしましょう。
- マークアップ言語
- スタイルシート
- JavaScript
マークアップ言語（HTML）
まず、ホームページというのはHTMLというマークアップ言語で書かれた単なるファイルにすぎません。ブラウザーがそれを解釈して表示してくれるだけです。「index.html」のような .htmlという拡張子のファイルです。この拡張子にすることでブラウザーはHTMLで書かれたファイルだと認識します。
スタイルシート（CSS）
次に、スタイルシートという言語でHTMLにデザインを施すことができます。スタイルシートのことをCSS（カスケーティングスタイルシート）といいます。「style.css」のように、 .cssという拡張子を用います。
CSSも単なるテキストファイルのようなもので、CSSに書かれた内容をブラウザーが解釈し、ホームページのデザインを表示してくれるだけです。
CSSでできることは、ホームページの画面の分割（カラム設定など）や、カラー設定（フォント・背景など）、フォントサイズ。さらにシンプルな動作、回転なども設定することができます。また、メディアクエリにより画面サイズに応じて表示を変化させることができます。これはスマートフォンの普及によりたくさんの画面サイズのデバイスが出現したことにより開発されてきた機能です。レスポンシブWebデザインという言葉を聞いたことがある方も多いのではないでしょうか。スマートフォンやタブレットなどに対応するための技術もCSSが担当します。
JavaScript
JavaScriptというのは、プログラミング言語のことで、ブラウザー自体がJavaScriptの処理系です。ホームページに様々な機能を追加するために利用します。例えば、問い合わせやコメントフォームの入力チェック、クライアントからのデータ送信、最近よく見かけるチャット機能の表示と通信、メニューの開閉とその動作、拡大表示やモーダルウィンドウなどなど、様々な動作を担当し、ユーザーの利便性を高める役割を持ちます。
「script.js」などのように、 .jsという拡張子を用います。また、サーバーで動作させることも可能です。
以上、３つのファイルを、リクエストがあった際に、クライアントに送信することで、クライアント側のブラウザーがファイルを解釈して、必要な情報を表示してくれるという流れになります。
これを、静的サイトといいます。３つすべてのファイルが必要なわけではなくテキストだけで表示したい場合はHTMLファイルだけをサーバーに入れておき送信すれば、文章だけがブラウザーに表示されます。ただし、HTMLだけでは文章が読みにくいため、CSSも設置しておいたほうがいいでしょう。
動的なサイト
動的サイトは、クライアントからリクエストがあった際に初めて生成され、送信されます。それまではシステムが待機しているような状況だと思ってください。何らかのリクエストが発せられた時に、サーバーにおいてあるプログラムが作動してあらかじめ決めておいた処理を行ってくれます。
PHPやRuby、Python、Node.js（JavaScript）などのサーバサイドプログラミング言語を習得することで、動的なサイトを作ることができます。
HTML、CSS、JavaScriptに加えて一つ学ぶといいでしょう。JavaScriptでもサーバーサイドで動作するNode.jsがありますので、JavaScriptをマスターするのが一番手っ取り早い方法かもしれません。
ログイン機能やデータベースの操作、ユーザーによって何か異なったコンテンツを表示するなどができるようになります。プログラミング言語は習得がとても難しいため、独学よりスクールで学んだほうが理解が早いと思います。
また、コンテンツ管理システムなどを利用する場合もサーバーサイドプログラミング言語を知っている必要があります。コンテンツ管理システム（CMS）というのは、ホームページの管理を簡単にするシステムのことです。代表的なものにWordPress（ワードプレス）があります。WordPressはPHPで作られています。PHPは多くのCMSやウェブサイトで利用されており、Webでの利用に特化した言語です。
画像編集ソフト
PhotoShop、Illustratorなどが有名です。基本的な使い方は覚えておいて損はありません。しかし難しいソフトなので習得するには、相当な修練時間が必要になります。
Webデザイナーになりたい方は、この２つのソフトの使い方を覚えるといいでしょう。それ以外の方は無料ソフトを使ってみることをお勧めします。PhotoShopの代わりとしてGIMPを、Illustratorの代わりとしてInkScapeを始めてみましょう。いずれもフリーソフトです。
まとめ
いかがでしたか。ホームページを作れるようになるために必要なスキルを説明してきました。最低必要なスキルが、HTMLとCSSです。この２つがわかれば静的なサイトを作れます。HTMLとCSSがすべての基本にまりますのでしっかりマスターしましょう。
こちらにも少しだけ詳しく書いていますので参考にしてください。
ホームページ作成に必要なプログラミング言語「初心者向け」
最後に、Web制作の勉強におすすめのサイトを掲載しておきます。
初心者向けのプログラミング動画サイトです。HTML入門もあり初心者の方におすすめ。
ドットインストール
オンラインでコーディングしながら進められるWebサービス。
Progate
こちらも似たようなサービスです。
SkillHub
Photoshop、Illustratorの勉強に良いサイト。
PhotoshopVIP
