コードを見なくても大丈夫！GithubでHTMLページをプレビューする方法
2024-04-02
GithubでHTMLページをプレビューする方法
Githubのプレビュー機能を使う
Githubには、HTMLファイルを直接プレビューできる機能が備わっています。
手順
- GithubでHTMLファイルを開きます。
- ファイル名の横にある "プレビュー" ボタンをクリックします。
利点
- ダウンロードやブラウザの起動が不要
- 簡易的なプレビューが可能
欠点
- 一部の機能が動作しない場合がある
- ソースコードとプレビュー画面が別々のため、見比べが不便
ブラウザに拡張機能をインストールすることで、Github上でHTMLファイルを直接レンダリングできるようになります。
- ブラウザ上でリアルタイムプレビューが可能
- ソースコードとプレビュー画面を同時に表示できる
- 拡張機能のインストールが必要
- 拡張機能によっては機能が制限されている場合がある
ローカルにダウンロードしてブラウザで開く
HTMLファイルをローカルにダウンロードして、ブラウザで開く方法もあります。
- "Raw" ボタンをクリックします。
- ページ全体をコピーします。
- 新しいテキストファイルを作成し、コピーした内容を貼り付けます。
- ファイル拡張子を
.htmlに変更します。 - ブラウザでファイルをドラッグアンドドロップします。
- すべての機能を確認できる
- オフラインでも確認できる
- ダウンロードとファイル操作が必要
オンラインのHTMLレンダリングツールを使う
HTMLファイルをアップロードして、オンラインでレンダリングできるツールもあります。
- 複数人で共有・編集できる
- インターネット接続が必要
GithubでHTMLページをプレビューするには、いくつかの方法があります。それぞれの方法には利点と欠点があるので、目的に合わせて最適な方法を選びましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>これはサンプルページです。</p>
</body>
</html>
CSS
h1 {
color: red;
font-size: 24px;
}
p {
font-size: 16px;
}
実行方法
- 上記のコードをそれぞれ
index.htmlとstyle.cssというファイル名で保存します。 - Githubでリポジトリを作成し、そこにファイルをアップロードします。
- ブラウザでリポジトリを開き、
index.htmlファイルをクリックします。
- Github上でコードを編集することもできます。
- ファイル名を変更したり、フォルダを作成したりすることもできます。
GithubでHTMLページをプレビューするその他の方法
Github Pagesを使う
- Githubでリポジトリを作成します。
- リポジトリに
index.htmlファイルと必要なアセットファイルをアップロードします。 - リポジトリの設定で "Pages" を有効にします。
- "URL" に表示されるURLをクリックして、プレビューします。
- 実際の公開環境に近い状態でプレビューできる
- カスタムドメインを設定できる
- 設定が少し複雑
- プログラミングの知識が必要
ローカルサーバーを立ち上げて、HTMLファイルをプレビューすることもできます。
- ローカルサーバーをインストールします。
- HTMLファイルをローカルサーバーのフォルダにコピーします。
- ブラウザでローカルサーバーのURLを開きます。
- 動作確認がしやすい
ブラウザの開発者ツールを使うと、HTMLファイルをリアルタイムでレンダリングできます。
- 開発者ツールを開きます。
- "Elements" タブでHTMLファイルの内容を確認できます。
- "Sources" タブでJavaScriptファイルの内容を確認できます。
- "Network" タブでネットワーク通信を確認できます。
- ネットワーク通信を確認できる
- 操作が複雑
- ブラウザによって操作方法が異なる
html css git
