メイン

2007年5月 5日

報告-このブログのテンプレートをデフォルトに

このブログのテンプレートをデフォルトにもどしました。CSSも、ありものです。

いろいろ、思うところあって。

2006年5月11日

MovableTypeのコメント欄でMacIE5xが文字化けに対処

※この記事は、2005年7月3日に公開した記事を加筆修正したものです。意外とアクセスがあるみたいなので。

UTF-8コードのコメント欄等にコメントを書き込もうとすると、MacIE5では文字化けする。MacIE5のバグといっていいだろう。MovableTypeのデフォルトはUTF-8なので、ほとんどのブログサービスでもこのバグのせいで、MacIE5でコメント等が書き込めない模様。

原因は、MacIE日本語版の、デフォルトのUTF-8コードの文字設定がTimes New RomanやHelvetica等になっているため。現状ではこの仕様のため、ほとんどのMacIE5ユーザーはコメント欄にコメントを(日本語で)書き込もうとすると、文字化けしてしまう。

自分でブラウザの設定をいじり、UTF-8コードのフォントを日本語フォント(Osakaとか)に変えてくれれば書き込めるようになるのだが、まあそんな事に気づいてくれる人の方が少ない、たいていはサイトの方が悪いと思うだろう。というわけで、対処法。

続きを読む "MovableTypeのコメント欄でMacIE5xが文字化けに対処" »

2006年1月 9日

WinIE5x対策で「w\idth」

MovableType3.2のデフォルトCSS研究 第2弾。IE5X対策の「w\idth」など、「\」を使う方法。
MovableType デフォルトCSS研究: WinIE5x対策で「w\idth」も参照。

