プロフィール

バジさん

Author:バジさん
 
所在 : 東京某所
職業 : Webディレクター
性別 : 男
 
課題 : 早起き
 
目標 : 株で生活

カテゴリー
推薦図書 その1

Webディレクション標準ガイド

■HTMLリファレンスなどと一緒にいつでも手の届く場所に置いておきたい一冊。
推薦図書 その2

Web標準の教科書

■全てのWebクリエイターに必携の書
FC2ブログランキング
ブロとも申請フォーム
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
自前サイトの「脱テーブルレイアウト」(その2)
前回の続きです。

まずは現状のサイトをバリデータでチェック。
ここで思ったより高得点、88点でした。
当時からかなりキレイなソースを書いていたんだなと我ながら感心。(オイオイ)

ただIDやクラスの名前の付け方がかなりよろしくない。
しかもしっかり設計しないでクラスを汎用部品のようにしているため、いろんなクラスをボコボコ詰め込んでいて美しくない・・・

が、ここまで作り直すととても寝るまでには無理、ひとまず脱テーブルに徹することに。

バリデータでエラーになっている箇所をみると、今回は対応見送りの箇所もあり、すぐ対応できるのはimgタグのborder属性をCSSファイルに移すだけ。
これで90点は超えるでしょう。ただ脱テーブルの際にエラーが増えないよう気をつけないと・・・

ということでどのように「脱テーブル工事」を考えているか、まず現状は以下。

現状の画面構成


ボタンの数はもっと多いですが、基本的にはこんな作りです。
典型的なデザイン重視のシンプルなサイトで、トップページは画像とFlashのみ。
外枠は 800×600 で固定。(実際はスクロールバーの部分を少し小さめ)
これはSEO的には良くないが・・・まぁ仕方ない、alt属性は詳しめに書こう。

作成当時からテーブルレイアウトは極力使わないようにしていたのに、なぜテーブルを使っているか。
このブログもそうであるように、高さを揃える必要のない段組は簡単なのです。
しかし、きっちり揃えていくのはブラウザ間でのCSSの解釈の違いにより結構難しく、見た目のズレをなくすためにテーブルを使ってしまったようです。

(図1)で説明すると、左の一番上のボタンの上辺と一番下のボタンの下辺を、右のコンテンツ表示部分とバッチリ高さを揃えたい。
これは当時は当たり前のようにテーブルレイアウトでした。(今でも結構そうですね)
そのため、自分では大嫌いなのにスペーサーも使用しています。

どのようなテーブルになっているか分かりますか?
答えは次回。

(その3へ続く)
スポンサーサイト


デザイン・コピーの話 | 【2006-05-31(Wed) 01:45:03】 | Trackback:(0) | Comments:(2)
コメント
私も昔HTML使ってHP作ってたころはちょいと勉強したものですが、CSSはいまだに理解できませんー。
ブログは基本CSSなんでしょうけど、テンプレートに任せてます、、、。
テーブルのスクリプトはなぜかごちゃごちゃします。
2006-05-31 水 09:40:08 | URL | 社員1号 #X86N/.ag [ 編集]
ブログは基本むちゃくちゃだったりします。笑

ちなみにこのブログもバリデータでチェックしてみましたところ、なんと・・・

「343個のエラーがありました。このHTMLは -143点です。」

「このHTMLには重要な問題が多く含まれています。環境によっては閲覧できない可能性が非常に高いと言えます。」

ということです。
やっぱり人間がしっかり書かないとダメみたいですよ~。
2006-06-01 木 00:36:24 | URL | バジさん #3fP8K/.I [ 編集]
コメントの投稿
管理者にだけ表示を許可する

カレンダー
12 | 2019/01 | 02
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
月別アーカイブ
ブログ内検索
RSSフィード
最近の記事
最近のコメント
最近のトラックバック
リンク