css Archive

これ、毎度わすれて以前つくった CSS からコピペするんだけど、

bq. background: 背景色 背景画像 繰り返し 左右位置 上下位置;

っていうアレ。これの何が覚えられないかって、最後が左右＞上下の順番だったか、上下＞左右の順番だったかで何時も忘れる。MdN のリファレンスをちらっと見たら、上記が正しい模様。

しかし何気に、キーワード指定（top middle bottom, left center right）でやる場合は、順番が逆でも認識してくれることが多い（IE6、IE7、Firefox、Safari ではのお話、他は最近無くて忘れた）。でも px なんかの数値で指定する場合は上記順番を守らないと Safari や Firefox では認識してくれないことが有る（認識してくれることも有るかもしれない）。

背景画像が出ない&数値指定をしている。なんて時に自分の場合、大概はコレが原因だったりするのでいい加減覚える様にメモ。みなさんもお気をつけて。

どーでもいいけど、このテンプレート、ul とか ol とか blockquote に対する視覚的効果が殆ど入っていなくてみづらい。 今度修正しよう。 もう修正しました。あと投稿すると以下みたいなエラーがでた。なんかこわい・・・。

bq. Notice: Undefined index: Keywords in /home/17721/domains/jacolog.net/html/textpattern/lib/txplib_misc.php(512) : eval()'d code on line 521

久々に Web 関係者らしい事かいちゃうZO！というか只単に皆がどうしてるのか気になっただけなんだけど。最高に読みづらい文章で今回も書くわ！

皆が大好きでたまらない IE7 先生は、HTML の文書宣言で互換モードにしている場合、IE7 先生は IE6 大先生と同じ動きをする様になっちゃうじゃん！（いろんな IE7 だけをターゲットにした各種ハックも駄目になるよNE？）

その時ですよ。別に構築する時は特に IE6 と同じバグ、同じハックで仲良くやってくれるから文句はないんですよ。でもでもぉ！（デブがハンカチを噛みながら）

印刷するとき IE7 旗持ち担当は何をトチ狂ったのか、「先輩・・・マジ印刷ならまして下さいよぉ・・・・やってみせますよぉ・・・マジバッチリっすよぉ・・・ソッコーでデッパツしましょうよぉ・・・・」と言わんばかりに、Firefoxやらと似た様な感じでコンテンツの横幅を印刷用紙幅に得意げにあわせてくれます。

バット！、IE6 先生は皆さんしっての通り、何もしてあげないと640px以上（だったっけ）の横幅は、A4サイズの印刷用紙を見事にはみ出してくれちゃいます。「フフフ・・・しかたないなぁ・・・・僕が居ないと何もできないんだから・・・」と眼鏡を逆光に光らせながら真っ暗な部屋で、ハックを噛ませてかわいいかわいい IE6 ちゃんの印刷バグを修正してあげるわけです。ハックつーか zoom つかってるだけなんですけどね。

そうするとところがどっこい、改造手術をうけすぎ完璧なボディーと能力を手に入れた物の感情と倫理をうしなってしまった IE7 は、「まじバッチリっすよぉ・・・・ zoom 完璧っすよぉ」と、さっき Firefox ちゃんの真似事をして、印刷用紙にあわせてくれたコンテンツ幅を、さらに一緒に zoom して必要以上に小さくしてくれちゃうわけ。おまけに互換モードだから、IE6 だけにぶつけ様にもハックちゃんも駄目なわけ。

なんとなく IE 開発者が「マジ・・・これいれて置くからバグは目をつむって・・・でもあんま使わないで欲しいなぁ」な条件付きコメントで印刷用 CCS 自体を別にする方法をとってるわけだけど、皆はどうしてるのよ！とただでさえコメントの付きづらいこのブログで聞いてみるよ。

後方互換モードでも問題なく動作する IE7 ハックを、暫く他業種の仕事ばっかりしてて浦島太郎状態の管理人がしらないだけなのかもしれないけど。（あ、コンテンツの幅をピクセルで指定し直すとかマゾい答えは無しで！あと文書宣言変えるのも無し！）

結局以下の様な構造に落ち着いちゃうわけ。

# IE7 FF Safari 向け印刷 CSS をまず読み込む
# IE6 にだけ、htmlの条件付きコメントで専用印刷 CSS を上書き

という構造に結局おちついちゃってるんだけど、なんかスマートじゃない！すごく Web Designing とか載れなそう！

