プロフィール

バジさん

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

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

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

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

Web標準の教科書

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


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
自前サイトの「脱テーブルレイアウト」【編集後記】
無事に各ブラウザでうまく表示され、メデタシメデタシと思われた「脱テーブル工事」。

が、後日、会社のMacで確認したところ(自宅はWin)なんとMacIE5で表示が崩れているではないですかー!!
しかも表示されていない要素もある・・・
その他のブラウザはMacでもオッケーですが、これにはガックリです。orz
さらに宿題が増えましたねぇ。


自分が実制作していた頃はMacIE5が全盛期で結構苦労した記憶があります。
時間がない時はフルCSSではなく、旧来のきったないソースでごまかしたりしたことも。
当時はフルCSSで作ってあげるのはまだサービスっぽい感があったのですが、現在ではそうもいきません。

今はデザイナーさんからあがってきたソースをチェックする側ですが、その際、使う必要の無いテーブルが入っていたり、フルCSSでやっても難しくないだろ?ってデザインをテーブルで組まれたりしているとやっぱりガックリです。orz
テーブルだけじゃなく、ほんとにWeb標準とかを全く意識していない、もしくは意識しているが超中途半端な勉強嫌いのデザイナーさんもいるんです、実際。
逆にいちいち頼まなくても、ものすごくキレイなソースを書いてきてくれるデザイナーさんも当然いるわけです。

次回発注するとき、どちらに頼みたいか、という点だけみても、常に勉強をする癖がついていない人は自ら仕事を減らしていることになっています。
これはディレクターにも言えることで、納品先(クライアント側)に詳しい人がいてチェックされれば、いい加減なものを納品していれば同じことが起こるわけです。

ドッグイヤーと言われるこの業界にいる限り、常に勉強は怠れません。
とは言っても、日頃の業務に直結することを中心に勉強するのは仕方ないことです・・・
が、常に忘れないよう心がけたいと思います。
このブログなんかで偉そうなことを書いているのは、自分自身が忘れないようにするためでもあります。

スポンサーサイト
デザイン・コピーの話 | 【2006-06-11(Sun) 00:09:16】 | Trackback:(0) | Comments:(0)
自前サイトの「脱テーブルレイアウト」(最終回)
前回の続きです。

こうなったら禁断(?)の絶対位置指定で!
これは細かなピクセル計算が正直面倒、でも今思いつくのはそれくらいなので。

まずは body 全体の margin と padding を見直し、各ブラウザ間で違いがないように統一。
(今見直すとこの辺、若干手を抜いていたところがありました。反省。)

すでにサイトタイトルやコンテンツ表示部分の位置は決まっているので、絶対位置で指定するのはリスト化したボタン群。
サンプルの図ではボタンは5個しかないですが、実際は14個ありました。

あ~、面倒、と思いながらも、ボタン画像の高さと余白を考慮しながら計算機で各ボタン左上の座標を決定。
計算上はこれで一番上のボタンの上辺と一番下のボタンの下辺が、右のコンテンツ表示部分とバッチリ揃うはず!

これはCSSの position:absolute で実現します。

で、これで完璧じゃろー、と思い表示チェック!
まずIE、おし、完璧!
おそるおそる他のブラウザでもチェック・・・、いやー完璧!
とは言わないまでもおおむねオッケー。

でも、やっぱり微妙に(ほんと1~2px)誤差は発生しました。
図でみると外枠があると思いますが、これもCSSで設定しているし、カウンターの高さが正確かどうか自信なし。
カウンターはISPのサービスを利用しているため、ローカルでは表示して確認ができないのです。
ということでカウンターの width、height属性を決定、これでバリデータでのチェックも点数が上がるだろう。

これにて自前サイトの「脱テーブル工事」は無事終了!
CSSをカットすると気持ちよく左に寄り縦一直線に!
バリデータでのチェックも無事90点を超えました。

