IE6でCSSを読み込まない場合

今更ながら、IE6でCSSが読み込まれない状況でのチェックポイントを知ったので、メモ。

IE6では、CSSにマルチバイトの文字が使われているとダメみたい。それはコメントアウトしている中も含む。丁寧なCSSを描いてみた時に気を利かして、

/*○○のスタイル*/

などと記載をしてしまうと、IE6ではエラーが起きてしまう模様。そんなときは、やっぱり英語なんだねって思う。

/* ○○ style*/

などにするのがよいということで。。。

ランディングページのマークアップ・コーディングについて

最近、社内でランディングページの制作が時々起っている。その時に思うのが、マークアップやコーディングについて。HTMLやCSSのほうを色々と勉強している身からすると、どうもランディングページの作り方に疑問をもってしまうこともある。ただ、よくよく考えてみると、確かにそれでいいのかと思うこともある。ちょっとその当りのジレンマ的な部分を吐き出してみようと。。。

ランディングページは、広告から直接やってくるものだから、見た目さえそれなりになってればソースはどうでもいいんやない?

という考え方がある。確かにそうだなーと思う。実際は、検索エンジン対策とかもしなくてもいいわけだし、あくまで広告の延長だし・・・と考えると極端な話画像1つでもいいんじゃね?ということになる。まぁ実際は画像一つにすると読み込みが大変だから、適当に分割してそれなりのソースになってれば・・・ということになる。だから、ランディングページには、Web標準もへったくれもないという見方もできると思われる。テキストもテキストでおかずに、画像でボンとおいても問題ない・・・かもって思うときもある。

ただ・・・ちょっと思うのが、
たとえ、そうであっても、ランディングページはぺーじでしょ?ならそれなりにきちんとしておいた方がいいんじゃね?
という想い。

例えば、さっきのテキストの件。画像でいいとわりきるか、ちゃんとテキストにするのか。実際は、音声ブラウザなどを考慮すると・・・という話にもなるけど、ちょっとそこはおいておいたしても、ちゃんと作った方がいいんじゃないかと思うときもあるのだ。

極端な話をすれば、ランディングページを「テーブルでコーディングするか」「CSSでコーディングするのか」という選択だ。そこには、ランディングページ=広告ととらえるか、ランディングページ=ページととらえるかの違いがあるのではないだろうか?

広告としてとらえると、見た目の情報だけでいいので、テーブルでも問題ないだろうが、
ページとして考えるときちんと見た目以外の情報を記載するべきだと思う。

今の私の状況としては、
ランディングページ=広告の延長ととらえるものになっている。
今後ランディングページの役割などが色々とみえてくるとまた価値観が変わるかもしれない。

もし何か意見をいただけるのであれば、コメントをぜひ。

背景にPNG画像(半透明)を配置するとき

背景に半透明を配置したいとき、PNG画像を用いるが、
IE7での配置の際に気をつけることが見つかったので、メモとして。

背景画像にPNG画像(半透明)を配置したいときに気をつけなきゃいけないことがある。
それは画像のリピート。

こちらの記事実験をいろいろしていると記述違いがありました。

感覚として、極端な話、
1ピクセル×1ピクセルの半透明PNGを用意すれば、あとはリピートでなんとかなるというような感じになるが実はIEではうまくいかないことが判明。
1ピクセル×1ピクセルのときはなめらかに動くが、これを5ピクセル×5ピクセルにするとうまくいかないことが判明。
うまくいかないというか、スクロールなどをしたときに、ものすごいガタつく。カクンカクンと動く。これはIE7で言えることで、IE8になったときにどうなのかはまだ検証していない。
このガタつきをなくすためには、背景画像のリピートを1方向にするのがいい。

例えば、900px幅のコンテンツがあったとする。
このとき横幅900pxで背景用透明PNGを作成し、background-repeatをrepeat-yにすれば滑らかになる。これを
1px幅の画像を作り、repeatに指定してしまうと、すごくもたつく。
1ピクセルのときは問題が感じられないが、5ピクセルにするともたつく。
コンテンツ内容によると思われるけど、これは結構見た目の上で重要かな・・・。

一応実験してみてるので、参照のこと。
中身があまりな感じなので、読み込みのタイミングでのもたつき程度しか見えませんが。。。

Ex:1px
http://sevenstyleweb.com/labo/pngtest/1×1.html

