あの頃難しかったウェブデザイン、今ならこう書ける

JavaScript を使わず、レイアウト用の余計な要素は設けずになんとかしようとしていた、2005年前後のウェブデザインのノウハウを思い出して、「今じゃ楽になったもんよのぉ〜」と思いを馳せる記事。

具体的な実装を紹介しないので、ネタとして投稿。

目次

角丸 (それもリキッドレイアウトで!)

border-radius

カラムレイアウトやテーブルレイアウトでつっぱり棒が欲しくて spacer.gif

min-width

テキストボックスに未入力の時に説明文とか出したい! JS 使わないとダメ?

placeholder 属性。

マウスホバーで文字色をグラデーションさせたい! コレは今流行りの jQuery + jQueryUI 使わないとダメかぁ!?

transition

背景画像を複数指定したボックス (余計な div を入れたくない!)

background-image に複数指定できるようになったよ。

2カラムレイアウトで float 使うとネガティブマージンとか高さ揃えるのとか色々キツイ!

(「対応ブラウザを考えるとまだ table レイアウトした方が良いかぁ…!?」とかなってたあの時代…)

→ Flexbox (display: flex) でも Grid Layout (display: grid) でもお好きにドウゾ。

画面の上下左右中央にモノを置きたい! 要素の幅は不定です!

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

グラデーションやりたい! filter:progid:DXImageTransform.Microsoft.Gradient

background-image: linear-gradient() とか radial-gradient() とか

:first-letter が IE6 で無視されちゃうよー

→ IE6 は死にました。IE6 を無視してください。


Hail2u さんや Lucky Bag さんは古い記事を残してくださっていて助かります。

あの頃の発想になかったウェブデザイン

あの当時は思いもよらなかったけど、今では簡単にできるようなデザイン。

斜めの仕切り

::before 擬似要素を transform: skewY(-10deg) とかで斜めにし、border なり background-image: linear-gradient() なりで区切り線を実装すれば OK。

うねうねした曲線の区切りがアニメーションする

border-radius でいびつな円を作り、画面をはみ出すようなサイズにする。animationtransform: rotate() で要素を回転させ、余計な部分は親要素の overflow: hidden で隠す。円の上部分だけが画面に見えるように配置してやれば、うねうねと動く区切り曲線が出来上がる。


CSS アニメーションや transform の進化、組合せはスゴイ。

でもあの頃ほどマークアップにとやかく言わなくなった感があって寂しい。「その div は HTML 文書的に要るの?」みたいなヤツ。