HTMLとの出会いと付き添った日々の懐古話


職場のPCが全然動かなくて復旧するまで何もできず。
ブログ書くくらいしかないので無理やりネタを探した結果、やっぱHTMLの話かな~と思ったのでつらつらと書いてみます。

2002年の夏ごろ、新しいMacを買ってもらったんですよ。
初めてインターネットに繋がったのもこの頃で、わりと遅かったと思う。
それまで「パソコンは今後のために買ってあげてもいいけどインターネットはダメ」と言われていたのだけど、ケーブルテレビに加入しようとしていたらしく、インターネットもできる、便利だということがわかってきたのと、私ももう子供ではないということで、使い方を覚えさせようという魂胆もあったんじゃないかと思う。
(昔ワープロがうちにあったころもアルバイトといってお小遣いをもらって書類をタイプしたりしていた)

自分が描いた絵を載せたホームページを作りたい、と思っていたのでさっそくYahoo!で検索。
当然、「ググる」なんて言葉はまだなかった。(あったかもしれないが、2ちゃんとか見たこともなかったのでネットスラングはまったく知らなかった。)

メモ帳で作れる、という情報も見つけたけど、ホームページはホームページビルダーを使って作るもの、みたいな風潮だったと思う。
いや、私がやふった結果得られたのがその程度の情報だっただけなんだけど。

さっそく横浜のヨドバシカメラ(今のあんなところになかった頃だ)に行って、いろいろ物色したんだけど、ここで困ったことになった。

ホームページビルダーのMac版がないwww

eMacだったんだよね。うちの「パソコン」は。
その前から5年以上PowerMac5500を使ってて、Windowsのほうがいいかな~と思いながら気付いたらeMac買ってたっていうよくあるパターン。
その後もソフトとか少ないしやっぱ次はWindowsだよなって思いながら買いに行って、気付いたらiMac買ってたし(現役・VAIOと併用中)

脱線した。

当時は今ほどMacって人気なくて、まだまだ「DTPの人、デザイナーが使うやつ」って感じだったんだよね。Mac用のソフトなんてそんなに充実してなかった。
で、ホームページ作りたいんですけどMacで使えるソフトってないんですかって店員さんに聞いたのね。

「そうですね~こういうプロが使うようなやつ(Macromedia DreamweaverMX)しかないですね~」

思ったね。
パッケージがかっこいい。
ホームページビルダーとは全然違う。
将来自分がそれをバリバリ使うことになるとは夢にも思わなかった。

今ならわかる。
ホームページを「作る」ために使うものじゃないんだなって。
作成ソフトとかいってるけど、実際は運用に使うんだって。
FTP機能とかグレップとかめっちゃ便利なんだ。

とにかく、そんなすごいのいらない。めっちゃくちゃ高いし。
メモ帳でも作れるはずのものが、なんでそんな高いソフトいるの?プロって何やってるの?意味わかんない。
もう、そんな高いの、買ったとしても絶対使いこなせないし、メモ帳でやってみようって思ったわけ。

Macだからメモ帳なんてなくてテキストエディタなんだけどそれはおいといて。

その頃のMacには、AppleWorksっていうOfficeみたいなソフトが入っていて、一本でワープロ機能も使えるし、スプレッドシートとかも作れたのね。ワープロしか使ってなかったけど。

やふって仕入れた情報によると、.htmlっていうファイルを作って、それをブラウザで開くとページが見れるらしい。
AppleWorksで文字色変えたりした文書の拡張子を.htmlにして、IE5にドロップしたよね。
まあ~何も反映されない。
あたりまえだけど。

色々悩んで、やふって、AppleWorksでもWebページは作れるよ!っていう情報も見つけて、それで知ったんだけど、AppleWorksで普通のワープロみたいに文書書いて、フォントサイズとか色とか変えたら、それを「HTML変換」できる機能があったんだよ。
これか!!
変換してみると、わけのわからない呪文みたいなのが書かれたファイルができあがって、でもそれをブラウザで表示すると、なんと、フォントサイズや色が反映されてるの!!