Ex:5px
http://sevenstyleweb.com/labo/pngtest/5×5.html

Ex:900px
http://sevenstyleweb.com/labo/pngtest/900×5.html

CSS position:fixedと相対位置

IE6では効かないので、expressionを使ってIE6でもなんとか実現できるし、
IE7のシェアも上がってきていることなので、fixed使ってもいいんじゃね?ってことで、いろいろやっていると配置位置の件で気になることが出てきたのでいくつか整理のためにもメモ。

そもそもposition:fixedというのウィンドウの絶対位置として場所をしてしている。つまり

#hoge{
    position:fixed;
    top:100px;
    left:100px;
}

とすると、画面表示部分のtopから100px,左から100pxの位置に配置される。これはすでに認知。

さてでは、中央寄せのコンテンツの場合、どうすればいいの?ってことになる。
position:absoluteの感覚でやっていけば、親ボックスをrelativeにしたら相対位置になんじゃね?って感じになる。つまり

<div id=”parent”>
     <div id=”child”>
           hogehogehogeho
     </div>
</div>

ってソースのとき、absoluteだと

#parent{
     position:relative;
     width:800px;
     margin:10px auto;
}
#child{
    position:absolute;
    top:100px;
    left:100px;
}

とすれば、#parentのボックスの中で相対位置としてtop:100px,left:100pxで配置される。
しかし、これと同じように考えて、fixedを

#child{
    position:fixed;
    top:100px;
    left:100px;
}

と指定してしまうと、fixedは表示部分の絶対値としての配置になるので、普通に、左上からtop:100px,left:100pxという結果になる。(初めの#hogeと同じ)

でも中央寄せのときにも位置を固定したいときどうすれば?ということになるのだが、やり方としては、位置の指定をmarginでやるとうまくいく。
つまり、

#child{
   position:fixed;
   top:100px; /*トップからは絶対値と同じなのでそのまま*/
   margin-left:100px;
}

こうすれば、とりあえず問題ない。
とにかく、fixedでは相対位置の考えを持っていないので、相対位置を意味するものを使わないとうまくいかない。ということのようだ。

間違っていたらご指摘お願いします。
また何か調べたら書き込みます。

IE8が正式リリース んで、CSSについては?

先日IE8の正式版がリリースされました。じゃあ、CSSにはどう対応したのか?CSS3の実現は?と気になるところでもありますが、実際のところちょろっと調べてみると、

CSS2.1には対応したけど、CSS3はまだよ。

ってことみたいですね。つまりは、「標準に準拠したブラウザよ」ってところでしょう。

builderに記事が載っていたのでリンク。

他のいわゆるモダンブラウザ(firefox,safariなど)は次のステップに進もうとしていますが、IEは出遅れた感じでしょうか?

IE8は標準準拠ってことなんで、それはそれで喜ばしいことですが、はたしてどのくらい広がるかですね。どのタイミングでIE7が捨てられていくのか?でしょうね。
というか、まだIE6が生きている部分もあるでしょうから、3つのバージョンが世間に出回るというなんとまぁ恐ろしいことになりかねない…って感じもしますが。

ぼちぼち、IE8への対応も考えていかないといけませんな。IE8の記事も探していこうと思う今日この頃。

以前書いたエントリーで「IE8について」があるので、こちらもリンク。

マルチデバイスCSSについての考察

マルチデバイスCSS。

たとえば、プリント対応のprint.css。PCモニター対応のscreen.css。TV対応のtv.css。まぁ名前はどうでもいいにせよ、さまざまなデバイスに対応したCSSを書くことが、いろんなことを考えると必要だと思う。
そのいろんなこととは、「メディアの特性をしっかり考えて。」とか「サイズとかを考えて」とか。

俺は、Webコンテンツを作る仕事をしているが、
Webコンテンツは所詮手段というスタンスをもっている(つもり)。

どちらかというと情報をWebっていうものを使って・・・というスタンスのほうが近い。
なので、マルチデバイスCSSの考えを理解できたとき、目から鱗だった。

「そうだよな。プリントアウトしてしまったら、ボタンとか意味をなさないもんな」とか
「そうだよな。プリントアウトしたときに、必要なのは中身であって、ナビゲーションじゃないもんな」とか。

しかし、世間・・・というかクライアントは決してそう考える人がすべてではない。というのを痛感する今日この頃。一般的にはどちらかというと、
「PC画面でみれるようにプリントアウトできてナンボ」だ。

