ウェブサイト(ホームページ)はどのように作られているかご存知でしょうか?
よく、「無料サービスで制作したが想うように制作できなかった」、「更新時に手間がかかる」、そもそも、「どうやって作るの?」と問い合わせをいただくことがあります。
今回は最低限、これだけわかればウェブサイト(ホームページ)を作れます!というのをご紹介いたします。

INDEX

ウェブサイト(ホームページ)の前提

今回ご説明するのは完全に自分でウェブサイト(ホームページ)を制作する方法です。
無料サービスである程度環境が最初から用意されているものは除きます。
しかし、無料サービスで制作したウェブサイト(ホームページ)にも使用できる技術かと思います。

HTML

なにはともあれ、HTMLです。
世の中のすべてのウェブサイト(ホームページ)はHTMLで構成されていると言っても過言ではありません。
誤解を恐れずに言うと、ウェブサイト(ホームページ)=HTMLです。
HTMLとは、HyperText Markup Languageの略称で、ホームページの文書構造を記す言語です。
例えば、見出しや、箇条書きのリストやヘッダー、フッターなどが当たります。

HTMLにもHTML5やHTML4.0、XHTMLなど様々なバージョンがあります。
しかし、今テストに出るのはHTML5です。
現在もHTML5.2などマイナーアップデートが進んでいます。

CSS

CSSは、Cascading Style Sheetsの略称です。
ざっくり言うと、ウェブサイト(ホームページ)の装飾をする言語です。
言語と言いましたが所謂プログラミング言語ではなくスタイルシート言語と呼ばれるもので書き方もプロパティを羅列するような簡単なものです。
しかし、その分エラーなどがでないため不具合を探すのが大変です。

ちなみに、HTMLマークアップ言語と呼ばれます。

ウェブサイト(ホームページ)に配置したい要素をこのCSSを書いて装飾していきます。
また、マウスなどのホバーしたときやクリックしたときなど擬似クラスと呼ばれるもので動きを装飾できます。

サーバー・ドメイン設定

サーバーの契約とドメインの契約が必要です。
やすいと合わせて月々1000円ぐらいです。
無料のものもありますが、自分の好きなURL(https://○○○.comなど)が設定できないことや、一日のデータ転送量が決まっていたり制限がかなりあります。
自分のコンテンツとして制作していくのであれば自分のサーバーを持つことをオススメします。
自分専用のドメインを持つことは信用に繋がりますし、メールアドレスも無限に持てます。

画像編集

画像編集のアプリケーションを使用できることです。
具体的には、Photoshop、Illustrator、Sketchなどのアプリが有名です。
無料のものですとGIMPなどがあります。
頑張れば、PowerPointでも制作できるものもあります。
画像はウェブサイト(ホームページ)をより華やかに見せることができます。
また、写真などをきれいに加工することで意図したイメージを的確に伝えることができます。
いまは、スマホでも無料アプリでもできますよね。
画像全体のサイズを調整するなど微妙につかえなかったりします。

まとめ

とりあえず、これらができればウェブサイトを自力で立ち上げることができます。
ただし、あくまで作れるだけという段階なので、みなさんが思い描くウェブサイト(ホームページ)は作れません。この段階に様々な技術がのっかってきてウェブサイト(ホームページ)は制作されています。
ウェブサイト(ホームページ)のお悩みがありましたらお気軽にお問い合わせください。