HOKYPOKY.BLOG

どこまでCSS?

ちょっと案件で悩んだのでメモ。コーディングレギュレーションに関わるのでまだ雑多としたイメージですが。

どこまでCSSを使うかという話。

そもそもCSSはなんで使うのでしょうか?
情報とデザインの分離とはなんで必要なのでしょうか?

よく言われているのが

  • SEO
  • 情報とデザインの分離
  • ユーザビリティ
  • 更新性、管理のしやすさ
  • 流行り

他にもいろいろあるのですが、要するにこれらは目標であってCSSを使うことはその一つの手法にすぎず、唯一解ではないということです。

やっぱり複雑なことをやると破綻が待っているようで、普通に考えるとあまり複雑なことをしないのが一番ユーザビリティが高いのではないでしょうか。

たとえば画像置換法という方法があって本当のテキストを左の遥か彼方へ飛ばして、背景画像を表示する方法です。

.target {
background: transparent url(img.gif) no-repeat left top;
text-indent: -9999px;
text-align: left;
overflow: hidden;
}

といったソースで実現するのだけど、これでは印刷時に画像が表示されません。
その辺りを考えると、印刷用CSSを作ってもいいのだけど、これもこれで「このヴィジュアルを印刷したい」といった趣旨であれば印刷されません。

そもそも印刷はなんでするのか?なんて考えると、その答えは様々で一つに絞れません。
例えば印刷時に見やすいレイアウトにするのであれば印刷用ページを作成するのが一番手っ取り早いと思ったりもします。それこそブログなんかではそれが容易です。

経験上大規模サイト(100ページ以上)では情報とデザインの分離は必要だとは思いますが、それこそHTML+CSSだけではなくCMSとの連携が必要不可欠で、どちらかというと情報はDB、デザインはHTML+CSSとしたほうがいいでしょう。
逆に十数ページといったサイトであればリニューアルの際に「絶対に」コンテンツ部分も変更になります。HTMLとCSSを両方直すことになります。
であればもとからHTMLにある程度のデザイン情報(例えば画像など)を持たせてしまってもいいと思います。

このあたりの話はまだ頭のなかで最適解がでていないのですが、きれいなHTMLと潔癖なHTMLはちがうんだなと思うようになりました。
きれいなHTMLは保守のため。潔癖なHTMLはエゴ。

つまり、こういう話をしたところで実際に閲覧にきている人は「訳の分からない話」であり、とにかく「きちんと表示されていればOK」なんですよね。
あとはGoogle先生に気に入られれば実はそれ以上のことって必要ないなと思いました。

語弊を産む考え方ではあると思うけど、結構HTMLやっているとおちいる悩みだったりするんですよね。

それと似たことで最近は「この世の中をどう捕らえるか」がテーマになっています。

たとえば絶対的な力を持ってすれば、法や世界のルールをも上書くことができる。
倫理っていうものは本当にしていいことなのかどうかというのは「今のこの世の中」でのバランスを保つためのものだったりするんだろうなー。

でもボクはそんな力をもっているわけでなく、そうすれば「この世の中をどう捕らえるか」という話でいえば、平和を願うこと、常に自分の目で確かめて考えるということぐらいしかできないですね。
どこかのブログで読んだんだけど、デザインとは「混沌に秩序を生み出すことや」という言葉があって、実にそうあってほしいな、と。

わーわー長くなりました。

Flash 100%の配置、FirefoxとDOCTYPE

何か今更な気がするし、こんなん余裕なはずだったんだけど、一応メモ

Doctypeを互換モードにするというやり方もあるんだけど、標準モードでこれをやる方法。

  • XHTML1.0 Transitional/Strict
  • Flash縦横100%

サンプルソース (HTML)

(ヘッダーまで省略XHTML1.0 Transitional/Strict)

<body>
<div id="swfArea">(SWFのソース)</div>
</body>

サンプルソース (CSS)

* {margin: 0; padding: 0}
html,body,#swfArea,object,embed {
    width: 100%;
    height: 100%;
}

超初歩的ですね。
つまり、htmlタグからobject,embedタグまで全てのheight, widthを100%にすること。
html,bodyの隙間をあけないこと。

画像とかの横にあるテキストを上下中央に via CSS HappyLife

CSS HappyLifeさんで知りました。

CSS HappyLifeは制作会社digiperが前の家が近かったのと、職業が一緒なのでよく見てます。
しかしこれはホント助かる!

HTML

<div class="selector">
<p class="image"><img src="dummy.img" /></p>
</div>
<p>
あああああああ<br />
いいいいいいいいいい<br />
うううううう<br />
ええええええ!!!???<br />
おぉぉぉおおおO!!
</p>
</div>

CSS

div.selector p {
display: table-cell;
vertical-align: middle;
margin: 0;
}

/*for IE6 */
* html .selector p {
display: inline;
zoom: 1;
}
/*for IE7 */
*:first-child+html .selector p {
display: inline;
zoom: 1;
}

デモはこんな感じです。

IEhackがのところがすばらしいですね。