Home > Archives > 2006-04
2006-04
太いのにもほどがある：ダストレス太字チョーク
- 2006-04-25 (Tue)
- なんとなく
太いのにもほどがあるのでは。普通のチョークと比べるとあきらかに太すぎる。日本理化学工業株式会社の資料によると「通常品サイズの約９倍の体積で長持ちします。サイズ125mm×24mm」とある。太さ24mmというとチクワぐらいか。チクワ大のチョークを手に野太い文字で授業する教師。
何だかほほえましいですね。
Continue reading
- Comments: 0
- Trackbacks: 0
XHTML+CSSのガイドライン
- 2006-04-22 (Sat)
- CSS
最近新しく作るものに関しては(X)HTML+CSSで作るようにしている。感覚的になんとなくこうかなあと模索しながら作っていて、本当はなにが正しいんだろと思ってたらいいタイミングで以下の資料を見つけた。
『CSS Nite Vol.7 Web制作現場の対立を解消する！(X)HTML+CSSガイドライン作り』
を見て感動したので、忘れないうちに気になったところをメモ。
■ビジュアルとテキストのバランスは、サイトの雰囲気などイメージ作り/ブランディングに影響する。何でもテキストにすればよいわけではない。
↑これは一度失敗しました。目立たせたいパーツやSEO的に必要ない箇所は画像でも良いなと。なにごともバランスですが。
ガイドラインの必要性
誰が作っても一定の品質を確保できる
制作チーム、更新チーム、外注、クライアント間での「無駄」の発生が防げる。キーパーソンが抜けても比較的スムーズに穴埋めできる。新しいスタッフが一定の品質のサイト/ページをアウトプットできるようになるまでの期間を短くできる。
社内にノウハウが残る
現場のノウハウを体系化し蓄積できる。
↑これはほんとそう。ガイドラインがあることで作業をモジュール化できるのだ。
基本はdiv要素+id
必ずしもdiv要素ではなく意味的な要素 (p、ulなど) に直接idづけしてもよいが (それが理想)、現場の混乱が予想される場合は「必ずdiv要素でラップし、idづけする」と決めておく。
↑idとclassの使いどころは決めておかないと。
カテゴリーごとにスタイルを変える場合、 「body#shopping …」「body#careers …」といったかたちでbody要素につけたidを頼りにスタイルを設計 (id名はディレクトリ名と同じにしておく)。
↑カテゴリーごとに大幅に違う場合はこれでよいかも。固定レイアウト要素は同じで中身のコンテンツ部分だけ違う場合は、このスライドで言う「div#content」の部分だけ分ければ、まとめて指定する要素が減るので作りやすいと思う。
見出し要素は難しい
見出し要素の理想的な使い方は次のとおり (ISO-HTMLに基づく)。
* h1要素から出現すること
* 途中の見出しレベルを飛ばさないことただし、ページ構成によっては、ある見出しレベルを使うことが躊躇されたり、ページ間で統一的なマークアップルールを設けている場合、このような階層構造を逸脱しなければならない場合もありうる。
↑見出しはほんとに難しい。ページごとに要素の数が違う場合が多いので統一するのは大変。コンテンツを作る段階から構造を意識して作るべきではある。
* 1つのページでh1要素が複数出現しても仕様 (構文) 的には全く問題はない。
↑これを聞いて安心しました。あまり使わないけど。
h1要素では各ページ固有の内容を定義すべき?
とすれば、すべてのページに共通のロゴをh1要素で定義するのは間違いということに (トップページぐらいしか妥当しない)。
では、h1要素でどの内容を定義すべき?* トップページはロゴ、キャッチフレーズ (キービジュアルにキャッチフレーズを含めている場合はその画像) 、または固有のページタイトル。
* 他のページは固有のページタイトル。
↑なるほど。これはほんとに今日の仕事中に思った。ロゴがh1である必要性は無いわけだ。
idはどのページでも同一の要素タイプでしか利用しないケースが多いが、classは複数の要素タイプで利用する場合もある。そのような場合にだけオープンにしておき、通常はきちんと要素タイプをつけておく。
↑classの使いどころが見極められると、もっとすっきり書けるのにと思いますねほんと。
なるべくツリー構造を丁寧に (子セレクタ的に) 書いておいたほうがよい。CSSを見ただけでツリー構造が把握できるため。
↑誰が見てもわかりやすように。自分でも時間が経つとわからなくなってしまうので。
プロパティの指定順序
Mozilla.orgの外部CSSで示されている順序が参考になる。
1. 視覚整形モデル
2. ボックスモデル
3. 背景と前景
4. フォントとテキスト
5. 生成内容
↑暗黙の了解というか何となく感覚的にはこんなふうには書いてるけど、これもルールが必要。「float、clear、displayなど」＞「margin、padding、border」＞「font、letter-spacing、align系など」ざっくり言うとこんな順番てことか。
きちんとルールを設定することでクオリティを保ち、かつ効率的に制作をすると。何にでもあてはまりそうな教訓ですね、これは。
Continue reading
- Comments: 0
- Trackbacks: 1
クライアントとの関係性
- 2006-04-19 (Wed)
- WORK
どちらがよいのだろう？
クライアント側がとある依頼をしてきた。プロのあなたから見ると、いまいち効果的ではないように思える。もっとこうしたほうがよくなるのに、というプランはすぐに思いついた。そこであなたならどうする？
A:とりあえず依頼どおりのものを作る。方向性に関しては依頼者が自分で気づくか、やってみて「効果が出ない」という結果がでるまでとりあえず待つ。
「やっぱだめっぽいからこうして」というリスクあり。効果が無かったり、馬鹿にされたりして「何で教えてくれなかったの？」と、あとから文句を言われたときにどう対応するのか。
個性を生かすというか、相手を尊重し自分で考えさせる。子供を育てるとかならありな方法論ではあると思う。がビジネスではどうよ。とにかく効率が悪すぎる。
B:一応要望は受諾し、それに合わせてこちらからプロとして最善の提案をする。全部否定とかするのは論外だが、こうしたほうがもっといいですよと。（俺様が正しいんじゃ、的な人はあきらめて言われたとおりにこなす）。
せっかく考えたのにとか、愛着やプライドなどメンタルな部分をどういう位置づけに置くかというのも人間関係として大事ではあるが、そういう素人考えのアイデアを会社のものとして世間にパブリッシュするという危険性と損害（ブランドイメージや機会の損失）を真剣に考えなくてはいけない。
- Comments: 0
- Trackbacks: 0
CSSの「height:100%」について
- 2006-04-09 (Sun)
- CSS
CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。
テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル（横幅のみ表示枠ぴったり）
なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。（参考：height: n%;の正しい仕様 - Web標準普及プロジェクト）
なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル（縦横表示枠ぴったり）
html,body{
height: 100%;
}
これを応用して、よくある「ヘッダー＋サイドメニュー＋コンテンツ＋フッター」の2カラムレイアウトを、表示枠ぴったりで作ることができる。サンプル（表示枠ぴったりレイアウト）
注意点としては、以下の通りです。
- フッターは「posiotion:absolute; bottom:0px;/*数値はお好みで*/」で親要素のbottomからの距離で配置。
- レイアウト要素の大きさは”%”指定で（pxなどで固定すると中身のmenuやcontentがはみ出る。なぜ？）
- ページの中身が表示枠に収まらない場合には適さない（「overflow:auto;」の指定で収まりきらない場合はスクロールバーが出るのだがいまいち）
まだまだ改善の余地ありですが、固定のレイアウトにしたい場合などはいいんじゃないでしょうか。
*{
margin:0px;
padding:0px;
}html,body{
height: 100%;
}#container{
width:100%;
height:100%;
}#header{
width:100%;
height:10%;
background:#009900;
}#menu{
width:20%;
height:87%;
float:left;
background:#ccc;
overflow:auto;}
#main{
float:left;
width:80%;
overflow:auto;
}#footer{
clear:both;
position:absolute;
bottom:0px;
height:3%;
width:100%;
background:#009900;
}
- Comments: 0
- Trackbacks: 0
花粉症に効果絶大？マスク2.0
- 2006-04-07 (Fri)
- なんとなく
■私は重度の花粉症である。毎年この時期になると憂鬱で、花粉が飛び回る前に恐怖のあまり考えた花粉症対策新型マスクをご紹介。
←まず通常のマスク。立体型のものも発売されてなかなか快適ではある。が、吐息で口の周りが蒸れるのと眼鏡をかけていると、マスクの隙間から漏れる吐息で眼鏡が曇ったり、食事の際には外したりとなかなか大変。
←なので鼻だけマスク
←パーティなどではつけ鼻タイプもお勧め
←もうちょっとしっかりしたバージョン・・・
←上のやつを発展させるとこうなります
←もうこんなんでもいいや。実際ひどいときは、ティッシュをよって、こんなふうに鼻の両穴に刺してました。
まあしかし今年は飛散量が少なく、症状も軽くかなり済んだので、上記のマスクを用意するには至りませんでした。来年はどうだろう。
- Comments: 0
- Trackbacks: 0
Home > Archives > 2006-04
- Search
- Feeds
- Meta