CSSのクロスブラウザ対処でyahoo UIのResetCSS・Fonts CSSはどう?

December 26 [Sat], 2009, 15:18


いろんなブラウザで同じようなCSSレイアウトにするのには苦労されてる方も多いと思います。
マージンやフォントサイズがバラバラだったりしますもんね。
そんなクロスブラウザ対処で困った時は「YUI Fonts CSS」や「YUI Reset CSS」はどうでしょう。

結構良いですよ。コーディングスピードはアップしました。

それから、サイドメニューをメインコンテンツの右や左に配置したり、メインコンテンツの分割が簡単にできる「YUI Grids CSS」もあります。
「The YUI Grids Builder」は、フォームの値を選び「ShowCode」ボタンを押すとあっという間にレイアウトの雛形ができちゃいます。


私がお世話になっているのは、主に次の3つです。
(※ご注意:下3つともアスタリスクハックが使われていて、CSSバリデーターにダメだしされます。)

YUI 2: Fonts CSS
http://developer.yahoo.com/yui/fonts/

YUI 2: Reset CSS
http://developer.yahoo.com/yui/reset/

YUI 2: Grids CSS
http://developer.yahoo.com/yui/grids/

Fonts CSSとReset CSSが一緒になった「reset-fonts.css」や上の全てが一緒になった「reset-fonts-grids.css」もありますのでダウンロードしてみてはいかがでしょう。

ダウンロードは、上のサイトにアクセスして「Download:」をクリックするとできます。
各CSSファイルは、buildフォルダの中にあります。


また、次のように記述しても読み込めます。(YUI Reset CSSの場合)

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

(reset-min.cssはreset.cssの圧縮版です)

Thunderbird portable3.0が遅いけど、バージョンアップのせい?

December 23 [Wed], 2009, 14:43


メールソフトはThunderbird portableをUSBメモリに入れて使っていますが、この前3.0にバージョンアップしてから動作が遅くなった気がします。

ファイル形式はNTFSでフォーマットしてあるのですが、遅いのです。

そこで調べてみると、
小野和俊さんのブログで「Thunderbird が遅くなってきたときの高速化の方法」がありました。

Thunderbird バージョンは一致しないけど、Inboxのダイエット方法が書かれています。

現在のInboxの容量は、次のとおりです。
Inbox 640,589KB
Inbox.msf 16KB

1.Thunderbirdを起動していたら終了します。

2.データのバックアップをします。

3.Inbox と Inbox.msf を削除します。(削除すると受信トレイにあるメールが消えますのでご注意ください)

4.起動します。

起動したら、Inbox と Inbox.msfがつくられまして、容量もスッキリしました。
Inbox 0KB
Inbox.msf 2KB

Thunderbirdの最適化もしました。
最適化の方法は、フォルダを選択して右クリックすると、メニューが表示され、その中に「最適化」があります。


最適化した結果は、次のとおりで、容量が減ったと思ったら、増えたのもありました。
099-: 6651KB→6560KB
099-.msf: 63KB→67KB

001-: 32KB→32KB
001-.msf: 11KB→8KB

結論
Thunderbirdの動作は速くなりました!
3.0にバージョンアップしたのが原因ではなくて、Inboxの容量が大きかったのが問題だったみたいです。

prototype.jsで入力フォームのバリデーション

December 21 [Mon], 2009, 21:08


prototype.jsを使った入力フォームのバリデーションです。エラー表示も分かりやすので、ユーザフレンドリーな感じがいいですね。

prototype.jsのバリデーション
http://tetlaw.id.au/view/javascript/really-easy-field-validation

demoページ
http://tetlaw.id.au/upload/pages/really-easy-field-validation/

prototype.js リファレンス


prototype.js リファレンスもご紹介します。
http://www.openspc2.org/JavaScript/Ajax/ref/prototype.js/ver1.4/index.html

Ajaxの勉強


それから、openspaceさんのサイトは、Ajaxのこともすごく丁寧に書いてあるので、是非。

http://www.openspc2.org/JavaScript/Ajax/index.html


#情報収集しても、それを整理できてないんですよねー。少しずつこのブログで整理できたらいいと思います、、、

ブラウザエンジンの覚書

December 20 [Sun], 2009, 16:14