ただし、宿題はできました。ボタンの高さを揃えるところですね。
絶対位置での指定はオススメできません。
なぜかというと、これはメンテナンスがめちゃくちゃ面倒になります。

例えば、今回も最後に各パーツの余白を微調整したわけですが、一箇所調整をおこなうごとにボタンの絶対位置を全て再計算しなければなりません。
これではビジネスの場においてはメンテナンス性が悪く最悪です。
今回はあくまでも個人サイトであり、数時間という短い工数であったための妥協ということです。

ただ、前にも話しましたが、このブログのように3列組にするくらいなら、今回苦労した部分は考えなくてもよいわけです。
普通に float で回し込んで余白の微調整をすれば終了です。
高さを完璧に制御しようとした結果、このように煩雑になりました。(しかもあまりよい例ではない)
意味のない画像とはいえどスペーサーの力は恐るべし!です。

以上で長らく続いた連載も終了です。
脱テーブルレイアウトをチャレンジしてみたい方の参考になれば幸いです。

デザイン・コピーの話 | 【2006-06-06(Tue) 00:44:40】 | Trackback:(0) | Comments:(4)
自前サイトの「脱テーブルレイアウト」(その5)
前回の続きです。

さてさて、ここからの微調整でやらなければならないのが、以下となります。
現状の(図4)と完成型の(図1)を比べてみてください。

CSSで回り込みした状態


(図1)の状態にするには以下のことをしなければなりません。

1.サイトタイトルとコピーライトをコンテンツ表示部の右端に揃える
2.リスト化したボタンの前に付いた「●」を取り除く
3.リスト化したボタンの前のインデントを取り除く
4.サイトタイトル上の余白を調整
5.ボタン左とコンテンツ右の余白を調整(センター余白はそれにより自動決定)
6.各ボタンの縦の配置を揃える(最下位ボタンの下辺をコンテンツ表示部に揃える)
7.全体的に各パーツの余白を微調整して完成

方法は必ずしも上記だけではなく、これはあくまでも僕がたてたアプローチ。
バリバリのコーダーさんならもっとうまくやると思います。

さらに、アプローチは同じでも、実際のコーディングはまた人それぞれだったりします。

最初の5つは margin やら padding やらを駆使して(リスト化した部分の対応も)すんなり終了。
問題は6つ目の縦の配置を揃えるところ。ですが、コンテンツ表示部分は幸いにも高さ固定。

しかし6は、時間がかかりました・・・

まず最初に、多くの人が普通に試してみるだろう、margin、padding を駆使しての余白調整。
僕もまずはやってみて、IEではキレイに揃いました!パチパチ~。

で、他ブラウザでの動作確認、Opera、FireFox、etc・・・全てでバラバラです。
ようはIE以外ではちゃんと揃って見えません。

予想していたことなので、次に無駄な改行コードをなくして誤差をなくして行こう!と。
結果、あ~、やはりそれでもダメかぁ。
もしかしたら、それだけでもちゃんとできるのかもしれませんが、なんせ工数がありません。
新たに調べてやってる暇はなし。
(後日に調べる!宿題ができました。)

自分の覚えている範囲でなんとかする方法はないか・・・

(最終回へ続く)

デザイン・コピーの話 | 【2006-06-04(Sun) 22:28:13】 | Trackback:(0) | Comments:(0)
自前サイトの「脱テーブルレイアウト」(その4)
前回の続きです。

話を戻して脱テーブル工事、まずは下準備です。

テーブル内に含まれているものを外に出すので、まずそれらをタグでくくってやる必要があります。
以下の(図3)のような形にまずしてみます。

テーブルを解除、タグでくくりなおす


本来不要なものは削除なので、当然スペーサーも削除です。
しかしスペーサーを無くしたことにより、後々予想以上の工数を発生させました。
ですが、やはりスペーサーを使うのはあまりにも美しくありません。

