ツイッターでなんやかんやあったり、支部でなんやかんやあったりとそんななんやかんやを経たことによって、創作者たちの中には「個人サイトがいいかも……」なんて思いを抱く人も出てきているのではないだろうか。だが、個人サイト未経験者にとっては、サイト作成なんて未知の領域すぎてどうすればいいかわからないかもしれない。
どうすればいいかわからないということはつまり、個人サイトというものがそもそもどうやってできているのかがわからないのだと思う。知識ゼロでサイトを作るのは、正直言ってなかなかにハードルが高い。というか無理。だからまずは「ナノ」とか「フォレストページ＋」とか「erla」とか、そういうお手軽に個人サイトを作れるサービスに登録してみるのがいいのではないだろうか。
が、しかし。もしかしたら本当に知識ゼロの人たちはこの、「サービスに登録してみる」ということにすら不安を覚え、一歩を踏み出すこともままならないような状況だったりするかもしれない。なのでこの記事ではできるだけハードルを下げ、「まずはとりあえずページを作ってみよう」ということで、どうすれば自分のサイトが作れるかという超最低限の説明を、超簡単に書いていきたいと思う。
ただし、今これをスマホで見てくれている人には申し訳ないのだが、今からする説明はパソコンで個人サイトを作ることが前提となる。もしパソコンを持っているのなら、すぐに起動して一緒に個人サイト作りを試してみてほしい。持ってないし買う予定もないけど個人サイトは作りたいという人は、潔くサイト作成サービスに登録してくれ。ゼロからスマホはマジでハードル高い。
個人サイトは「htmlファイル」と「cssファイル」できている。htmlに表示内容を書き、cssで体裁調整をすることでページが成り立っているのだ。なんてことを言っても意味がわからないと思うので、とりあえず実際にやってみよう。
まず、パソコンのデスクトップを右クリック→新規作成→フォルダーで新規フォルダーを作り、名前を「test」にする。それからそのtestフォルダを開き、右クリック→新規作成→テキストファイルを二つ作り、それぞれの名前を「test.html」と「test.css」にする。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と出るが気にせず「はい」を押す。
次に、「test.html」と「test.css」に以下のテキストをコピーして貼り付けてみてほしい。（ダブルクリックだと編集画面にいけない可能性がある。愛用のテキストエディタがある人の場合はそれで開けばいいので説明は不要だと思うが、テキストエディタってなんですか？という人は、まずはパソコンにデフォルトで搭載されているメモ帳を開いてくれ。そしてそのメモ帳の真っ白い部分に編集したいファイルをドラッグ＆ドロップすれば、そのファイルの中に自由に書き込みができる）
※上がhtml、下がcss
<!DOCTYPE html> <!--htmlの宣言-->
<html lang="ja"> <!--日本語-->
<head>
<title>個人サイト</title> <!--ページタイトル-->
<link type="text/css" rel="stylesheet" href="test.css"> <!--cssファイル読み込み-->
</head>
<body>
<header> <!--ヘッダー-->
<h1>ひみつきち</h1> <!--ヘッダータイトル-->
</header>
<p class="deka-font center">これが！</p>
<p class="deka-font center">個人サイトだよ！</p>
</body>header {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 200px;
background-color: orange;
}
body {
background-color: #ffff99;
}
.center {
text-align: center;
}
.deka-font {
font-size: 100px;
}テキストをコピペして保存できた？
はい、ＯＫ！ 個人サイト作り終わり！
これでもう個人サイトの完成である。それじゃあさっそく中身を表示させて確認してみよう。「test.html」を右クリックし、プログラムから開くでブラウザを選択する。「Chrome」でも「Edge」でも何でもいい。普段自分が使ってるやつを選んでくれ。するとほら、ブラウザにページが表示されたでしょ？ そう、それが個人サイトだよ！！！
完成画像は載せないから、自分でやってみてね。
ページを見るとわかる通り、あえてクソデカフォントで表示されるようにしてみたわけだが、こういう体裁を指定しているのがつまり「cssファイル」なのである。とりあえずhtmlを上から順に見てみよう。まず、先頭から</head>まで。ここはコンピューターにページの説明をする部分であり、どのサイトでもだいたい共通である。<!– –>で囲まれているのは人間用のコメントなので、それを見て意味を把握してほしい。今回書いてるのはガチで最低限なので、本当はもっといろいろ記述することになるとは思う。でもここでは割愛。次に<body>～</body>の部分。ここがサイトのメインだ。この中に書かれているものが実際にページにも表示されているのがわかると思う。注目してほしいのが「class」と書かれているところなのだが、クソデカフォントのところを見てみると「deka-font」と「center」という表記がされている（ちなみにclassの前のpは段落）。で、cssの方も見ると、そちらにも同じく「deka-font」と「center」が書かれている。
おわかりいただけただろうか。cssで「deka-font」に「font-size」を指定しており、「center」には「center」を指定している。こうやってクソデカフォントのやたらでかいフォントサイズ、そしてそれを中央揃えにする、という体裁指定を実現しているというわけだ。
背景にはわかりやすく色なんかつけてみたりしているが、もちろんここは色ではなく画像の指定に変更することもできる。testフォルダの中に好きな画像をコピーし、名前を「gazou1.jpg」に変更する（jpgの部分はpngなどの可能性もある）。「background-color」の行を消し、「background-image: url(“gazou1.jpg”);」とすることで、背景に指定した画像が表示される。
ここまでＯＫ？
よし、じゃあ次はせっかくなのでページを増やしてみよう。「test.html」の</body>の上に以下を追記する。
<p class="center"><a href="./memo.html">memo</a></p>これでmemoというページへのリンクができる。そしてこのmemoページを作るために、「testフォルダ」内で「test.html」をコピペし、新しくできた方の名前を「memo.html」にする。
そして「memo.html」を開いてタイトルの部分を<title>memo</title>とし、<body>内を好きな文章に書き換える。はい、これで新しいページができたよ！
個人サイト制作とは結局、こういった作業の繰り返しである。難易度はともかく、仕組みとしてはわりと単純だ。
さて、ここまでやってみてどう思っただろうか。恐らく大まかな感想としては、「楽しい」か「面倒」の二択になるのではなかろうか。楽しいと思った人は素質があるので、この調子でもっといろいろググりながら自分好みのサイト作りに挑戦してみてほしい。ただし、今作っているのはあくまで自分のパソコンで表示させているだけであり、個人サイトをネットの海に放流するには「レンタルサーバー」を借りて、作ったファイルをそのサーバーに「アップロードする」という行程が必要となる。サイトの公開までにはやることが山積みなので、どうか挫折せずに頑張ってほしい。
面倒だと思った人。大丈夫、キミは正常な思考回路の持ち主だ。そう、面倒なんだよサイト作りって。だからね、何も恐れることはないんだよ。潔くサイト作成サービスに登録しよう。そうすればちまちまファイル作ったりとか体裁指定のためにcss書いたりとか、そんなのしなくてもいい感じのサイトができるから。テンプレートで一発だから。もちろんサイト作成サービスによっては、テンプレートを使いながらさらに上書きでcssも書ける仕様だったりするから、そこからちょっとずつ勉強して独自のサイトデザインに仕上げていくことだってできるよ。
個人サイトに興味はあるけどどうすればいいかわからない人たちへ。どうだろう。これで少しは個人サイト制作のイメージが湧いただろうか。サイトを作って公開するのは実際のところ、非常に大変な作業だ。しかしサイト作成サービスを使用すればその作業はかなり楽になるし、やる気と気力があるならゼロから挑戦するのももちろんいい。作り方は人それぞれだ。ぜひとも自分に合ったやり方でサイト作成に着手してほしい。
