あの頃難しかったウェブデザイン、今ならこう書ける
JavaScript を使わず、レイアウト用の余計な要素は設けずになんとかしようとしていた、2005年前後のウェブデザインのノウハウを思い出して、「今じゃ楽になったもんよのぉ〜」と思いを馳せる記事。
具体的な実装を紹介しないので、ネタとして投稿。
目次
- 角丸 (それもリキッドレイアウトで!)
- カラムレイアウトやテーブルレイアウトでつっぱり棒が欲しくて
spacer.gif - テキストボックスに未入力の時に説明文とか出したい! JS 使わないとダメ？
- マウスホバーで文字色をグラデーションさせたい! コレは今流行りの jQuery + jQueryUI 使わないとダメかぁ!?
- 背景画像を複数指定したボックス (余計な
divを入れたくない!) - 2カラムレイアウトで
float使うとネガティブマージンとか高さ揃えるのとか色々キツイ! - 画面の上下左右中央にモノを置きたい! 要素の幅は不定です!
- グラデーションやりたい!
filter:progid:DXImageTransform.Microsoft.Gradient :first-letterが IE6 で無視されちゃうよー- あの頃の発想になかったウェブデザイン
角丸 (それもリキッドレイアウトで!)
→ border-radius。
カラムレイアウトやテーブルレイアウトでつっぱり棒が欲しくて spacer.gif
→ min-width。
テキストボックスに未入力の時に説明文とか出したい! JS 使わないとダメ？
→ placeholder 属性。
マウスホバーで文字色をグラデーションさせたい! コレは今流行りの jQuery + jQueryUI 使わないとダメかぁ!?
→ transition。
背景画像を複数指定したボックス (余計な div を入れたくない!)
→ background-image に複数指定できるようになったよ。
2カラムレイアウトで float 使うとネガティブマージンとか高さ揃えるのとか色々キツイ!
(「対応ブラウザを考えるとまだ table レイアウトした方が良いかぁ…！？」とかなってたあの時代…)
→ Flexbox (display: flex) でも Grid Layout (display: grid) でもお好きにドウゾ。
- 参考 : これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA
- 参考 : float の問題を overflow で解決 - lucky bag
画面の上下左右中央にモノを置きたい! 要素の幅は不定です!
→ 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 でいびつな円を作り、画面をはみ出すようなサイズにする。animation に transform: rotate() で要素を回転させ、余計な部分は親要素の overflow: hidden で隠す。円の上部分だけが画面に見えるように配置してやれば、うねうねと動く区切り曲線が出来上がる。
CSS アニメーションや transform の進化、組合せはスゴイ。
でもあの頃ほどマークアップにとやかく言わなくなった感があって寂しい。「その div は HTML 文書的に要るの？」みたいなヤツ。
