帰省の電車の中で、読んでいた「Web creators」で
覚えておきたいCSS TECHNIQUEがあったので
年を越して忘れないうちにメモメモ。

◆Flashコンテンツを配置した際の下余白を消す方法
object,
embed {
vertical-align: top;
}


◆クロスブラウザ対応のリスト指定
ul {
margin: 10px 0 15px 15px;
padding: 0 0 0 15px;
}

li {
list-style-position:inside;
}


◆IEとFirefox他モダンブラウザでウインドウ高さに指定領域をあわせる方法
html,
body {
height:100%;
}
/*Firefox他モダンブラウザ用*/
#content {
min-heihgt: 100%;
}

/*IE用*/
* html #content {
heihgt: 100%;
}


Web creators (ウェブクリエイターズ) 2008年 02月号 [雑誌]

インプレスコミュニケーションズ (2007/12/27)

tv_conference.png

サイトの新規リニューアルに向け、現在Webのディレクションを任されている。

実はこれが初めてのディレクションで、あれこれ四苦八苦しながら、クライアント、デザイナー、SEO担当者と何度も打ち合わせを重ねてきている。しかし、あれこれクライアントに決定・決断して欲しい事項があるのに、全然進んでいかない。

○「こんな感じの内容を提案したいのですが・・・。」
◆「まだその点については当社で決まっていないので・・・」
○「いつ頃決まる予定でしょうか?」
◆「おそらく2ヶ月後には・・・」
○「えーと、サイトの公開日は?」
◆「2ヶ月後にお願いします。」
○「・・・。」


会議を通して、相手の意見を引き出し、決定項目として資料にまとめていく会話術の無さを痛感している。

また、決議を急いでしまって、会議を穏やかに進めることができない。決めたい事をどんどん聞いていくと、会議の空気がどんどん重くなっていく。聞きたい事は聞けたので次の議題に移りたいと思うのに、議決内容とは関係ない方向へ話が展開していく。
なんでそんなに話を脱線させたがるんだと思うのは、僕だけなのだろうか?
「雑談は会議の後にして下さい。」と発言したいのをぐっと抑えて相槌をうっている自分がいる。

また、あれこれ熱心にサービスの説明や今後の展望を話してくれるのは大変ありがたいのだが、話した内容を全部資料にまとめて、メールで渡してくれたほうがWeb制作を進めるにあたって、どれだけありがたいか。

結局、公開1週間前で泊まり込んで作業するしかないのか。
見えない物を形にしていくプロセスに立ち向かって行きたい。

秘伝すごい会議
秘伝すごい会議
posted with amazlet on 07.12.29
大橋 禅太郎 雨宮 幸弘
大和書房 (2007/10/19)
売り上げランキング: 1001
おすすめ度の平均: 4.5
4 会議のやり方って、なかなか習えないのですが、この本を読めば盗める技法も多数。
3 内容は○、雨宮氏の解説は×
5 まさに実践編


2007年12月27日
空気読み切った

今日は楽しい忘年会。
当方、現職場にて与えられたポジションはいじられ役。
役を演じきっての、自己採点 7.5。

容赦ないムチャ振りには若干滑りつつも打率三割。タンバリン経験が功をそうした形。

明日は第二ラウンド。今日の反省を活かして役に磨きをかけるよ。
元気ないね。
大丈夫?
あいつは疲れている。
そんな疲れた顔すんな。
老けたね。
30代だと思ってました。
体に気をつけて下さい。


ここ1ヶ月、僕に投げかけられた数々の言葉から察するに、僕は誰からみても疲れた顔をしているらしい。

ここ数ヶ月はそれなりに充実した時間を過ごしていると思っていたし、色んな人と話す機会が広がって楽しめていると思っていたので、自分が疲れているとは思っても見なかった。

本人自覚がないが、これだけの人に言われたのだからまず間違いない。

僕は疲れているのだ。もしくは疲れが顔にでているのだ。

じゃあなんとか元気を出そう。元気のない人に回りは付いてこない。

◆生活改善10箇条

□ 朝聞く音楽はテンション高めの曲をセレクト

□ ネガティブなブログ記事は書かない
   
□ 挨拶と返事のボリュームを上げる

□ 作業中の独り言(つぶやき)はやめる

□ 朝昼晩、飯は我慢せず食べたいだけ食べる

□ 月二回はフットサルをする

□ いつもより高めの洗顔料を買う

□ 髪をさっぱり切る

□ 仕事を連続して作業し続けない。

□ 夜更かししないで寝る。

