CSS

今年もCSS Naked Dayに参加しています。

CSS Naked Day は一年に一度CSSオフにしてbodyの構造さらそうぜ（で、Web標準について考えてみよう）という裸族の祭り。昨年同様4月5日だと思って公式サイトを見に行ったら、4月9日とのこと。さっきlink要素をちょちょいとコメントアウトして脱ぎました。フィード読者の方には影響ございませんが。

CSS切ったとて、この一年ほとんど変わってはいないんですけどね、実のところ。（笑）

ま、何事も継続は力なりということで。

CSS Naked Day

http://naked.dustindiaz.com/

先日Stylishでごにょごにょすると便利だよっての書きましたが、ブクマクで開設以来最速の反応いただいてうれしい限りです:D
それとは近くて遠い話なんですが、Stylish本来の使用目的用に書いた中でも、まともにできた「goo news clean-up」をuserstyles.orgにシェアしてみました。

適用させるとこんな↓感じ。バナー類は大人の事情でモザイクですよw。

DLは以下からドゾ。

goo news clean-up | userstyles.org

http://userstyles.org/styles/4976

先日TRANSさんで紹介されていたデバッグCSS、Firefxの拡張「Stylish」を使えば便利だと思うのですよ。
以前書いたFx拡張まとめでも挙げているように、Stylishはユーザースタイルシートの編集・管理をする拡張です。

デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - TRANS [hatena]

http://d.hatena.ne.jp/aratako0/20080119/p1

サイトのチェックをするたびにデバッグCSSを追記するのもちょっと面倒ですよね？
Stylishに登録しておいてチェックの時だけ有効にすれば、制作済みのファイルを汚すこともなくとても便利です。自分はこの方法でチェックをやっています。Web制作者なら大抵Firefoxをインストールされていると思うので、試しにやってみてはどうでしょう。（以下はWindowsでの手順です。）

1. Stylishをインストール
2. ステータスバー右にあるアイコンを右クリック→スタイルを書く→空のスタイル
3. スタイルを追加ウィンドウが開くので、概要を入力
4. 有効のチェックをはずす
5. 下枠にデバッグ用CSSを入力
6. 保存

登録はこれで終わり。
チェックをするときは「アイコンを左クリック→グローバル・スタイル→デバッグにチェックを入れる」とすればOKです。

Continue reading

alt属性の“有無”は、Dreamweaverなどで簡単にチェックできますが、“正誤”チェックはみなさんなどうやってるんでしょうね。ソースコードをコピーして使い回したりすると、たまにalt属性を変更し忘れるなんてミスもあるので、正誤チェックもちゃんとやりたいですね。

更新業務等で画像が数ヶ所とかなら特に問題ないのですが、新規制作で数十ページもチェックしなくちゃいけない時ちょっと途方に暮れて逃げ出したくなります^^;

“安直に”考えつくところでは…

1. 画像にマウスカーソルをhoverしてチップを表示（IEやFxのPopup ALT Attributes）
2. Web Developerで画像を非表示にしてalt属性を表示
3. Web Developerでalt属性を画面上に表示させる（Images→Display Alt Attributes）

画像を非表示にすると画像との比較ができないし（一番現実的じゃないし…）、ひとつひとつhoverして表示させるのもばかげてるしなぁ。WebDeveloperのalt属性を表示させる機能は便利だけど、ページ全てのalt属性が表示されるので必要のない箇所はかえって邪魔に。しかも画像の左側に表示されるのでレイアウトが崩れて余計見にくくなってしまう。（印刷しても同様でした）

ググったら、アライド・ブレインズさんの出してる「情報伝達度チェッカー」というシェアウェアが見つかったんだけど、ページ単位でしかチェックができないみたい。

A.A.O.｜情報伝達度チェッカー

http://www.aao.ne.jp/service/tool/checker.html

Continue reading

少々前になりますが、CSS Happy Life の平澤さんから彼著「Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。」をいただきました。ありがとうございまっす！同じデジパ（株）の加藤さん、両見さんとの共著で、7月3日に発売された本ですね。（感想書きますねって遅くなってゴメンなさいー！）

本を著者の方からいただくのが初めて（で最後）なもので、出版社の方からご連絡いただいたときはびっくりしましたよ。コーディングコンテストと併行して進められていたんですかね、お疲れさまでした^^

