あいも変わらずどうも、笹錆です。
突然ですが皆さん、自分の書く文書って面白くないですか？
面白いですよね？
これに共感できる人は、おそらくインターネットに長いこと触れ、noteや個人ブログといった媒体でオタクの書いた文章を読んできた人間だと思います。
かくいう僕もその1人です。
そして、そういった人は1度でもこのように思ったことはありませんか？
笹錆
自分もサイトを書いてみたい！
当記事は、そんな理想を持っている、オタクの中でも情報発信に興味のあるオタクの皆さんに向けた記事です。
特にその中でも、はてなブログなど既存のブログサービスを利用したくない、自分のサイトは自分で作るんだ、と自作にこだわる人に向けた記事です。
笹錆
そんな面倒くさいオタクが居るわけ……
S君
お前のことだろ。
今回作成するサイトは、静的サイトと呼ばれています。
音声媒体でこの単語を聞くと変な勘違いをされますが、対義語に動的サイトもいうのもあります。
静的サイトは保存されているものをそのまま表示し、動的サイトはリアルタイムで表示を変化させるものを言います。
例えばショッピングサイトや動画サイトなんかは、閲覧履歴に基づいておすすめしてきたりしますよね。
他のアカウントで開くと、また別のものをおすすめしてくると思います。
これは開く人に合わせた表示をリアルタイムで作成しているからで、こういったサイトが動的サイトの一例です。
一般的な個人ブログのような日記形式のサイトは静的な機能で事足りると思っています。
令和になってもハルヒを持ちだして「アクセスカウンターをつけたい」とか言い出すオタクたちはWordPressとか自分で媒体を選んでください。
H君
アクセスカウンター付けたい。
プロフィールを書く
まずはプログラミング言語らしく、hello,worldを出力してみましょう。
-R君「プログラミング言語ではなく、マークアップ言語ですよ。」
なんかうるさい奴がいますね。
とはいえ、確かにHTMLはプログラミング言語じゃないので別の内容を出力してみましょう。
練習も兼ねているので、文量がまぁまぁあり、見出しなどで階層的な構造を作れ、内容も書きやすいものを考えましょう。
この内容に合致するものはただ一つ。
そうです、プロフィール帳ですね。
-H君「古オタクがよ。」
-S君「誰とも交換出来なかった奴がよ。」
ガヤがうるさいですが、ポートフォリオ用と言い張ることも出来なくもないので続行します。
書いてもらうのは「ユーザー名」「ニックネーム」「誕生日」「星座」「血液型」「趣味」「フリー質問」の7つです。
これらを次のように名前、誕生、質問の3種類でカテゴリ分けしています。
というわけで、実際に書いてみましょう。
まずはindex.htmlというファイルを用意し、次のように打ち込みます。
記事一覧
ツイート
訂正
裏話
<!DOCTYPE html>
<html>
<body>
<!--ここにいろいろ書く-->
</body>
</html>
次に、コメントアウトしていた部分に名前とニックネームを打ちこみます。
<!DOCTYPE html>
<html>
<body>
ユーザー名:笹錆
ニックネーム:錆
</body>
</html>
この状態で一度確認しましょう。
よく使ってるブラウザアプリで開くのを選択すると、次のように表示されると思います。
無事表示されていますね。
この調子で、残りの文章も画像のように書いていきましょう。
<!DOCTYPE html>
<html>
<body>
Introduction Card
名前
ユーザー名:笹錆
ニックネーム:錆
誕生
誕生日:3/1
星座:うお座
血液型:A型
質問
Q.最近の趣味はなに？
- A.ホゲータの真似。
Q.好きなポケモンはなに？
- A.ヒマナッツかホゲータ。
</body>
</html>
ですが、これだけだと文字の羅列になっていますね。
読めはしますが難しいと思うので、次はこれを少し改善していきます。
そういえば
そういえば、『クソサイトを量産した〜い』という記事を読んでいたら気づくと思いますが、コードの表示方法を少し変えました。
初めから答えを知りたくない人、考えて作業する方が向いている人への配慮として追加しています。
コードを表示するか否かの選択は、記事の最初でできるようにしているのでお好みで。
今後この表示が出てくる記事は書く予定がないので、今回限りの仕様です。