ブラウザエンジンの覚書です。いつも忘れちゃうので、、、
Trident IE,Lunascape,Sleipnirなど
Gecko Firefox,SeaMonkey,Netscapeなど
Presto Opera
WebKit Safari,Google Chromeなど
#Sleipnirって、いいブラウザだと思うんですけど、エンジンがIEと同じなんですよね、、、

STOPエラーの原因を教えてくれるフリーのソフト【BlueScreenView】

December 19 [Sat], 2009, 15:50


STOPエラーの原因を教えてくれるソフト【BlueScreenView】がありますね。
日本語言語ファイルも配布されてる方がいらっしゃいます。

「BlueScreenView」ダウンロードサイト
http://www.nirsoft.net/utils/blue_screen_view.html

「BlueScreenView」の日本語言語ファイル
http://qmp.seesaa.net/article/125559181.html

GIGAZINEさんに詳しい記事がありますので、インストールや使い方はそちらを参考にされてください。
http://gigazine.net/index.php?/news/comments/20090813_bluescreenview/

年末年始、パソコンの調子が悪い方は調べてみるのもいいかもしれません。ただし触りすぎには注意してくださいね。(私はやりすぎてパソコンを壊すことがよくあります、、、)

関連記事

Windows XPの調子が悪いです
STOPエラー(ブルースクリーン)対応
STOPエラーの原因は?
再度、STOPエラー

パソコンの調子が悪い

自宅サーバーを開設(8)!?CentOS5

December 19 [Sat], 2009, 13:12


Webデザイナーでもサーバーが構築できるかどうかの記録です。
詳細は参考サイトをご覧ください。
ここでは、特に上手くいかなかったことや、悩んだこと等を書き記したいと思っています。

参考サイト
CentOSで自宅サーバー構築
39.サーバー公開後のセキュリティ強化

不正アクセス検知システム導入(Snort+SnortSnarf+Oinkmaster)



rpmbuild -tb –clean snort-2.8.3.2.tar.gz


を実行したら、エラーがでました。


エラー: ビルド依存性の失敗:
pcre-devel は snort-2.8.3.2-1.i386 に必要とされています

上記の場合はsnortのRPM作成に必要なpcre-develがインストールされていないことを
示しているので、yum -y install pcre-develでpcre-develをインストールしてから
rpmbuildを再実行します。

Snortルールファイル入手時に、まともにファイルをダウンロードできず、snortrules-snapshot-CURRENT.tar.gz.bakという容量1.33MBのファイルになってしまったので、後日再度ダウンロードしました。
すると容量76.6MBのsnortrules-snapshot-CURRENT.tar.gzファイルがダウンロードできました。

iptablesログ解析(IPTables log analyzer)


記載通りに進めます。

ログ監視ツール導入(SWATCH)


記載通りに進めます。

自宅サーバーを開設(7)!?CentOS5

December 19 [Sat], 2009, 1:17


Webデザイナーでもサーバーが構築できるかどうかの記録です。
詳細は参考サイトをご覧ください。
ここでは、特に上手くいかなかったことや、悩んだこと等を書き記したいと思っています。

参考サイト:CentOSで自宅サーバー構築

16.Webページへのアクセス統計をWebブラウザからみれるようにする
29.データベースシステムを作る(MySQL編)
30.Weblog(ブログ)サイトを作る

Apacheアクセスログ解析(AWStats)


「centossrv.com」を自分のドメインに置き換えて設定します。

リファラスパム対策


参考サイトの記載通りです。

データベースサーバー構築(MySQL)


参考サイトの記載通りです。

MySQLデータベース自動バックアップ運用(mysqlhotcopy)


参考サイトの記載通りです。

MySQL用GUI設定ツール導入(phpMyAdmin)


参考サイトの記載通りです。

でも、インストールしたphpMyAdminのバージョンは3.1.2でした。これだとPHPのバージョンが5.2系でないと動かないようです。

PHPのバージョンを調べてみると、、、、

[root@centos ~]# rpm -q php
php-5.1.6-20.el5_2.1

そこで下記のサイトを参考にPHPのバージョンをあげるより、phpMyAdminのバージョンダウンを実行することにしました。
参考サイト:「はじめての自宅サーバ構築 – Fedora/CentOS -」
http://kajuhome.com/patio_thread/1653.shtml