そこにはおそらく「慣れ」が影響しているんじゃないだろうか。
CSSがわんさか言われていなかった時代。つまりテーブルレイアウトバンバンの時代。文書構造とデザインが分かれていなかった時代。
そのころは、まだPCでものをみることにあまり慣れていなかった人たちが、プリントアウトをしていろいろ確認していた(と思う)。そのころは、見たまんまが出力されていた。というかされるしかなかった。

その状況になれてしまったから、本来理屈が通っているマルチデバイスCSSの考え方がなかなか浸透しないんじゃないだろうか。
見たまんまの出力がたとえ不便でも、それは見慣れているからOK。
たとえ便利で見やすく作られていてもなれていないのでNG。

なんかそんな感じが蔓延してるような気がする。

事実、きちんと説明をすると、理解をしてくれるのだが、きちんと説明をしないと(適度な説明だと)納得してくれない。
担当レベルでは納得できる状態でマルチデバイスCSSを実現しても、その枠を外れると、説明ができていない分通らない。
これは会社という組織内でとどまるのならいいが、ユーザーまで含まれる問題なので非常にやっかいだ。

ユーザーがプリントアウトしたときに、思ったような(PCと同じ画面)がプリントアウトされなかったら・・・と考えるとなかなか難しい選択だ。

正しいとか、便利とか分かっていても、それが「慣れ」に勝つにはかなりのパワーが必要じゃないかな。

結構このあたりでクライアントとの隙間を感じているWebディレクターやマークアップエンジニアは多いはず。みんなどうしてんだろ。と思いながら考察を述べてみた。

CSSコーディング

東京でもみもまれで、とりあえず身につけてきたCSSコーディングを社内で広めているのだが、なかなか難しい。おれとしては、ボチボチCSS3のことも視野にいれてるけど、CSS2の・・・というかXHTMLコーディングの部分で、文書構造を考えながらのコーディングというのがやはり難しいみたい。

答えはないのだけれど、「ここはこのマークアップ」というのが、なんとなく出来上がっているような気がする。お客さんとの打ち合わせの段階から文書構造が見えていると、話もしやすかったりするが、その構造をデザインに落して、いざコーディングとなったときに、その構造を考えずビャビャっと時間優先でコーディング。
そんなんじゃ、後々しんどいのに・・。という感じのことが時々社内でも起きる。

これは土地柄なのか?と思いながらいろいろ見てみると、こんなにCSSコーディングが栄えていても、やはり東京とかでは入門セミナーが行われる。というのは当然のことで、だれもはじめは入門。

福岡で入門編的なCSSセミナーがあればいいのに。もっといえば、上級編のCSSセミナーとかあれば、Ajax系のセミナーあれば・・・。

と思うが、なかなかない。

だれかやってくれんかな?自分でやってみたいという気もあるが、ひとりじゃもたないし。
だれか賛同してくれんかな?と思う今日この頃。

以上CSSのたわごとでした。
まとまってないけどねー。

ボックスを伸ばすとき、入れ子か空タグか。

ボックスのあしらいが、角丸の四角の場合でしかも中身が可変でのびる場合、角丸の上部と下部をどうCSSで表現するかということになる。

やり方としては、

1.テキストを表示するエリアの上下に空タグを設けて、その空タグの背景にそれぞれ指定する。
2.入れ子構造(ネスト)をしてその背景の上下にそれぞれ指定する

の2種類の方法がある。

さーて、これはどっちがいいか。

となる。

ので、AさんとMさんにヒアリングをしてみた。

その結果
2.の手法がいいということに。

やはり空タグを多く設けるよりも入れ子構造のほうが妥当ということだ。ただし、divタグでやたら入れ子にするのではなく、できるだけ無駄な入れ子はなしにしましょうということだった。

ということで、みなさーん、そのように。

CSSでTabelをレイアウトするときに…。

今更ながら、CSSでTabelをコーディングするときに、おれの中で結構重要かなと思われるプロパティを。

border-collapse

このプロパティをcollapseに指定すると、要素の間の線を重ねちゃうよってことになるし
このプロパティをseparateに指定すると、要素の間の線を話して書いちゃうよってことになる。

CSSコーディングのときにこれを知らなかったら、「うわ、テーブルめんどくさ」ってことに拍車がかかる。
というかかかってたおれ。

日々勉強ですな。
ということでメモ。