真っ青の表紙に円のグラフィックが目を引くシンプルな装丁（ご本人いわく、わっか本）で、書店の棚で見つけやすいですね。タイトルをうっかり忘れても「青いの青いの」で済みますから（爆）。実際書店で青い背表紙目印で探しました。個人的にはタイトル末の「。」がスキスキです。ちなみにうちの制作内では“青本・赤本”と読んでます。

Continue reading

おまたせしました。ひとり反省会、後半です。

ブラウザの対応

今回は以下のブラウザをターゲットとしました。

• Win / IE5.5～7、Firefox2、Opera9
• Mac / Safari2、Firefox2、Opera9

xml宣言を付加しているのでWinIE6は後方互換モードになってます。WinIE6の崩れ対応でWinIE5.5にも対処できたため、ハック用のCSSは「adjust.css」ひとつだけです。（ハック無しで書ければ素晴らしいんですが…。）

それともう一点、今回は対応に含めなかった“MacIE5.2”にCSSが適用されないように、import.cssにちょっとした細工をしています。コンテストとは別件で、MacIE5だけCSSを適用させない方法を調べていたとき、行き着いたのが「@import」で読み込みを制御する諸方法をまとめた以下のサイトでした。

Hide CSS from browsers :: @import

http://imfo.ru/csstest/css_hacks/import.php

Continue reading

先日「コーディングコンテスト Vol.1 ～Coder’s High～」に応募したデータがCSS HappyLifeさんにて公開されました。

最優秀賞☆コーディングコンテストVol.1｜CSS HappyLife

http://css-happylife.com/log/coding-contest/000152.shtml

審査員の方々からどんなコメントをいただいたのか、半分どきどき、半分わくわく、1ヶ月過ごしてました。決してtwitterの手軽さから、ガッツリ文章を書くことをなまけていたわけではありません…よ。:D

先ほどコメントのひとつひとつ噛みしめながら読ませていただいたのですが、（ここほんとボケ抜きで）身に余る評価をいただけて、もう何と言って（書いて）よいやら…背筋ぴしっと、「ありがとうございます！」としか言えないです。（もっと辛口いただくかとおもた。）

さて、応募データの詳細は上記ページに掲載されているので、そちらを見ていただくとして、あれやこれや考え巡らせていたことがあるのでひとり反省会したいと思います。

Continue reading

日々暖かくなってきたので、今日一日脱ぐことにしました。

そう、CSSをｗ

4月5日一日だけ、サイトのCSSを外してxhtmlを晒そうじゃないか（多分主旨と違ってないハズ）っていう「CSS Naked Day」に乗っかってみました。
Web標準を認知＆再考させられる、なんておちゃめで素敵な企画なんざんしょ！

2006年、ダスティン・デイアスは毎年4月5日をCSS Naked Day（CSSネイキッド・デイ）として、ウェブの世界がCSSウェブデザインの恩恵を忘れないようにしようと訴えた。スタイルシートを1日取り払うことで、裸のウェブページを見ることになる。ウェブページのデザイナーに対する評価も上がることになるだろう。

[cite] 4月5日はブログがストリップ？「CSS Naked Day」 at ブログヘラルド / 2007年4月5日 1:23:42

ま、普段からWebDeveloper使って“Ctl+E”でCSS脱がしまくってますけどね、自分:P。
今日は自分で脱ぎまーすw。（import.css内の読み込み脱ぎ捨てました。）

マークアップとか、構造とかいろいろ見直したいと思ってるんだけど、
できない自分へのプレッシャーも込めてーorz

[via] ハダカのワタシを見て!! - CSS Naked Day | caramel*vanilla

Continue reading

CSSはMacIE5で何かと不具合が多い。
一つ今日解明したので、覚え書きめも。
ただの覚え書きなので、スルーしちゃってください。

ユニバーサルセレクタ内でvertical-align:top;を指定すると、td内におさめた子要素に対して、変なマージン？があく。
原因詳細不明。値の継承バグの一種か？
ハイブリッドコーディングだからかどうかは今のところ不明。

先日某所経由で教えて頂いたのですが、特定の条件でコメント欄(textareaタグ)に日本語で書き込もうとすると文字化けしてしまうとのこと。

検証してみましたが、このBlogに限らず、以下の条件に当てはまる場合は文字化けするようです。Win環境の制作・閲覧の落とし穴デス。(mikekoさんありがとうございます。)

[条件]
Macintosh Internet Explorer5x
文字コード　->　UTF8
<
textarea></textarea>に日本語入力

以下で解決策を…

Continue reading