これでphpMyAdmin 2.11.9.3です。
http://サーバー名/phpmyadmin/へアクセスしてみると、「mcrypt 拡張をロードできません。」と表示されたので、下記を実行しました。

[root@localhost ~]# yum -y install php-mcrypt

ブログサイト構築(WordPress)


参考サイトの記載通りです。

CSSハック(IE6、IE7に効くもの、効かないもの)

December 17 [Thu], 2009, 20:17


普段はお仕事でFirefoxを主ブラウザとしてコーディングし、ある程度出来上がったら、IE6、IE7、IE8、Macのsafariと検証していく形をとっています。
この場合CSSハックは、IE6、IE7のみに効くものがあれば、おおよそOKです。

@IT(アットマークIT)に有限会社タグパンダさんが書かれたCSSハックについて良い記事がありますので、詳しくはそちらをご覧ください。

IE 6とIE 7のためのCSSハック16選
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/03.html

モダンブラウザでも使えるCSSハック18選
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack03/01.html

私の記事は自分がコーディングするときにささっと確認用に書いています。
CSSの文法エラーチェックはW3CのCSSValidationで確認しました。

W3C/CSSValidation
http://jigsaw.w3.org/css-validator/#validate_by_uri

IE 7をハック(IE7のみに効くハック )
名称 CSS記述例 CSS文法
スター+ハック *+html p { margin: 10px; }
IE7スターハック *:first-child+html p { margin: 10px; }


IE 6をハック(IE6のみに効くハック )
名称 CSS記述例 CSS文法
スターハック * html p { margin: 10px; }
2スターハック * html*p { margin: 10px; }
アンダースコアハック p { _margin: 10px; }
インポータントハック p{ /* 通常 */
margin: 10px !important;
/* IE 6以下 */
margin: 10px;
}


IE 6をハック(IE 6のみに効かないハック)
名称 CSS記述例 CSS文法
チャイルドセレクタハック html > body p { margin: 10px; }
隣接セレクタハック head + body p { margin: 10px; }
オーウェンハック head:first-child + body p { margin: 10px; }
属性セレクタハック html[xmlns] p { margin: 10px; }