「なんか最近良いことあったん?」と5人以上に聞かれるまで生活改善だ。
今日もあれこれあってモチベーション低下。

今日は心で消化しきれず、態度に現れしてしまった。まだまだ社会人になりきれない。


原因を洗い出すと冷静になれると、とあるモチベーションに関する記事を見た覚えがあるので、今日1日を振り返って、キーになっているものをまとめてみる。

◆朝一でダメだしをくらう。

◆対応はしたが、ダメだしに更なる追求。

◆更に遅刻してきた人から同じ内容の再度ダメだし。

◆今週納期の仕事が蓋を開けてみたら思った以上にややこしかった。

◆納期ぎりぎりの状態に更に仕事追加。断るも却下。

◆逆恨み覚悟で仲間のミスのフォローに入るも自分の気持ちの行き場がなくなる。

◆節約のせいで空腹。

以上。
少し落ち着いた。
MINIOne05_800x600.png
中々興味ある記事と出会った。

車の色でわかる持ち主のキャラクター

所持している車の色で持ち主のキャラが見えてくるらしい。
車の色と持ち主のキャラクターは以下の通り。

 レッド   :外交的でエネルギッシュ

 オレンジ  :自信家でドラマチック

 ピンク   :思わせぶりで陽気

 グリーン  :おおらかでのんびり

 ブルー   :冷静で頼りになる

 グレー/銀 :努力家で野心的

 ブラック  :威厳があり、上品でミステリアス

彼は努力家で野心的、あの方は威厳があって上品でミステリアス。
あってる・・・のかな?イエローについての言及がないのが残念だ。

チョロQ NEWインプレッサWRX STD 16
タカラ (2007/04/28)
売り上げランキング: 18019
おすすめ度の平均: 5.0
5 インプレッサチョロQでは、最高の出来!!

205yamanote.png

「次の駅ってわかりますか?」

仕事からの帰りの電車の中で突然隣に座っていた人から声をかけられた。
察するに、その人はウトウトしてしまっていた間に、降りる駅を乗り過ごしたんじゃないかと心配になったのではないだろうか。

それにしても、電車の中で人にものを尋ねるなんて普通しないと思うので、その人には何か差し迫った状況があったのかもしれない。

ところが、声をかけられたのはいいが、かくいう僕も音楽を聞いていた上に、本も読んでいたので、今どの駅を通過したのかさっぱりだった。

僕は普段から、電車が止まるたびに、窓の外を見て、駅の雰囲気を
なんとな〜く感じ取って、自分が降りる駅かどうかを判断していることもあって、どこの駅まで電車が通過したかを全く把握していない。

仕方がないので正直に
「すいません、わかりません」
と答えてその場を乗り切ったのだが
いざ次の駅についたら、自分の降りる駅・・・。

大変、申し訳なく思いつつ、席を離れるのであった。

もうちょっと自分の通勤する各駅の特徴と名前ぐらい
把握しておこうと思う。

プラレール 205系 通勤電車 スカイブルー S-33
トミー (2003/07/31)
売り上げランキング: 6719

denwa.png

思いがけない人・懐かしい人・苦い人・好きな人・連絡を待っていた人・連絡を忘れていた人、
様々な人たちから連絡が来て驚いた日だった。

こんなに複数人から全く別の用事で連絡が来たことなんてこの街に来て一度もなかった。

自分を良い意味でも悪い意味でも覚えていてくれた人たちがいたことに
少なからず嬉しさが込み上げてきた。

思い出が温めてくれる、思い出が窘めてくれる。

あの年あの日あの時間あの場所にいて本当に良かった。
あの日あの時、全てを壊さなくて少し良かったと思えるようになった。

今、幸せではないけれど、不幸ではないと言い切れる状況があるのは、
あの日歩いた道のおかげ。

ちっぽけで狭い世界に閉じこもっているこんな僕に、手を差し伸べてくれる方々がいることを知り、
とても嬉しく思う。
css_img.png

◆Firefoxで背景が表示されない

これまでのWeb制作事例の中で、floatを使用して段組みした際、IEでは背景がつくのに、Firefoxでは背景が適用されないことがしばしばあった。

そんな時決まって、heightを指定して逃げてきたのだが、ちゃんとした解決策があったので覚え書き。

◆html
<div id="box">
<div class="boxleft">左側</div>
<div class="boxright">右側</div>
</div>


◆CSS
#box {
overflow: hidden;
}

#box:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html #box {
height: 1em;
overflow: visible;
}
/**/
2007年12月06日
途中まで順調だったのにタスクオーバーした、今日の敗因。

・計画の中に「予想外の事態」に対処する時間を含めなかったこと

