# 私的Webサイト制作史part.1

意外と周りにWebサイト制作してみた、もしくは作ってみたい、みたいな人がたくさんいたりして、極稀にどうやって学んだの？とは……聞かれませんが、僕的にはこっちから自分の経験を語りたいので、ちょっと書いてみます。

こうした方が良いとかっていう意味で書いているのではないです。こんなふうに学んだ人がいたよ～っていう一例というか、こういうことに困っているけど調べ方がわからない、みたいな人の一助になったらいいかなぁ、とか思って書いています。全くの技術的文書のつもりで書いていないので、気軽にふ～んと思って読んでいただけると幸いです。

書いていたら、いつの間にか原稿がずいぶん長くなってしまったのでシリーズ化しています。

# 最初は本から

正直言ってあんまり覚えていないです。

HTML/CSS/JSを知ったのは適当なGoogle検索の結果だったと思います。本格的に興味を持って行動して最初に辿り着いたのは本だったと思います。その本ではHTMLにとても感動した記憶があります。

その本を読んでいて、やけに印象的だったのが、HTMLは文書をほぼ半永久的に保存できるということを強調していたことです。そもそもHTML自体は現在WAHTWGで策定/仕様公開している列記とした国際規格で、ブラウザさえあれば読むことが可能です。その上中身はただのテキストファイルなので、テキストエディターさえあればとりあえず読めます。僕は、HTMLのその保存性に強く感動しました。

その本を読んだときが、確か中2くらいだったと思いますが、その当時はそこまで本格的にWebサイトを作ろうとかいう意欲はなく、ちょっとお遊びでHTMLをちょこっとメモ帳で書いた感じです。HTMLに感動してHTMLばかりに興味があったのでCSSは全く書いていません。しかも、書いたパソコンがWindowsXPだったので、その本が推奨していたHTML5に対応していなくて、本に僅かながら書いてあったレガシーコードを参考に書いたという思い出があります。

その本を読んだ後も、興味の赴くままに、非連続的にその手の本を見つけては読んでいたと思います。

# 色々な教材で学んだ初期

# やっぱり個性派文庫

本格的にHTML/CSSをコーディングし始めたのは、やっぱり個性派文庫なんですよね。当時はミカフラ文庫と称して、ミカエル・フラグメント（鬼詠雪介）を掲載していたと思います。もともとWordでやっていたのをHTMLにも乗り出した動機は縦書きができるを知ったからです（これも記事にしたら面白そう……）。確かこの辺からVS Codeを使い出したと思います。

# 地獄のHTML化

ミカフラの当時の最新話までの原稿を、見様見真似でいろんなサイトを参考にしながら手作業でHTMLにしてました。SSGとか知らなかった時代ですから、新規ファイル作ったらドキュメントタイプ宣言から書いていました。ルビ振ったり段落切ったり。

特に自分がこだわっていたのがルビ振りで、各話に初めて出てくる難しめの単語に限ってルビを振るというルールをWord時代からやっていて（これも我ながらどえらいめんどくさいことをしていたと思います）、これをHTML版でも踏襲していました。すべての単語に対してルビを振るなら単純な置換で一発なのになぁとか思っていました。今思えばPythonとかで一発で実現できそうな話ですね（辞書ファイル作るのが少々面倒だけど）。まぁその地獄のHTML化をミカフラはほぼ全て手作業でやってたような気がします。

その後は何時だかから、ネットの似たような事例をほぼマルパクリしながらWordのルビをHTMLのタグに変換するマクロを自作して、テキストファイルに移行するつい最近まで対応していた気がします。

ついでにテキスト検索/置換を知って使い始めたのはミカフラの編集を始めてから、正規表現はHTMLを弄り始めてからです。これもまた記事にしてもいいかも……

# WebサイトっぽくしたくてCSSを触る

最初は小説原稿をHTMLに手作業で変換していっただけでしたが、やっぱりちゃんとしたサイトが欲しかったので、作り始めました。ここらへんから本格的にCSSを学び始めたんじゃないかと思います。

最初は軽く本とかをこんなことができるんだ～みたいな感じで読んで、実際に作り始めたらやりたいことを検索欄にぶち込んで参考になりそうな記事を読みながらCSSを書いたって感じです。

# クラスセレクターを使いたくない

当時の自分にとっては、HTMLはあくまで文書であって、文章の中身（コード）がそれなりに読みやすくあるべきだと思っていました。そちゃ可読性は重要ですが、ちょっとベクトルが違って、今回の話はもっと初歩的な話です。HTMLってタグが増えるとごちゃごちゃしてきて、慣れないと少々読みにくいじゃないですか。だから、あまり余計は属性を付けてごちゃごちゃさせたくなかったんですよ。それから単に記述量が増えるのがめんどくさかったというのも覚えています。あとクラスの命名法というか、命名するための語彙がなかったっというのも影響していると思います。

コードを読むとわかりますが、必要最小限のタグにしかクラスを付けてないです。要素セレクターを最優先で使って、クラスセレクターは要素セレクターで選択できないときに使っていた感じです。

# HTMLタグにクラスを一つしか付けられないと思い込む

単純に思い込みました。CSS設計を知るまでは、ずっとすべてのスタイルをシングルクラスで実装していました。べつにシングルクラスで実装すること自体は悪いことではないんですが…

# 記述量を極力抑えたい

CSSって、頑張れば記述量を抑えることが出来ます。なので様々なセレクターを駆使して、1行2行レベルの重複コードの被りを撲滅するような方針でCSSを書いていました。

# クソコード爆誕

クラスセレクターを使いたくない、HTMLタグにクラスを1つしか付けられないと思い込んだ、様々なセレクターを駆使して記述量を減らす、の3つが主な原因となってクソコードが爆誕しました。

クラスセレクターよりも要素セレクターの使用を優先して、クラスの子に対してスタイルを当てる、みたいなことをしたせいで、HTMLの構造に強く依存したコードになりました。当時はエディターのEmmetを用いればHTMLの構造の依存なんか怖くないとか思っていました。HTMLの構造が変わった瞬間にスタイルが崩れるので本当に苦労しました。

タグにクラス1つしか付けられないと思い込んだせいで、重複コードを増やす構造になっていて、様々なセレクターを駆使して記述量を抑える方針と競合して、中途半端で無駄に労力のかかった覚えがあります。その上タグ1つに1クラスの都合で、たまに子要素を追加したりしてHTMLの構造が変わったりして、構造依存なCSSの変更をしないといけなくなったりして余計に大変でした。

# 終わりに

ここまでで僕のWebサイト制作史の初期が終わりました。いかがだったでしょうか？同様の悩みを持っている人がいれば、シリーズ第二弾が解決してくれるかもしれません。次回「CSS設計到来」！