IE 6/7をハック(IE 6とIE 7に効くハック )
名称 CSS記述例 CSS文法
スター7ハック html*p { margin: 10px; }
ハッシュハック p { #margin: 10px; }
アスタリスクハック p { *margin: 10px; }
全角スペースハック p{ /* 通常 */
margin: 10px;
/* IE 6/7 */
 margin: 10px;
}


IE 6/7をハック(IE 6とIE 7に効かないハック)
名称 CSS記述例 CSS文法
コメントハック p/* */ { margin: 10px; }


IE 8のみに効くハック
名称 CSS記述例 CSS文法
ファーストチャイルドハック html:first-child p { margin: 10px; }


<補足>
firefoxのみに効く、モズドキュメントハックとコメントモズエニーリンクハックもあるようですが、W3C/CSSValidationでは文法エラーになってしまいます。

モズドキュメントハック
@-moz-document url-prefix() { p { margin: 10px; } }

コメントモズエニーリンクハック
html>/**/body p, x:-moz-any-link { margin: 10px; }

CSSのおすすめ本
現場のプロから学ぶXHTML+CSS
CSSのことだけ書かれた本ではないですが、コーディングする際に役に立つ情報満載です。HTML+CSSをはじめて間もない方や、中級者の方でも自分のやりかたに不安がある方はお手に取ってみてみてください。
個人的オススメ度:★★★★

Web標準テキスト(2) CSS (Web標準テキストシリーズ)
CSSについて書かれた本です。私は、ネット上でCSSの情報を拾ってきてばかりいたので、自分の知識を整理するために購入しました。会社の机の上にいつも置いてます。(誤植が多いらしいです。)
個人的オススメ度:★★★

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
知ってることも多いかもしれませんが、きっと、すぐ役立つ本だと思います。
個人的オススメ度:★★★★

明度差、色差チェッカー(WCAG1.0)

December 05 [Sat], 2009, 20:46


アクセシビリティに配慮したWebサイトを作るためにW3C/WCAG1.0では、背景色と文字色のコントラストを十分にとることが優先度2になっていますよね。

計算式もあります。

明度差の計算式
((Rの値 X 299) + (Gの値 X 587) + (Bの値 X 114)) / 1000

背景色と文字色の差は「125」以上あるべき、だそうです。


色差の計算式
(最大 (Rの値 1, Rの値 2) - 最小 (Rの値 1, Rの値 2)) + (最大 (Gの値 1, Gの値 2) - 最小 (Gの値 1, Gの値 2)) + (最大 (Bの値 1, Bの値 2) - 最小 (Bの値 1, Bの値 2))

背景色と文字色の差は「500」以上あるべき、だそうです。


そこで、シミュレータがあったら、便利かなーと思って作ってみました。

(外部ページへリンクしてます→)明度差、色差チェッカー(js版)

シミュレータを作った後、試していて思ったんですが、色差が結構厳しくデザイナー泣くかも、です。


それから私のより、もっと優れたのがあったのでご紹介します。

KANZAKIさん(外部ページ)
http://www.kanzaki.com/docs/html/color-check

インフォアクシアさん(外部ページ)
http://www.infoaxia.com/tools/cca/index.html

kei3.jpさん(外部ページ)
http://www.kei3.jp/diary.php?id=6574




(2010.9.17追記)
なんと!私が作ったシミュレータを次のブログでご紹介いただきました。ありがとうございます

カラーバリアフリーを意識したサービスの向上(livedoorディレクターブログ)
この記事では、視覚に障害を持ってる方が、実際にどう見えているかを紹介した画像もありますので、よかったら是非。

cmosチェックサムエラー

November 17 [Tue], 2009, 21:02


パソコンの電源をいれたら、cmosチェックサムエラーがでました。
2回目のcmos Checksum errorなので少し落ち着いていられました。

今回のパソコンは5年位前に中古で買った富士通FMV DESKPOWER ME3/507で、VineLinux4.xをいれてます。

なんとか起動するので、そのまま使っていたのですが、Gmailでメールを送ろうとした時、証明書の有効期限についてのエラーがでました。

BIOSの日付を確認してみると、1999年1月1日にリセットされていたので、再設定したところ、無事Gmailでメールを送ることが出来ました。

その後、パソコンを起動してもcmosチェックサムエラーはでなくなりましたが、中古で買ってから5年くらい経過してるし、ボタン電池の寿命は4、5年と書いてある記事を読んだので、ボタン電池を入れ替えることにしました。

ボタン電池はマザーボードについてます。時間やメモリの容量などを記憶するのに電気が必要なのでボタン電池で供給しています。

今回はこのボタン電池が寿命で電気を供給できなくなったため、BIOSの日にち設定が狂い、cmosチェックサムエラーになったのではないか、と予測しました。








パソコンに溜まっている電気を放電します



* パソコンの電源ケーブルや周辺機器のケーブルを抜きます
* しばらく放置します※(この間ボタン電池の型番を調べて買いに行ったり、、、)
* マザーボード上のボタン型電池を外します
* また、放置します※
* パソコンの電源ボタンを5-6回押します。リセットボタンがあれば、それも5-6回押します
* マザーボードに新しいボタン電池を装着します
* ケーブルを繋ぎます

※放置は念のために行いました。電源ボタンを押すと、スイッチ周りに帯電している電気が放電されるそうなので、放置しなくてもいいのかもしれません、、、

パソコンの電源をいれてBIOS画面を呼び出して入り、日付と時間の設定をします。

これで、cmosチェックサムエラーはでなくなりました!
P R
チケットぴあ
プロフィール
  • プロフィール画像
  • アイコン画像 ニックネーム:movieee
  • アイコン画像 性別:女性
  • アイコン画像 血液型:B型
  • アイコン画像 職業:専門職
読者になる
Webデザイン、コーディングをしています。
パソコンが好きでいろいろ触っては壊して、、、を繰り返してます。組み立てる事も楽しいですが、解体するほうがもっと楽しいです。
このブログはパソコンの不具合やコーディングで困ったことを主に書いています。
もう一つコーディングに関してのブログ書いています。よかったら遊びに来てください!

最近読んだおすすめの本

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
XHTMLの文法や規格を習得したい方へ…

佐藤可士和の超整理術
仕事や日常をデザインしたい方へ…

デザイン・ルールズ デザインをはじめる前に知っておきたいこと
初心へ帰りたいデザイナーの方へ…

Yapme!一覧
あわせて読みたいブログパーツ