・予想外の事態を引きずってしまった精神的弱さ

・仕事の範囲を明確に把握していなかったこと

・ほっておくと自分の仕事に支障をきたす、周りの方の仕事の進捗を確認することを怠ったこと

・徹夜すれば間に合うよと考える仕事感の狂いっぷり

・報練相の相が甘かったこと(報練はかかさなかったのになあ

先日インテル入ってる気分になったのに全く無意味。

色々改めねばならない、本当反省・・・。

とりあえず今日は寝て、明日改善を考えよう。

intel.png

今日の朝の山手線はインテル広告一色だった。

インテル製品に対する様々なアンケート結果を
カラフルなグラフで表現した不思議な広告だった。

これで乗車扉上の動画もインテルだったら完璧だよなと思って
振り向いたら、案の定インテル。

ああなんと抜かりない。

人のいる空間全体を広告で包み込むのってある意味洗脳に近い行為。
さすがにインテル製品を衝動買いとまではいかないけど、
気分はインテル入ってる。

企業には今朝のように朝を楽しくする趣向を
凝らした広告を出して欲しい。

アップルやグーグルがどんなコンセプトで
電車内を埋め尽くすのか考えただけでもワクワクする。

ちなみに山手線で広告を出すのにかかる費用は下記くらいかかるとの事。
どんだけ〜。

◆山手線
2日2,700枚
シングル(515mm×364mm)
2,100,000円

ワイド(1030mm×364mm)
4,200,000円

JR東日本 中吊りポスター料金表
WEB制作会社-株式会社CUPPY (クーピー)

面白法人KAYACとWEB制作会社-株式会社CUPPY (クーピー)がサイトリニューアルする際に参考にしたというサイト一覧。1,500に及ぶ参考サイトの中からピックアップされたアイデアの原石たち。

KAYAC CUPPY サイトリニューアル解説
★さすがといわれるレベル★CMSのようなブログっぽいつくり★実績メインの紹介系(白ベース)★他★写真メイン系★他、ピンポイントで面白いところを発見



ウェブデザイン―戦略的ビジネスサイト構築のための情報誌 (Vol.1)

日経BP社 (2002/04)
売り上げランキング: 365002
おすすめ度の平均: 5.0
5 制作例から制作ノウハウまで完全網羅

2007年12月02日
yokohamafc01_1024_768.png

カズが三浦カズが大一番でやってくれました。
アシストするのがカズなら、決定機を外すのもカズ、三浦カズ。
現役日本代表DFを抜き去るのがカズなら、体力が最初に尽きるのもカズ、三浦カズ。
浦和レッズまさかの敗戦の原因はカズ、三浦カズ。

浦和の連覇を色んな思いを込めて期待していたので非常に残念。

このままクラブワールドカップに引きずらない事を願います。
css_img.png

最近知った勘違いしていたCSS。

◆Underscore HackとStar html Hack
両方IE6以前のブラウザに独自指定するハックだが、微妙な違いがある。
これまで記述が簡単という理由でUnderscore Hackを利用していたが、
Star html Hackのほうが利用されているという事を最近知った。

その理由を順を追って説明すると以下の通り。

1.Underscore HackはCSSの「宣言」部分で使用される
2.ハックの記述は本来の表示指定と異なるため、通常の表示指定とは分離した方が良い
3.例えば、将来的に全てのハックのみを抜き出して外部スタイルシート化する際、宣言部ではなくセレクタレベルのハックを使っていた方が効率が良くなる
4.最期に_より*htmlの方が視覚的に目立つ

*追記(07-12-09):: なにより、Underscore Hackは「CSS Validator」で、そんな宣言はないとエラーを吐く。Star html Hack はエラーにならない。


Underscore Hack
#hack {
width: 400px;
_width:300px;
}


Star html Hack
#hack {
width: 300px;
}

*html #hack {
width: 400px;
}



◆line-heightに対する指定
これまで行の高さの指定の際、%で指定していたが何もつけない方がいいらしい。理由はline-heightで指定したテキスト範囲内に別のサイズの文字が入っていた時に計算が上手く行かないためとの事。

行の高さを文字サイズの1.5倍にする
#line {
line-height: 1.5;
}



まだまだ勘違いがザクザク出てきそうなので、後日追記する。

[ 追記した ]


実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips
市瀬 裕哉 福島 英児 望月 真琴
九天社 (2007/02)
売り上げランキング: 1359
おすすめ度の平均: 5.0
5 結局、これが一番良い。
5 ボックスハックで泣かされた方に
5 基本から応用までしっかりサポート!

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。