Renewal/趣味のWebデザイン

リニューアルに挫折しないための3つの心得

"いろは"の先のCSS

マークアップの修正、CSSによる元のデザインの再現、さらに改善案の作成、CSS Tips までを扱う総合チュートリアルです。Web雑誌Folio(2003~2005年)に連載した記事を再録。

第1回 2003-08-21
望ましいリニューアル方針/文章の内容に即したマークアップ/ブラウザのデフォルトスタイルに頼らない/素人の配色:3大原則/テキスト枠に余裕を!/etc
第2回 2003-09-23
レガシーなHTMLの発想を乗り越えよう/Strict HTML + CSS の制約/制約が生む価値/CSSによるシナリオ風の文書整形/CSS Tips/position:absolute; で段組風レイアウト/etc
第3回 2003-11-25
デザイン意図を損なわずにアクセシビリティ向上/解像度耐性を高めよう/背景画像をCSSで代替する/CSSでテキストを画像で置換する方法/etc
第4回 2004-01-20
実践編第1回:個人ニュースサイトのレイアウトを CSS で(ほぼ)完全に再現するまでの過程を詳細に解説
第5回 2004-04-01
実践編第2回:Web Designing のレイアウトを CSS で(ほぼ)完全に再現するまでの過程を詳細に解説
第6回 2004-06-01
ノート風の罫線を CSS で実現する方法/CSS の限界を知る
第7回 2004-11-01
角丸テーブルを CSS で再現する方法/CSS の限界を知る
第8回 2005-02-01
テーブルレイアウトを消極的に採用するケース/表組みは table 要素で/必然性のないテーブルレイアウトは CSS デザインへ
第9回 2005-05-07
プルダウンメニュー入門/:hover 擬似要素の活用/WinIE との格闘
第10回 2005-10-30
SIDE-A はじめに/最近の状況/CSS デザイン普及の理由
SIDE-B 検索エンジン最適化/CMS/アクセシビリティ/おわりに

実践の記録

CSS によるリニューアルの実例が登場する Advice 記事を抜粋して紹介します。

Information