この時点ではCSSはまだ設定していません。
ここからCSSでテーブルレイアウト風に見せていくわけです。
個人的にはレイアウト済みのデザインからCSSをカットしてやって、ずらっと縦に各要素が並んでいくのを見るのは気持ちよいので好きです。

完成型は“自前サイトの「脱テーブルレイアウト」(その2)”で紹介した(図1)です。
これだけ余白バランスをデザインとして取り入れていると結構面倒なもんです。

CSSでテーブル風レイアウトを実現する場合のポピュラーな方法は以下のようなものがあります。

・float による回り込み
・position で絶対位置を指定


完成型は余白が多いのでどちらでやっても面倒ですが、今回は float での回り込みを選択。

では、どこをどう回しこむのでしょう?
って、(図3)を見れば簡単にわかってしまいますが、リスト化したメニューボタンのブロックとコンテンツのブロックを左右に並べてやります。
リスト化したボタン群とコンテンツ部分をそれぞれ div でくくってやりブロック要素とします。

このような時には div(ブロック)や span(インライン)はとても便利ですが、あまり div を使いまくったソースを書いていると「divマニア」とか言われたりするのでご注意を。

このブロックを float を使って左右に配置してやれば、一気に完成型に近づきました。
あとは(図1)に近づけるべくCSSでレイアウトしていきます。
ですが・・・、何気にここからの微調整が面倒なのです。
ブラウザ間によって微妙にCSSの解釈の仕方が違うのが問題です。

(その5へ続く)

デザイン・コピーの話 | 【2006-06-02(Fri) 00:28:53】 | Trackback:(0) | Comments:(2)
自前サイトの「脱テーブルレイアウト」(その3)
前回の続きです。

たいしたもんではないですが、現状のテーブルの答えです。

テーブルの表示


テーブルに画像をぶちこみ、余白などを完全に消す場所とそうでない場所を作ります。(図では見やすいように全ての箇所に余白が入っています。)
ボタンとボタンの間にスペーサーを置き、コンテンツ表示部分との高さをきっちり揃えていく方法です。

ということで、現状のトップページは画像とFlashのみをテーブルに詰め込んだだけ・・・
う~ん、とてもじゃないけど同業の方には見られたくありません。

一応当時から可能な限りCSSで、という方針でやっていたので、バリデータではそれなりに高得点が出ていますが、やはり意味のないテーブル使用(レイアウト目的の)は苦痛を感じます。

ここで少しWeb標準の話を書いてみますと・・・

HTMLのタグはどのように使ってもモニターで見た時キレイなら問題ないやん!
というのが少し前までは普通でした。
逆にそれを利用して、文章を表現するだけだったWeb上での表現を、これだけデザイン的なものにしてきたのです。

簡単に書くと・・・
適切な内容を適切なタグで囲む、見た目に関するデザインはCSSでおこなう!
これが現在の主流となっています。

これにより得られる恩恵は様々なものがあり、逆にWeb標準を無視することによるデメリットは計り知れません。

どのような恩恵があるか知らない人は自分で調べよう!
というか、知らない人は絶対調べてください。(仕事にしたい人は)
現在のWeb制作では無視できない大事なことばかりで、この知識ゼロで仕事をするなんてのは論外です!

僕は最近多いWeb標準信者でも脱テーブル信者でもありません。
よって、何がなんでもテーブルレイアウトを使わない、というのが絶対とは思いません。
が、できることならテーブルを本来の目的以外で使わないようするにこしたことはありません。
信者でなくとも、現在はWeb標準でアプローチするのが当たり前なのであります。

(その4へ続く)

デザイン・コピーの話 | 【2006-06-01(Thu) 00:50:40】 | Trackback:(0) | Comments:(2)
次のページ
カレンダー
03 | 2019/04 | 05
- 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 - - - -
月別アーカイブ
ブログ内検索
RSSフィード
最近の記事
最近のコメント
最近のトラックバック
リンク