そもそも zoom 使うのが時代遅れなのか！？どうなんだ！！よし子！！！お父さんはかっこわるいのか！

CSS Navigation Techniques@CSS Showcase

見た目は個人的にどぎついのが多いのだけど、作り方は参考になりそうです。

Interactive CSS Box Model Demo.webloc

以前CSSのBoxモデル学習用ダイアグラムCSS Box Model Diagramについてお知らせしたけれども、さらにそれにFlashを加えてさらに分かりやすく！！という謎の改良。本当に分かりやすくなったかどうかはさておき、アップルのサイトに行くとQuickTimeVRでマック本体を回転させずにはいられないという奇特な趣味を持ってる方は嬉しそう。

IE 7 用の CSS ハック @Lucky Bag

平たく言うとIE7が未対応の疑似クラスを使用して、オーバーライドしてしまおうというもの。しかしIE7はまだbeta2ゆえ、1.0正式リリース時に通用するかは当然定かではないです。世界にちらばるCSSギークの遊びという事で長い目でみてやってください。

余談ですが、もうすぐリリースされるであろうIE7に備えて、WEB開発者向けに色々とチェックするリストが公開されている様なので、そちらもあわせてどうぞ。

CSS Vertical Bar Graphs - リストタグバージョン
CSS Vertical Bar Graphs - テーブルタグバ−ジョン

CSSで作る棒グラフは以前に"紹介しました":http://jacolog.aug5.net/8700/CSSForBarGraphsApplesToOrangesASanFranciscoBayAreadesignstudio が今度はテーブルタグを使ったバージョンも有ります。おもしろげ。しかしやはりレガシーブラウザにうるさい案件では当然つかえなそうです。

CSS For Bar Graphs - Apples To Oranges: A San Francisco Bay Area design studio

CSSでつくるあんな棒グラフやこんな棒グラフ。音声ブラウザで読んだらどうなr（略）

css filters (css hacks) @centricle

CSSのハックフィルターの対応一覧表。こーりゃーーべんりーー。

Get Link Style @Side-B

リンクの下線や文字色、ページの背景色や基本文字色まで設定するスタイルシートを吐き出してくれるページ。使い方は若干分かりにくい・・・というか、Selectボタンを一瞬さがしてしまった。一応手順を書くと、ページ上部の設定画面で設定した後、下部のプレビューエリアで表示される8つのサンプルの中で好きな物の右上に表示される"SELECT"を押すとポップアップが開きます。そうするとポップアップが開いて左にさらに設定を修正出来るフォームと供に、右側にコードが吐き出されるのでCSSにコピペして終了。ってな具合です。

ちなみに吐き出されるスタイルシートは下線の設定を、text-decoration:underlineではなく、border-bottomで表示しているのでborderを使いたいときは注意。

それとリンクのCSSを書くに当たってこんな小話もあるので紹介。
実は重要！スタイルシートの記述順！　a:hover使ってもリンク無変化!? @Allbout Japan

CSS Box Model Diagram in Japanese @The Nine Lives

CSSのBOXモデルについて以前hicks先生が分かりやすいダイアグラムを公開していましたが、Nine Livesさんの方でその日本語訳を作成して下さった模様。しかしサイトは英語。文章終盤に出てくる"it is here as a gif"のリンクでGIF形式の物を見る事ができます。Illustratorファイルも公開しています。ちなみにこれのオリジナルは流行のCreativeCommonsライセンスでございます。改訂版を作成の際はご注意。

ITmediaリニューアル&フルCSSレイアウト

リニューアルしてフルCSSレイアウトになりました。リキッドレイアウトでウインドウが伸びてもびろーんと伸びます。ちなみに伸ばしすぎると（横幅2000pxくらい？）、左上の"ITのいまが見える、明日が分かる"の文字が背景繰り返しでもう一度出て来てしまい、右端の"ITmedia｜ITmediaエンタープライズ〜"のテキストメニューと被ってしまって読みづらくなる事が有ります、といってもそんな事してみるのは一部のCSSマニアとアップルシネマディスプレイ30inchユーザーだけかと思いますが！！

一番外側にだけ1行１列のtableが使われているのが気になって、背景に設定されている画像を見ようと思ったけど、画像URLへの直リンクだと画像が見れなくて何が背景に設定されてるのかわからんです。トップのグレーやら、メニューのオレンジやらの横帯かしら。

Online CSS Optimizer

百式さんで知ったサイト。以前JacologではCSS Optimizer成る物を紹介しましたが、それのWEB版と言った所でしょうか。一日数万プレビューも有る様なサイトなんかには実におすすめだと思いますがどうでしょう。

