HTMLとCSSで自分のWebサイトを作って公開する方法

オフ投稿者: せせら編集部

この記事を書いている人（せせら）

普段は個人事業主のプログラマーとして仕事をしています。
個人で作業効率化サービスを運営し、挑戦を続ける人々を静かに応援しています。

自分のWebサイトを作って公開してみたい。何から始めて、どう進めればいいんだろう。

公開までの流れが見えないと、どこから手をつけるか迷いますよね。

エディターで作って公開

Visual Studio CodeとブラウザーでHTML・CSSを作成・確認し、GitHub Pagesで公開しましょう。

HTMLで内容、CSSで見た目を分けて扱い、ブラウザーで変更結果を確かめられるため、直す箇所を整理しながら進められます。GitHub Pagesは作成した静的ファイルを公開できるので、手元での制作から公開URLでの確認までを同じファイルでつなげられます。

使えるソフトと公開先

編集・表示確認・公開には、それぞれ次のツールを使います。役割を分けておくと、どこで何をするかが分かりやすくなります。

ツール名	種類	主な役割
Visual Studio Code	コードエディター	HTML・CSSファイルを作成・編集する
Firefox	Webブラウザー	ページの表示とリンクの動作を確認する
GitHub Pages	静的サイト公開サービス	HTML・CSS・画像を公開URLで配信する

HTMLとCSSを書く作業にはVisual Studio Codeを使い、関連ファイルを同じ作業フォルダーで管理します。
普段使っているブラウザーでも確認できます。
GitHubのリポジトリはサイト用ファイルの保管場所、GitHub PagesはそのファイルをWebサイトとして公開する仕組みです。

作成から公開まで

作業は、準備・作成・手元での確認・公開の順に進めます。見た目を整えるだけでなく、ファイルの配置と公開後の表示まで確認しましょう。

掲載内容とファイルを準備する。文章・画像・ページ構成を決め、作業フォルダーに入口となるindex.htmlと、CSS・画像用のフォルダーを用意します。
HTMLとCSSを作成する。HTMLで見出し・本文・画像・リンクを記述し、CSSを読み込む指定を加えて、文字や背景、配置を整えます。
ブラウザーで確認する。保存したindex.htmlを開き、本文・画像・装飾が表示されるか、リンクが正しく動くかを確認して修正します。
公開して確認する。GitHubのサイト用リポジトリに公開用ファイルを追加し、GitHub Pagesの公開元を設定します。index.htmlを公開元の最上位に置き、発行されたURLでも表示とリンクを確認します。

ファイル名は小文字・空白なしでそろえましょう。公開先では大文字と小文字が区別される場合があるため、コード内の指定も実際の名前に合わせます。
画像やCSSの相対パスは、参照元ファイルから見た配置に合わせます。公開時もフォルダー構造を保ち、必要なファイルをまとめて追加してください。
アップロード前に公開するファイルを見直しましょう。パスワードや個人情報、公開する予定のないメモは含めず、公開URLから見られてよい内容だけに絞ります。

たとえば自己紹介サイト

たとえば、自己紹介サイトを作る葵さんが、ブラウザーで写真の表示を確認する場面を考えます。画像をimagesフォルダーに置いたのに表示されなければ、HTMLに書いた参照先と実際のファイルの配置・名前を見比べ、相対パスや大文字・小文字の違いを修正して保存します。その後、ページを再読み込みして写真が表示されるかを確かめます。