ファンサイトを作りながら学ぶWeb開発
乃木坂46の大園桃子さんの非公式ファンサイト「ももさいと」を運営している管理人です。サイトを運営しているとたまに次のような相談をいただきます。
「自分もファンサイトを作ってみたいのですが、どうしたらいいですか？」
「生誕祭サイトを作るには何をすればいいですか？私にもできますか？」
「Webサイトを作るにはプログラミングが必要で勉強が大変そう...」と最初から諦めてしまう方も多いようですが、Webサイトを作ることはそれほど難しくありません。
新しいことを始めてみたい、ファンサイトを作って好きなグループやメンバーを応援したい、ITに興味がある・将来エンジニアになりたい、といったモチベーションさえあれば大丈夫です。本記事ではWebサイトの具体的な作り方を連載形式で紹介していきます。
百聞は一見にしかず。インターネットの説明やWebサイトが表示される仕組みの解説はあとにして、実際に手を動かして試してみましょう。
用意するもの
まず初めに以下をご用意ください。ブラウザも使いますが、標準で入っているもので構いません。
・パソコン（Windows,Macどちらでも。Linuxの方は本記事が不要かと...）
・エディタ（おすすめは Visual Studio Code）
Visual Studio Codeの場合は https://code.visualstudio.com/ にアクセスして以下の「Download for Windows/Mac」ボタンからダウンロードしてください。
起動するとメニューなどが全て英語になっていますが、以下のように拡張機能で「Japanese」などと入力して「Japanese Language Pack for Visual Studio Code」をインストールすると日本語でも使えます。
HTMLを書いてみよう
HTML（HyperText Markup Language）はWebページを作るための言語です。プログラミング言語ではなく、マークアップ言語と呼ばれる文書の構造を組み立てるための言語です。
早速書いてみましょう。エディタを開いて以下の内容を入力してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ももんご</title>
</head>
<body>
<p>大すこ</p>
</body>
</html>入力したらファイル名を「index.html」にして保存します。以下はVisual Studio Codeで入力・保存した流れです。
保存された「index.html」をダブルクリックしましょう。すると、ブラウザが起動して次のような画面が開くはずです。
これはタブの部分に「ももんご」、ページ内に「大すこ」と表示されたWebページです。それぞれ先ほど書いたtitleタグ、bodyタグ（の中のpタグ）のものが表示されています。
ここからどうやって「ももさいと」のようなページになるの...？と思われるかもしれませんが、まずは焦らずに上記の内容を実際にお試しください。
今回の記事では
・WebページはHTMLで作れる
・エディタでhtmlファイルを作成してブラウザで開く
という簡単なことだけを紹介しましたが、基本的にはこのファイルを起点に色々と記述を増やしていくだけです。思っていたより簡単そうかも？と思っていただくことが今回の記事の目的ですが、いかがでしたでしょうか？
次回はもう少しHTMLについて説明します。
サポートいただいた費用はすべて「ももさいと」のサーバやドメインの管理費用に充てます。桃子さんの生写真やグッズに充ててしまったらごめんなさい...。