余談ですけど、以前のアドレスのブログを消して数ヶ月。やっとサイト内検索がちゃんと活きてくるようになったと思うのだけどどうでしょう。

Slash+CSS @Slashcode

SlashがCSSで動くようになるよう進んでるらしいー。Slashcodeのサイトは既にCSSバージョンで稼働中の模様。FirefoxでSlashcode.comを開いて、”表示 > スタイルシート > Slashdot”ってすると、擬似SlashdotフルCSSバージョンが拝めます。

SeeSS @Apple-Dashboard

OSX 10.4 Tiger上で動くCSS辞典。SeeSSとはうまい事いいますな。

A List Apart リニューアル

CSSのお勉強のお供、A List Apartがリニューアルされました。前みたいに横幅の狭い窮屈なレイアウトでは無くなりましたね。オシャレさんです。

CSS tests

海外版CSSバグ辞典と言った感じ。ブラウザ別ではなく"フロート"や"テーブル"、"マージン"などでジャンル分けしてあります。

ちょっとBloggerテンプレートのアレンジも、デフォルトのテンプレートも飽きて来たので仕事の気分転換に作り始めた。アイコンとか時間かかる物はまだ作ってない。ひとまず読める程度まで作ってみた。まだ致命的じゃないバグとかあるけど後々対処。それと、サイト内検索を上のBloggerバーからするようにした。でもちゃんと動いてないので原因調査中、検索したい人はメールくれたら管理者用の検索使って探してお返事します、すぐには返信できませんがーー。

また作って行く過程で問題にぶち当たったのでメモ。Firefoxで"z-indexに負の値を指定した要素が消えてしまう"バグに遭遇。一見どこでz-indexなんか使ってんだって感じのデザインですが、左端のグレーのJacologという帯はbodyで繰り返しを掛けていて、そっから右の背景の部分は、気づきづらいですが上から下へうっすら黒いグラデーションの背景になっています。そのグラデーション部分をz-indexをつかってコンテンツの後ろに無理矢理配置してるわけですが。その段階でコレに遭遇。

仕方なくz-indexの基準となるdivを用意する為にbodyにリンク先の対策を施した物の、Blogger先生がページ最上部に入れてくれるバーが崩れるという、自分でhtmlとcssがその部分はいじれないため対処しようがないバグに遭遇したので、頑張って#contentに充ててみた。しかしWinIEでそれだとバグが出るので、色々ハックつかってためしてたら何故か治った。うちのWinIEはまともに表示されてますが皆さんいかがかしら。すごく不安です。

Standards and CSS in IE @IEBlog


IE7の開発者ブログで、修正済みのバグについて一覧が出ています。Peekaboo bugを初め、多数のバグが列挙されていますね。名前を見てもどんなバグか分からないよぅというかたは、Positioning is Everythingをどうぞ。

期待以上の物が出て来て驚き。ちょっとしたWEBチェックには十分使えると思います。今日はmixiとGoogleニュース、Gmail、その他ニュースサイトやブログを朝起きてベッドからPSPでごろごろしながら見たりしてたわけですが、小さい画面で長時間文章読むのはつかれるー。テキストサイズとかは問題ないけど、精神的な問題だと思う。携帯でしかネットやった事無い人には感動の画面領域じゃないでしょうか（笑）パソコンでネットした事ある人は、あの画面の狭さに可読性は問題なくとも、精神的な所でストレスを無意識にでも感じると思う。それと最後に一個だけ、これだけは絶対対応してほしいものは、セキュリティの問題があっての事なのだろうけど、ログインのIDやパスワードの記憶をしてくれない事。mixiやbloglinesといったサイトを訪れるたびにIDとパスワードを、あの携帯電話程度の入力装置で毎回いれさせられるのはある意味拷問。一回いれれば、ブラウザを終了するまで大丈夫なようだけど。

それとCSSで崩れる傾向をまとめてみた、どれも自分が今まで組んだ物を見たり、いままでCSS解析した事のあるサイトを表示させてみた結果からの推測なのであまり確実ではないですが。

■その１■
横幅ぴったりで回り込むスペースがなくてフロートをclearしないでも縦に並んでくれてたフロート付きブロック要素とかがPSPでは回り込んじゃう、要するにちゃんとclearしましょう。手抜きはいけません！