.archive-header
{
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;

margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

続きを読む "WinIE5x対策で「w\idth」" »

2006年1月 8日

レイアウト配置用クリア IE6配置ずれバグ対策ほか

MovableTypeのCSSを研究シリーズ、第1弾(って、「第2弾」があるかどうかわからんが)。人に読ませるためというより、個人的メモの色彩が強いのであしからず。

MobavleType3.2のデフォルトCSSは、トリッキーなCSSも積極的に利用したかなり考えられたものになっているっぽいので、ちょっと研究してみようと思った次第。参考までに、MovableTypeデフォルトのままいじっていないMovableType デフォルトCSS研究ページも新設した。

さて、まずは「.pkg」部分をメモ。
MovableType デフォルトCSS研究: レイアウト用のfloat等をCSSでクリアするためのpkg

続きを読む "レイアウト配置用クリア IE6配置ずれバグ対策ほか" »

2005年9月24日

Frefoxで、時々a:hover時に変な線が出るバグ

「Frefoxで、時々a:hover時(アンカーをマウスオーバー時)に変な線が出るバグ」があるわけだが、これの対処方法がよくわからん。

対処方法以前に、出現条件などもよくわからんのだが、たまたま1度うまくいったバグ回避方法方法をメモしておく。

続きを読む "Frefoxで、時々a:hover時に変な線が出るバグ" »

2005年8月27日

MacIE5で、背景画像が消える

あんまりブログの更新をおろそかにしていると、死亡説が流れるので(?)、更新しておきますか。

しばらく久しぶりに仕事でCSSレイアウトしたんですが、かなり体がなまってた。基本的なCSSの書き方とかバグとかもうっかり忘れていて、ブラウザでプレビューして「しまった、これはIE5.5で駄目だったんだ」とか思い出す始末。おかげで想定よりかなり作業時間オーバーしてしまった。

で、そんな作業時間を取らせてしまったバグのひとつ、「MacIE5で、背景画像が消える」をメモ。

続きを読む "MacIE5で、背景画像が消える" »

2005年6月14日

RSSについての参考文献

RSSについて、個人的に調べたものの備忘録。本当は自分の言葉でまとめたいんだが、その気力が無い。で、検索して斜め読みして、とりあえずリンクだけ。必要なら、あとでじっくり読む。

RSSの要約配信はさらに加速する
基本的な仕様など。よくまとまっている。RSSは1.0も2.0もそんなに難しい規格ではないが、迷うことがあったらここ参照。

重要なのは Permalink と RSS
なるほど、いわれてみれば気づきそうで気づかなかった。RSSと固定リンクは一対なものだな。これはブログのハナシだが、RSS配信するどのサイトにもいえるだろう。

続きを読む "RSSについての参考文献" »

2005年6月 7日

MovableType 記事作成時に追加できるhtmlタグを増やす

すまん、これは完全に私的な業務メモだ。

【MovableType 3.16】
MovableType 記事作成時に利用できるhtmlタグを増やす
mt/tmpl/cms/edit_entry.tmpl

179行目「if (canFormat)」の項に追加すればよい。
画像は【例】mt/images/html-h3.gif

続きを読む "MovableType 記事作成時に追加できるhtmlタグを増やす" »

2005年4月29日

そろそろIEをはじくCSSも整理しておきますか

CSSレイアウトで一番悩まされるのがIE5xとIE6で表示が違う点だろうが、じゃあIE5xを無視して考えて、IE6だけに絞れば大丈夫なのか、というとそうでもない。IE6は6で、Firefoxなど他のブラウザが当たり前に実装しているスタイルに対応していなかったり、IE6になっても修正されていないバグもある。

というわけで、そんな時に対処療法的に使えるスタイルをメモ。基本的にはValidなCSSで、IEが対応していない、結果的にブラウザを振り分けて指示ができる、というものを2例ばかり。

続きを読む "そろそろIEをはじくCSSも整理しておきますか" »

2005年4月 8日

悪いのはCSSでもテーブルレイアウトでもなく

結局見積するのも、デザインするのも、進捗管理をするのも、サイトを更新するのも「人」ですから。

CSSによるデザインはそんなにコストがかかるのか?

以下、引用ばかりになるが、つい先日「半CSS半テーブル」でやっつけ仕事にしてしまった私にとっても、ちと頭の痛い話だ。

続きを読む "悪いのはCSSでもテーブルレイアウトでもなく" »

2005年4月 5日

CSSを薦める人はショッカー扱いですか?

おいおい、「Webデザイナー」の皆様は、ホントにみんなこんな事思っているのですか?
CSSレイアウトの利点と需要

デザイナーにとってCSS習得は簡単なものです。が、
お客様側にしても、全面CSSにしてしまうと、更新・メンテナンスが非常に困難になります。制作者側にしても、体制をじっくり整えない限り、チーム間制作の工数も引継ぎも、そしてそれに伴う制作料金(お見積)も増すばかり。特にブラウザ対応が相当痛いのが困る。

まず、「デザイナーにとってCSS習得は簡単なもの」と言い切ってしまう点で、四苦八苦してる私は頭があがらないわけですが、とりあえずこの件はスルー、問題は次。

続きを読む "CSSを薦める人はショッカー扱いですか?" »

2005年4月 2日

Win Ie5x対策 幅を指定したら余白は0に

たまたま訪れたサイトで、自分のサイトが紹介されているというのも、なんか不思議な感じだ。

IE5.xでのボックス表示を修正する

上記サイト「小粋空間」は、Movable Typeをカスタマイズする時に参考にして、ブックマークしていたものの、その後カスタマイズはほとんど行わなかったので、ウォッチしていなかった。

続きを読む "Win Ie5x対策 幅を指定したら余白は0に" »

2005年2月 5日

トップページのみデザイン変更テスト中

トップページをプチリニューアルしてみた。

ほとんどHTML自体は変えてない、少しidやclassを足し引きしただけ。あとはCSSで処理。HTML部分はほっといてCSSだけいじればいいから、こういうときいいよな。CSSって素敵だな。

続きを読む "トップページのみデザイン変更テスト中" »

2005年1月29日

ウェブページの背景色とテキストの色

うーん、このサイトのブログをレイアウトしなおしたのっていつだけ、9月だったか?Movable Typeの独自タグにも慣れてきたし、
そろそろもう一度レイアウトしなおしてみようと思ったわけですが。

でその新レイアウト案を考える際、背景色とテキストの色って、みんなどうしてるのかなぁ、って思って、ひととおり好きなサイトをぐるっと回ってみた。

やっぱり基本は背景白が多いが、たとえば隊長のとことか、R30氏のとことか、ほとんど文だけのサイトで、しかも濃い色の背景に薄いテキストなわけだが、こっちの組み合わせの方が断然目が疲れないんだな、これが。

続きを読む "ウェブページの背景色とテキストの色" »

2005年1月16日

CSSをMacIe5xにのみか、以外か

MacIe5系は、CSSを一応サポートしているが、挙動が他のブラウザとも、WinのIE5・6系とも違うことが多々ある。

というわけで、そんなときは、通常のCSSを先に記述し、あとからMacIE5xのみ読み込む形式のCSSを上書きするか、あるいはMacIE5xでバグのあるCSSはMacIE5xに読み込ませない形で回避させるか、だいたいどちらかになると思われる。

続きを読む "CSSをMacIe5xにのみか、以外か" »

2004年11月13日

NN4xのみを個別にはじくCSS

ええ、このサイトは確かにHTMLとCSSを解説するサイトでしたよ。

しかし、タイトル「HTMLとCSSを使いこなす」のHTMLはいつのまにか「ゴッゴル」になってしまい、CSSの記事も、気が付けば8月1日より更新なし。すみません、私もいろいろやりたいことが他にあったもので。。。

で、本題の件「NN4xのみを個別にはじくCSS」についてメモ。

続きを読む "NN4xのみを個別にはじくCSS" »

2004年8月 1日

Win IE5xだけ別のCSS 2

通称Mid Pass Filterなどと呼ばれている。

@media tty {
i { content:"\";/*" "*/}} @import 'winIe5.css'; /*";}
}/* */

これを利用すると、WinIE5xだけに'winIe5.css'を当てはめることができる。

なぜWinIE5xだけこれが適用されるのか、原文みても半分くらいしかわからないが・・・

まず、@media ttyのttyは、文字幅が固定の機器のみ適用、という意味。ちなみにこのメディアタイプに対応した機器は今のところないらしい。

i { content: もあまり使わない表現だ。contentプロパティは要素の直前や直後に任意の文字列や画像を挿入できるもので、擬似要素after・beforeなどとともに使う。
たとえばi { content: "【引用】" }
などとすれば、iの度に自動的に「【引用】」と表示されるらしい、ただしNN6以上・opera6以上だけしか対応していない。(私自身も試していない、HTML辞典からの引用)

どっちにしろ、ttyメディアに対応した機器がない現状では、すべてのブラウザでまったく無意味な指定。

続きを読む "Win IE5xだけ別のCSS 2" »

Win IE5x以下以外だけCSSを適用させる

通称High Pass Filterとよばれている。
下記のようにすると、WinIE6、Opera、NN6以上、MacIE5x、safaliなど上位ブラウザにはstyle.cssが適用されるが、IE5x以下やNN4x以下など過去のブラウザにはCSSは適用されない。

@import "null?\"\{";
@import "style.css";
@import "null?\"\}";


これを実際に使うとなると、

@import "winIe5.css";
@import "null?\"\{";
@import "style.css";
@import "null?\"\}";

のようにし、まずwinIe5.cssでIE5x対策のCSSを書き、後からIE6など新しいブラウザ用の正しい"style.css"に書き換える、ということになるだろう。

この方法の弱点

続きを読む "Win IE5x以下以外だけCSSを適用させる" »

2004年7月31日

CSS関連 リンク集

CSSに関連する有益なサイトのリンク集を作っておこうとふと思った。

http://cssbug.at.infoseek.co.jp/index.html
http://dithered.com/css_filters/index.html
http://tantek.com/CSS/Examples/

http://www.stylesheet-stylebook.com/archives/tipe3.php

続きを読む "CSS関連 リンク集" »

Win IE5-6を簡単にはじく

htmlのhead内でConditional Comments for Internet Explorerを利用すれば、IE5-6だけ別のCSSを読み込ませることが可能。

<!--[if lt IE 6]>
<style type="text/css">
@import url("winIe5.css");
</style>
<![endif]-->

上記の場合、IE6以下、つまりIE5xにはwinIe5.cssが適用されることとなる。

なお、このConditional Comments for Internet Explorerは、WinIE4.x以下には実装されていない。

if内のコメントの違いによるバージョンの振り分けは以下のとおり。

<!--[if gte IE 5]> IE 5.0 - 6.x
<!--[if IE 5]> IE 5.0
<!--[if IE 5.5000]> IE 5.5
<!--[if IE 6]> IE 6.0
<!--[if gte IE 5.5000]> IE 5.5 - 6.x
<!--[if lt IE 6]>IE 5.0 - 5.5

この方法の弱点

続きを読む "Win IE5-6を簡単にはじく" »

NN4x、IE4x以下のブラウザにCSSを読み込ませないようにする

バージョン4世代(IE4x、NN4x)のブラウザは、CSSの実装が中途半端だったり、バグが多い。CSSを本格的に導入するときは、 これらのブラウザにはCSSを読み込まないようにする必要がある。

@importや、外部スタイルシートリンク時のmedia指定を利用すれば、比較的簡単にそれが可能。

NN4.xをはじく
link rel="stylesheet" href="styles-site.css" type="text/css" media="all"
のように、 mediaの指定にscreen以外、つまりallを指定すれば、NN4x以下のブラウザは読み込まれない。
同様に、style type="text/css" media="all"
なども有効。
また、 media="screen, projection のように、複数の指定を行ってもはじくことができる。

IE4.xをはじく
@import "styles.css";
@import url('styles.css'); ではなく、「url」をとる。
これを使うと、IE4xとNN4x、ともにstyles.cssは読み込まれない。
ただし、WinのNS 4.0 - 4.04 でこれを指定すると、ブラウザがフリーズする致命的なバグが確認されている。

続きを読む "NN4x、IE4x以下のブラウザにCSSを読み込ませないようにする" »

WinIE6以上とIE5x以下との違いを考慮したCSS

Win IE6以上の標準モードと、IE5x以下では、ボックスの幅の解釈や、文字スタイルの継承方法が異なるため、厳密にCSSを利用するときには、IE6・NN6以上・Opera・MacIE5.2など上位標準CSSと、WinIE5x以下用のCSSを分けて用意するのが理想的。

Voice-family hack(Box Model Hack)を使う
IE6・NN6以上・Opera・MacIE5.2などとWin IE5xの違いの中でももっとも致命的なものは、ボックスの幅の解釈の違い。
その違いを個別に裏技で回避する。

.haba {
padding: 20px;
border: 10px solid #FF0000;
width:460px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}

width:460px(4行目)はWin IE5以下専用の指定。
460とは、正常な値400pxに、WinIE5の誤った解釈20×2+10×2の計60pxを足したもの。

voice-family: "\"}\""; バックスラッシュエスケープ「\」のがハック。
プログラマーではないのでよくわからないが、IE6など多くブラウザは\後はいわゆる「バックスラッシュエスケープ」で
単なる文字列として扱われるらしく、結局
voice-family: "}";
のような意味、つまり音声ブラウザ読み上げ時の声の種類が「}」だと指定する。
もちろんこれは意味不明な指定で、 その後
voice-family:inherit;
(inherit=”前の値を継承する”)と上書きして、正常にもどす。そして最後に
width:400px;
と正しい幅を上書き指定する。

ところがWinIE5以下では、バックスラッシュエスケープ「\」を解釈せず、
voice-family: "\"}
の部分で「.haba」のクラス指定を「}」終えてしまうため、その後のvoice-family:inherit;、width:400px;は読み込まれない。

なおこのハックを利用すると、IE5ではvoice-familyに変な値を指定してしまっていることになるが、
voice-familyプロパティはもともとIE5で対応していないので、 実害はない。

続きを読む "WinIE6以上とIE5x以下との違いを考慮したCSS" »

2004年7月 7日

CSSバグリスト

http://cssbug.at.infoseek.co.jp/index.html

2ちゃんねるの力はすごいなあ、あらためて思った。

上記サイトに、文が左右にずれるバグ(WinIE5.5-6)も既出。回避方法まで例示してあった。

続きを読む "CSSバグリスト" »