プロフィール

バジさん

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)
自前サイトの「脱テーブルレイアウト」(その1)
今回はとりあえずテーブルレイアウトを使わずに段組み風のレイアウト方法を知りたい人向けで、初心者向けの記事です。

自分はバンドをやっているのですが、そのサイトを自分で作っています。

もうかれこれ4~5年前に立ち上げたので、今のようにテーブルを使わないフルCSSでの作成が普及する前のことでした。
自分は当時からCSSでのアプローチは心がけてはいましたが、そのサイトはデザイン重視でキレイに見せるためテーブルレイアウトを使用しています。

仕事ではできるだけWeb標準に準拠して作っていても、肝心の自分のサイトを誰かに見せる時、仕事柄これではちょっと恥ずかしいという思いもあり、時間がある時に脱テーブルにしてしまおうと考えていました。

ということで今回自分のサイトの「脱テーブルレイアウト」をおこないました。

スケジュールは仕事から帰って寝るまでの間、という限られた時間。
まず、変更箇所を書き出してみました。

・テーブルレイアウトの削除(本来の意味での表組部分は対象外)
・バリデータでチェックし90点以上に
・JavaScriptの外部ファイル化(IEの仕様変更によるFlash部対応含)
・コピーライト表記の画像修正(2006年に変更)
・最低限トップページを修正、時間に余裕があれば他のページも

ひとまず以上ですが、自分でゴリゴリとコーディングするのは久しぶり。
とりあえずJavaScriptの外部ファイル化と画像の修正はちょちょいとやってしまい、残りの項目に取り掛かります。

(その2へ続く)

デザイン・コピーの話 | 【2006-05-30(Tue) 22:09:25】 | Trackback:(0) | Comments:(0)
『プロセス オブ ウェブデザイン 企画からデザインへ 落とし込みの技術』
なんかよさげな本を見つけて、仕事仲間の間で話題になっています。
でもって僕が買うことになってAmazonで注文しました。

『プロセス オブ ウェブデザイン 企画からデザインへ 落とし込みの技術』

プロセス オブ ウェブデザイン 企画からデザインへ 落とし込みの技術 プロセス オブ ウェブデザイン 企画からデザインへ 落とし込みの技術
WEB CREATORS LAB. (2006/06/02)
翔泳社
この商品の詳細を見る


どんな内容かっつうと、Amazonのレビューを引用します。


本邦初!「Nokia」「トヨタist」「KDDIリスモ」…etc.
ウェブデザインの過程で発生した実際の企画書、ラフ、仕様書など全てを見せて解説!
本書は、デザインが生まれるプロセスで発生する成果物(企画書、ラフ、スケッチ、メモ、モックアップ、プロトタイプ、サイトマップ、仕様書、要件定義などなど)を題材にして、ディレクションを行う立場の人が折々で発生する問題をどう解決していくか、同時にクライアント、その上司、デザイナーといった立場の人が行うべき大切なことも含めて、実際の事例に関わった人が解説していきます。
制作の方法やワークフローに関する書籍は多数出ていますが、依然としてウェブのデザインプロセスで生まれる成果物はブラックボックスに包まれています。実例を中心に扱った書籍はありません。ウェブ業界に携わる方、これから業界を目指す方にとって非常に価値ある一冊です!!

■スペシャルインタビュー■
KDDI:1年の構想を経て、「LISMO」デザインが誕生!
Method:国際的なWebデザインの落とし込みプロセスがわかる!



どうです?
これってかなり見たいと思いません!?
本が届いて目を通したらレビューを書こうと思います。

ところで「KDDIリスモ」って、アートディレクターの佐野研二郎さんが生みの親ですよね。
つい最近、佐野さんにお話を伺ったばかりでほんとにタイムリーだな~。

と言うことで、僕もまだ読んでいないのですが、興味がある方はコチラから。

推薦図書・ソフト等 | 【2006-05-26(Fri) 00:10:14】 | Trackback:(0) | Comments:(4)
今さら他人に聞けないインターネット用語(その2)

【RSS】
Rich Site Summary の略。Webサイトの見出しや要約などをXMLでまとめ、主にサイトの更新情報を公開するのに使われている。

【HTML】
HyperText Markup Language の略。Webページを記述するためのマークアップ言語。

【XHTML】
eXtensible HyperText Markup Language の略。HTMLを、XMLに適合するように定義し直したマークアップ言語。将来XMLへの移行に備えて。

【XML】
eXtensible Markup Language の略。文書やデータの意味や構造を記述するためのマークアップ言語の一つ。XMLはユーザが独自のタグを指定できる。

【W3C】
World Wide Web Consortium の略。WWWで利用される技術の標準化をすすめる団体。


なんかこれってきりがないかも・・・
ということで、わからない言葉があったら以下のようなサイトで調べてみよう!

■アスキーデジタル用語辞典
http://yougo.ascii24.com/gh/

■Yahoo!コンピュータ 用語辞典
http://computers.yahoo.co.jp/dict/


知識の共有 | 【2006-05-25(Thu) 00:08:49】 | Trackback:(2) | Comments:(2)
今さら他人に聞けないインターネット用語(その1)
今日は超初心者向けに、その1。
その2、その3と続くかは未定。(要望があれば・・・)
初心者以外は読み飛ばしてください。


【WWW】
World Wide Web の略。インターネット上に分散している情報をリンク構造で関連づけたシステム。

【Webサイト】
一まとまりに公開されているWebページの集まり。ホームページというのはWebサイトの入り口のトップページのことを指し、正確にはWebサイト。

【ブラウザ】
Webサイトを閲覧するためのソフトウェア。代表的なものとしてはInternet Explorer(IE)、Firefox、Opera、Safariなど。

【URL】
Universal Resource Locator の略。インターネット上で情報が収められている場所を示す住所。
最近は「URI(Universal Resource Identifier)」という語が使われることも多い。


これで今までモヤモヤしてたものも解決!?
(「知識の共有」というカテゴリでよいのだろうか・・・)

知識の共有 | 【2006-05-24(Wed) 00:48:18】 | Trackback:(0) | Comments:(0)
出直しです
完全に更新を怠っておりました。
申し訳ございません。

いや~、いろいろあったんですよ~。(って言い訳ですな)

そのいろいろあったことをココに書きたいところではあるのですが、それを書くとワタクシの正体がばれてしまう可能性があるのです!

ということで、詳しくは書けませんが・・・
まぁちょっと体調を崩していたということで。

GWもあけて少々たちますが、女帝と病気と闘いながらなんとか生きております。

またブログの更新も復活しますんでヨロシクです。

雑談 | 【2006-05-22(Mon) 01:13:04】 | Trackback:(0) | Comments:(0)
カレンダー
04 | 2006/05 | 06
- 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フィード
最近の記事
最近のコメント
最近のトラックバック
リンク