■その２■
あとdisplay要素をblockに指定していないフロート付きリスト（もしくはアンカー？）が全部重なってしまう傾向にもあると思う（widthの指定が効いてないっぽい？）。spurl.netやstopdesignのメニューのタイプで崩れが出る。画像置き換えを使ったようなメニューではブロック要素にしている物が多いせいか、この症状はみられなかったため、こう推測。

■その３■
あとこれはどこででも出てたのが、(CSSで指定した物のみ？）bodyのバックグラウンドイメージがずれる。おそらくbody背景画像の横幅700〜750px程度の物で配置は中央+上揃え、んで縦に繰り返し〜（background:#fff url(xxxx.gif) y-repeat center top;みたいなの）とかやってるサイトでは、PSPの横幅が700pxも無い為に中央表示がうまく逝かず、ずれてしまうのではないかと。当たり前の事ですが。

といった所でしょうか。それ以外は結構まともに動いてると思う。"その３"のバグのお陰で激しく崩れて見えたけど、冷静に見るとbody背景がずれてるだけの物が殆ど。自分が今まで手がけたフルCSSサイトを見た所では"その３"のbackgroundがずれるくらいだった。backgroundのpositionプロパティをいじってずらすロールオーバーや、ブロック要素化したspanタグをつかって文字の上にかぶせる一時期はやった画像リプレイス方法もちゃんと通じます。クロスブラウザを意識して組んだCSSサイトなら（というかFirefoxをターゲットにいれてれば？）bodyの背景がずれるのを除いて大体表示されると思います。

それと昨日の記事にも追記したのだけど、User AgentではちゃんとPSPと申請してるので、javascriptをつかえばPSP用のCSSを当てる事も可能ですね。CSSのHackを使った物で、出来ればいいんですけど・・・（笑）

CSS Selectors a Visual Guide for Absolute Beginners@LITERARYMOOSE.INFO

CSSのセレクタを図付きで解説してくれているサイト。"div>p {background-color: #3366CC;}"
と書いた場合、図のような文章構造ではどこに反映されるのかセットで掲載されています。セレクタいまいち分からんって方はどうぞ。

Opera8でのtext-indentバグ @nickrigby.com

Opera8で、CSSのtext-indentに限界値があるのが発見された模様。その限界値は、

-32767px+使用する画像のサイズ = 限界値

そうすると大概、30000pxを超える膨大なサイズになりますが、そんなの使う分けないじゃーんなんて思う人も多いかと思いますがところがどっこい。CSSによる文字の画像置き換え等をする際、内容物を画面外に飛ばす為に、100000pxとか指定している人は以外と居るのです。1000px程度では文字サイズを大きくした際に画面内に入って来てしまう事があるためですね。

もっとありえるのが、-10000emなど。emの場合はたった10000emでアウトに成ってしまうようです（筆者は-9999emで作っていた事があって、それらのサイトは動かなかったといってる模様）。

今後作るときは皆さん頭の隅に置いておいてくださいな。

Quick Start Your Design with XHTML Templates @particletree

XHTML+CSSでサイトを構築する際に、あると便利なテンプレート集。ナビゲーションやフッターを入れる所までdivタグで囲ってさらにはhrタグで区切ってある物まで。CSSでは、Authorデータを入れる所や、よく使うタグやクラスID名を既に記載した物等、これを少し自分流にいじれば、自分用テンプレートが出来て便利かも。

Bookmarklet: Mouse Over DOM Inspector @えむもじら

おおー！こりゃすげーー！！しかもブックマークレットだからFirefoxじゃなくても動くよ！！！これでFirefoxじゃなくてもさらに快適CSS解析ライフ！！！しかしSafari未対応キターー！！！！

Zoom the Web:The problem of giant fonts @Joe Clark

先ほど取り上げたZoom Layoutに関しての本家（？）記事。通常のサイトデザインでの文字を拡大したときの問題点、Zoom Layoutのメリットや、その為に何をしたら良いのかなどが簡単にまとめられています。

"サイトの文字を大きくするはブラウザの機能で可能ですが、それらはルーペと違って、大きくするのは文字だけなのよねー、横幅が広がらなかったりで文字がでかい故に改行がすぐ入ったりするわーー。こまったわー、やーねー。じゃぁどうするよ。"みたいな事が書いてあります。

コレからは、文字の可変を可能にするだけでなく、可変させても行間や文章の改行など読みやすさを損なわせないようにしましょうよ、みたいなー。

Zoom layout @Stopdesign

先日海外で開催されたWEB開発に関するイベント@mediaにてJoe Clark先生が提案した作り方の模様。概要を平たく言うと、文字だけじゃなくてサイトの横幅など全体のレイアウトとデザインが拡大縮小するデザイン+CSSコーディング。文字を大きくしてもサイト全体のバランスが崩れません。スタイルシートをざっと見た限りでは、margin, padding, widthなどで、px指定を使わず、%やemですべて指定しているだけなのかしら。

リンク先ページ中段あたりで、"Making it real"という小見出しのついてる所にあるスクリーンショットをクリックする事で、htmlのサンプルが見られます。文字の拡大縮小をしてみるとどういう物か分かりやすいかも。"Zoom style sheet availability"の小見出しの部分で、サンプルで使われているzoom.css（メインのCSS）とzoom2.css（カラーの設定のみ）を見る事ができます。

余談ですが、Stopdesignの設定ページから、Stopdesignのサイトにzoom.cssをあててサイトを見る事も可能になっています。デフォルトデザインに戻したいときは、再び設定で"Technicolor"というスタイルシートを選べば元に戻せます。

ShaunInman.com Redesign

ShauInman.comがリニューアルされてたよ。今回は条件付きコメント＜!--[if IE]--＞（今は半角で書くとブログに表示されないので全角で＜＞を置き換えています）等をつかった分岐で、WinIEだけに追加で別のシートを読み込ませています。

条件付きコメントなかなか便利で、仕事の方でもちょくちょくお世話になるのだけれども、あんまりどこも使ってないので何か重大なバグでもあるのかとハラハラしながら使ってたけど、ShauInman先生が使ってくれたので少し安心。って前から使ってたっけか、ここ。

今後IE7になってからCSSをきちんとIEがサポートしてくる事を考えると、IE用のバグフィックススタイルは別ファイルに記述して、バグフィックス用のスタイルがIE7になって必要なくなる事があれば、IE用スタイルシートのリンクをはずすだけで済むようになるかもしれないと思うので、おすすめ。といってもやっぱりIE6を無視する事はできないので結局入れっぱなしだと思いますが（もしそうなっても何年後先か・・・）。IE7の事をかんがえると"＜!--[if IE]＞"よりも"＜!--[if IE 6]＞"とかで指定しておいた方が良いかもしれないですね。

フロート配置要素の子要素を絶対配置にすると親要素を無視した配置になる @CSSバグ辞典

このバグが、OSX 10.4+Netscape 7.1でも発生したよー。これって報告するのに2ch書き込まなあかんのかな・・・。

CSS Optimizer @mabwebdesign


CSSファイルを最適化してファイルサイズを軽量化してくれるソフト。しかしまだGUIが開発されていないので、コマンドラインで操作しなければならないので、初心者の方にはおすすめできません（それほど効果のある物でもないし）。そして、MacOSX専用（いまのところ）。

ダウンロードしてきて解凍されたらcssoptumizerアプリケーションを、"/user/bin"フォルダに放り込んでください。どこにそのフォルダがあるのか分からない時は、Finderのメニューの"移動 > フォルダへ移動"を選んで"/user/bin"と入力すれば開いてくれます。アプリケーションを"/user/bin"フォルダにコピーし終えたら、ターミナルを起動して。

cssoptimizer ファイルのフルパス -オプション

といった形式でコマンドを入力します。例えば、デスクトップにあるbase.cssというファイルを最適化したい場合（オプション無し）。

cssoptimizer /users/HOMEフォルダの名前/desktop/base.css

と行った具合に入力することで、同じ場所に"base_stripped.css"といったファイル名で書き出されます。HOMEフォルダの名前の部分はもちろん自分の物に置き換えて打込んでください。

基本的に不要なスペースやタブ、セミコロン、改行などを削除して軽量化をしていくようです。Full long-hand to short-handという最適化の項目は何をいじっているのか分かりませんでした・・・。省略形で書き直してくれるのかと思ったけどそうでもないみたい。また、吐き出されたファイルは、すべてスペースや改行を削除された1行のCSSに凝縮されるので、再びエディットするのは困難です。もし使いたい場合は、最後にサーバにアップロードする直前にかけるのがいいでしょう。

ちなみに僕が試したファイルでは,16KBのCSSファイルが12KBのサイズまで最適化されました（23%削減と結果にはでてた）。今後GUIバージョンも開発される様なので、ファイルサイズにうるさい案件、もしくは気にしなければいけない案件をやるときには重宝しそうです。