Visual Studio Codeでシンプル(HTML5, CSS3. javascript)な無料Webページを作る方法
Visual Studio CodeとGitHub Pagesで簡単なWebページ(サービス)を作る方法について解説します。「Visual Studio CodeやGitHubって何？」と思う方もいるかもしれませんが、これらはプログラミングをしていればまず間違いなく使うことになるので、知っておいて損は無いです。 ここでは「HTML5, CSS3, javascript」(＋画像など)のみの簡単なWebページを作ることを考えます。
Webページ作成のためのVSCode拡張
まずVisual Studio CodeにLive Previewという拡張を入れてください。
基本ファイルの作成
空の新規プロジェクトを作り、index.html, style.css, script.jsファイルを作ります。HTMLファイルはWebページの本体となる部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h3 id="midashi">HTMLファイル</h3>
</body>
</html>
CSSはWebページの見た目を決めるためのものです……という説明では足りなすぎるので詳しく知りたい方は検索してください。
h3 {
margin: 0;
}
javascriptでページを動的に変えられます(これも詳しく知りたい方は検索してください)。
//HTMLファイルの要素を取得するのは、「ロード」後に行なう必要があります。
window.onload = () => {
document.getElementById("midashi").innerText = "見出し";
}
プレビュー
index.htmlファイルを開いた状態で画面右上のプレビューボタンを押すとプレビューが表示されます。
外部ブラウザで本格的にデバッグしたい場合は、左側のRunボタンでプレビュー＆デバッグができます。
GitHub Pagesにアップロード
「GitHub Pages」は上記のような単純なウェブページを無料で公開できるサービスです。使い方は簡単で、まずGitHubにリポジトリを作り、上記のindex.htmlファイルなどを上げ、「Settings」→「Pages」を選び、ブランチを選んで「Save」ボタンを押すだけです。
なお、ローカライズ(多言語対応)のやり方を以下の記事で解説しています。
注意点
「Live Preview」拡張は文字を打ち込むごとにプレビューが更新されます。便利ですが、あまりにも頻繁に更新されるのがウザいからと言って自動プレビュー設定を"On Changes to Saved Files"に変えてしまうと、.gitフォルダの内部が変更された時もリフレッシュされてしまう問題があります(2024年9月現在)。
そのため上記のように変更してはいけません。
宣伝
上記の方法で学マスの自動レッスン選択＆パラメータ計算機を作りました。「既に沢山あるだろ」と思うかもしれませんが、最終試験だけでなく「4週前」の時点のパラメータ＆レッスンボーナスを入力すると、(上限を超えないように)どのレッスンを選択すべきか＋最終予測パラメータを自動計算します(サポートカードのイベントなどでパラメータが上がった時は適宜入れなおしてください)。
Discussion