なんか、そのときの感動ってあんまり覚えていないけど、着実にハマっていってたと思うな。ホームページを作るっていうことに。

最初のころはいちいちツールアイコンからフォントサイズ変えたりとかいろいろしてたんだけど、そのうちHTMLも見るようになって、「なるほど、なんかこういうやつで挟むとそこが変わるのか」とか、読み解いていったのね。
iで挟むと斜めになるぞ!!
bで挟むと太字になるぞ!!
みたいな。
フォントカラーを指定しているこの暗号みたいなのはなんなんだ!#ってなんだ!とかね。

AppleWorksのワープロシートは表も挿入できて、tableが吐き出されたりもするから、自然とtableコーディングも覚えていったね。

そんな感じで、HTML入門だとかリファレンスを見ることなく、できあがってるHTMLを分解していくっていうやり方で覚えていった。
このやり方が今も染みついていて、JavaScript入門とか読んでも絶対、変数・配列まで終わったらそれ以上進まないの。読んでもどういうことかよくわからないし、すぐ飽きちゃうし、頭にはいってこなくて。
それより作りたいものに近いことができるサンプルをコピってきて書き換えて、試行錯誤して新しいメソッドを覚えていくって感じ。

でも、このやり方だったのが良かったと思う。
私にはこれが合ってる。
もし学校に通って教科書読んで、先生の言う通りに書いて…とかしてたら、覚えるのすごく遅かったと思う。
言われたまま書いて、実行して、動いても、「動いた!!」って喜べないと思うんだよね。そりゃ動くコード書かされてるんだから動くに決まってるし。

サンプルソースもってきて、自分が実現したいことに合わせながら修正して、動かしてみて、思ってたのと違う動きしたりして、あれあれ?ってなりながら、ここをこうしたら…動いた!!っていうときの、あの感動が一番の教材なんだろうなと思う。

だから、Mac版ホームページビルダーがなかったことも、そもそもMacを選んだことも、自分の基礎を築いてる要因だな~と思うんだよね。

ほんとは絵を描いたりするのが好きだから、デザインといえばMacでしょ、って思ってMacを使っていたのに、それが原因でコーディングの方に目覚めたっていうのが、人生わからんな~と。

全部centerで中央寄せにして、メニューが縦に並んでいた時代。
NN(ネスケw)だけ背景が灰色でめんどくさかった時代。
テーブルで横並びやカラムレイアウトを実現していた時代。
tdの中にtableを入れ子にしてボーダーを実現していた時代。

classをつけたら、1箇所修正するだけで全部の色が変えられるっていう便利な方法を知って喜んだり、プログラムを書かないといけないと思っていたメニューのhoverも、background-positionで画像を変えるだけで表現できるのを知って本当に楽しかった。

一日中座ってPCに向かってる仕事だけはしたくないと思っていたはずなんだけど、いつの間にか、それを仕事にしていて。
あのときいらねーと思ったDreamweaverを使ってる。
今でもたまに、なんでこの仕事しちゃってるんだろうって思うw

スライスを工夫して、ピクセルパーフェクトでデザインと寸分違わぬページを作って得意になったり。
これからはCSSで見た目を分離する時代だ、ってなってから、また別のパズルを与えられた子供みたいな感じでのめりこんでいったしね。

4年くらい前に、いよいよHTML5やCSS3も勉強しないといけなくなってくるぞ~ってなった。
ちょうど現場が変わって、幸い新しい技術をどんどん試していけるようなところだったので、スマホ対応も早いうちから経験できたし、HTML5もCSS3もガンガン使っていけた。
環境に恵まれていたのももちろんあるし、そういう現場に派遣してもらえたのはその前から他の人よりコーディングしてて力をつけていたからという自負もあったりする。
それに、やっぱり、ホームページビルダーがなくて良かったと思う。
結局は、好運なんだろうね。

最近、QHMという言葉を初めて聞いた。
クイックホームページメーカーというらしい。
なんか、なつかしくなった。