2009年9月 Archive

便利なはずのreset.cssやdefault.cssを使うことによる弊害

reset.cssやdefault.cssなどで
以下のように要素をリセットしておくと、コーディングするとき便利なんですが、
弊害もいろいろあるから困りもの。

div,p, pre, ul, ol, dl, dt, dd, hr,
address, form, blockquote, noscript {
line-height: 1.5em;
text-align: left;
display: block;
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
border: none;
}
em, strong, q, dfn, code, samp,
kbd, var, cite, abbr, acronym {
margin: 0px;
padding: 0px;
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
line-height: 1.0;
margin: 0px;
padding: 0px;
}
table {
font-size: 1em;
margin : 0px;
padding: 0px;
empty-cells: show;
border-collapse: collapse;
border-spacing: 0px;
border: none;
text-align:center;
}
caption,th {
text-align:left;
}
fieldset,img {
border: none;
}
img { -ms-interpolation-mode: bicubic; }

ul, li , ol, dl, dt, dd {
list-style-type: none;
}
ul img,
dl img,
ol img,
object, embed {
vertical-align: bottom;
}
hr {
height: 0px;
border: none;
margin: 0.5em auto 0.5em auto;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
clear: both;
display: none;
}


困りものその1


Movable TypeやSerene BachといったCMSに落とし込んだとき、
本文入力欄のタグ挿入支援ツールを使い、
右寄せ中央揃えボタンを押した際に、
入力欄やプレビューでは反映されるのに、
実際生成されたhtmlには、左寄せのままで、指定が反映されない(・ε・`)といった現象。

例えば、
挿入ボタンで挿入されるタグが
<p align="right"></p>
だった場合、
pのmarginが、resetやdefaultでmargin-leftもmargin-rightも0に指定されちゃってたりするから、寂しいかなrightは無効になっちゃうっていう罠なんですね。

なので、pに対してmarginは指定しなくて、もはや良かったのでは?
のような。

margin0で、ぴたっとくっついて欲しい#box pとか.box pとかって、そこで個別にmargin0に指定すると思うし。
デフォルトで0にしちゃったがために融通が利かないことがよくあります。
メリットは大してなく、デメリットだけ出てきちゃうなら、むやみに0にするのって、効率悪いんですよね。

コーディング覚え立ては、誰かのcssを参考にしたり、完パクするのも大切ですが、
1サイト任せられて、サイトまるごと構築できるくらいになったら、自分流のcssやデフォルトを持つことになると思います。

でないと、自分の理論上は成立するはずなのに、現実その通りにならない、なんてことが出てきやすいですね。
自分で一から作ったものなら、もう少し柔軟に進められそうです。

もちろん、会社内や、制作チーム内で、ある程度のガイドライン、制作上のルールは、統一化しないとっていう課題もあるんですが・・・
難しい問題です。
バランスが大切ですよね。


htmlやタグをある程度分かっているお客様が、せっかく得た知識を活用してタグを使ったり、ブログ記事でタグボタン使ったりしたとき、
<p align="right"></p>
が効かないサイトなんて、悲しいじゃないですか。

いちいちブログのタグ挿入ボタンから生成されるタグを
<p style="text-align:right"margin:auto;></p>
にカスタマイズする覚悟はあるんですか?て話。

なんて、ちょっと語ってみました。


P.S.困りものその2は・・・?
>ないです。

Movable type カテゴリの選択順が基準カテゴリに反映される

カテゴリの選択順が基準カテゴリに反映される

Movable type カテゴリの選択順が基準カテゴリに反映される

そうなんですよね・・・。
この記事の通りなんですよね。

なので、

例えば、個別記事ページで、パンくずリストを出すときなど
記事によってまちまちになるんですよ。(ほんとに?)

HOME>親カテゴリ>子カテゴリ>記事タイトル

HOME>子カテゴリ>親カテゴリ>記事タイトル

とかになっちゃったり・・・

うまく表現しづらいんですが、
選択する順序が混在してしまうと、あとあと表示の制御が面倒だったりするんだなぁ、と、気付きました。

IE6 vs 最新版 = 北風と太陽のようなものかな

「IE6はもういらない」――Web企業が撲滅キャンペーン

かなりヒステリックな運動ですよね^^;
制作者にとっては必死の叫びなんですが、
ユーザーからしたら、絶対実感わきません。

おそらくこの問題って、よくいう「北風と太陽」のようなものかなって思います。
コートを吹き飛ばそうと、北風が強く吹き付ければ吹き付けるほど
旅人はコートを着込んでしまうように、
IE8に変えろ変えろと言われれば言われるほど、
なんでそこまで言われないといけないの、放っといてくれ、使い慣れたブラウザ使って何が悪いの、
とますますユーザーはIE6から変えたがらなくなる気が・・・。

ここはひとつ、視点を変えませんか?
ていうより、本来なぜIE8をや最新のブラウザを推奨しているのかの、本質的な理由を、誠意をもってユーザーに伝えてみるのはどうでしょうか?

Internet Explorer 6 (IE6)ではダメな理由って、何?

・最新版に比べて速度が極端に遅い ・セキュリティが低い ・ブラウザの仕様が古いため、せっかく多機能なHPも、IE6で見ている人には動作しないケースが増えている
IE8 を使うメリットは?

今でも IE6 を使用している人が「わざわざ IE8 にアップグレードする」、もしくはその他の最新ブラウザを使用するために示せるメリットはどのようなものがあるだろうか。
この点についても各方面に聞いてみた所、一般ユーザーにとってのメリットは以下の2つが大きいと感じた。

・表示速度が速くなる
・セキュリティ対策が改善される

Internet Explorer 6 (IE6)ではダメな理由って、何?|ALPHA LABEL: アルファラベル

IE8や他のブラウザにアップグレードすることに対する不安や障害とは?

・見た目が変わる ・メニューなどの使い勝手が変わる

慣れた環境から、慣れない環境へ変わるのは、結構メンドーなものですよね。
でも、思い浮かべてみれば、
毎日、もしくは毎週使うものって、はじめの2、3回は
「前の方が早く作業できたのに」なんて思うものですが、すぐに慣れてる自分がいません?

ていうか、最新版のWEBツールですもの、
使い勝手も改善されているわけで、
使いにくくなるなんて、まずないです。

ぶっちゃけ、自分が慣れてしまうまでの問題です。

と、熱く語ってみても、とあるブログの1ページで、何を叫んでみても、誠意は伝わりません =3

友達だったら、家族だったら、あるいはクライアントの担当者だったら、
ちゃんとサポートします。
そう、詳しい友人がすぐ聞ける距離にいれば、
きっと新しいことも、安心してやってみよう!になるんですよね。

TRYする気持ちになってくれる人が、これからたくさん現れますように☆
私の身の回り友人のサポートは、私がメンドウ見ます☆

1