Web制作を始めた頃、Webサイトのレイアウトには大きな変化が起きていました。
HTMLのtable要素でページを組み立てる方法から、CSSを使ったレイアウトへ。
今では当たり前のCSSですが、当時はまだ新しい技術として学んでいた時代です。
先日、昔のWeb制作について話していたら、いろいろと思い出してしまいました。
特に、float。
あれには苦労しました。笑
テーブルで作ったサイトを、今度はCSSで
私がWeb制作を学んだのは、デジタルハリウッドでした。
担当の先生は、カナダの制作会社で働いていて、日本に帰国したばかりの方でした。
授業では、まず先生がテーブルを使ったレイアウトの作り方を実演してくれました。
そのあと、自分たちでもテーブルを使って同じページを制作。
そして今度は、そのページをCSSを使ってもう一度作る、という課題に取り組みました。
同じデザインでも、作り方がまったく違う。
今思えば、テーブルレイアウトからCSSへの移行期だったからこその授業だったのかもしれません。
当時はテーブルレイアウトもまだ使われていましたが、これからはCSSでレイアウトする時代になる、ということだったのでしょう。
おかげで私は、テーブルを使ったレイアウトを実務でほとんど経験することなく、CSSを中心にWeb制作を始めることになりました。
floatで、なぜか一段落ちる
当時のCSSレイアウトで欠かせなかったのが、floatです。
現在のFlexboxやCSS Gridのようなレイアウト手法が一般的になる前は、floatを使って要素を横に並べることがよくありました。
ところが、これがなかなか難しい。
横に並んでほしい要素が、なぜかひとつだけ下に落ちてしまう。
いわゆる「段落ち」です。
幅の指定なのか、marginなのか、それとも別のところに原因があるのか。
思い通りに並ばなくて、ずいぶんストレスを感じたものです。
でも、何度も作っているうちに、少しずつ仕組みがわかるようになってきました。
そのうち、頭の中でfloatを使ったレイアウトを組み立てられるようになり、以前ほど難しく感じなくなりました。
不思議なもので、あんなに苦労していたのに、理解できると簡単に思えてくるんですよね。
画像もひたすらスライスしていた
そういえば、画像の扱い方も今とはずいぶん違いました。
当時は、デザインした画像を細かくスライスして、HTMLに配置していました。
背景画像として使うために、幅1pxの画像を作って繰り返し表示させることもありました。
今ならCSSだけで表現できるような装飾にも、画像を使っていたのです。
画像を切り出して、配置して、ブラウザで確認する。
うまくつながらなければ、また調整する。
そんな作業をひたすら繰り返していました。
ブラウザごとの表示の違いにも悩まされました。
Netscape Navigatorなんて名前を聞くと、懐かしくなる人もいるのではないでしょうか。
ブラウザハックという言葉も、今ではあまり聞かなくなりましたね。
作り方は変わっても
あの頃のWeb制作を思い出すと、今とはずいぶん違うことに驚きます。
レイアウトの方法も、画像の扱い方も、使うツールも変わりました。
昔は苦労していたことが、今ではCSSを数行書くだけでできたりします。
さらに最近では、AIに指示するだけで、かなり複雑な実装までできるようになりました。
便利になったなあ、と思います。
でも、floatを理解できるようになったときの感覚は、今でも覚えています。
最初は難しくても、何度も試しているうちに、あるとき仕組みがわかる。
そして、それまで苦労していたことが、自然にできるようになる。
技術を覚える楽しさって、そういうところにもあるんですよね。
今はAIを使いながら、新しい技術にも取り組んでいます。
制作方法はこれからも変わっていくのでしょうけれど、わからなかったことがわかるようになる喜びは、きっと変わらないのだと思います。
それにしても、floatの段落ち。
今となっては、ちょっと懐かしい思い出です。
当時は全然笑えませんでしたけど。笑