年末ですね

2007/12/29 土曜日

カテゴリー: つれDUれ — ぴ @ 16:40:15

昨日で仕事納めでした。昨日納品の案件があったので、ラスト1週間は怒涛のコーディングラッシュでしたよ。

それでは皆さん、酔いぉ年を。

mixi wordpress テーマ ver.0.0.4(バグ取り完了っぽい)

2007/12/22 土曜日

カテゴリー: (X)HTML, CSS, wordpress, ヲチらせ — ぴ @ 2:45:49

僕が作ってるwordpress用のmixiっぽいテンプレートですが、最後のバグ取り(Safariでカレンダーのボーダーが正しく表示されない)が完了しました。

safariって、Web標準に一番近い挙動で動くブラウザですが、これが結構対応がわかんなかった。

厳格なのか何なのかわかんないんですが、tableのwidthが178pxなのに、captionのwidthが180pxになっていたので、caption分がtableの枠からはみ出して、 右ボーダーを正しく表示できてなかったようです。サイズ揃えたら、いとも簡単に表示されたお(´ω`)

そんな、最新版のmixi風wordpressテンプレートのダウンロードはこちら

デザインちょっちリニューアル

2007/12/20 木曜日

カテゴリー: (X)HTML, CSS, ヲチらせ — ぴ @ 17:38:17

ひろぽっぽれすのデザインをちょっちいじりました。ヘッダー部分をもちっといじっていこうと思います。

CSS画像置換について

カテゴリー: (X)HTML, CSS — ぴ @ 15:58:36

こんちゃす。海外のCSSデザインを見ていたら、text-indent: -9999px; とは違う画像置換方法を見つけました。(既出かも)

旧式では、CSS側で、text-indent: -9999px; などと指定して、テキストを飛ばして、バックグラウンドに画像を指定する下記のようなテクニックを使います。

text-indent: -9999px を使ったテクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
	text-indent: -9999px; /*ここでテキストを飛ばす*/
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}

しかし、これでは、キーボードでのタブ移動の際に選択がわかりにくくなって、アクセシビリティ的によくないとのことから、display: none; を使った画像置換テクニックもあります。

display: none; を使った画像置換テクニック

(X)HTML側

<div><a href="#"><span>テキスト</span></a></div>

CSS側

div a {
	display: block;
	width: 45px;
	height: 45px;
	background: url(images/bg_off.gif) no-repeat 0 0;
}
div a:hover {
	background: url(images/bg_on.gif) no-repeat 0 0;
}
div span {
	display: none; /*テキストを表示させない。*/
}

fontまわりのハックについて

2007/12/19 水曜日

カテゴリー: CSS — ぴ @ 15:05:11

* (ユニバーサルセレクタ)ですべてのフォントサイズを100%に
して、そこからタグごとの指定をするのが定石です。

* {
      font-size: 100%;
}
p {
      font-size: 80%;
}

この記述をハックを使用して記述するとこうなります。

body {
      font-size: 12px; /*モダンブラウザ*/
      _font-size: x-small; /*IE*/
}

でもこのハックはIE7では有効ではなくて、font-size: 12px; で
絶対指定することになってしまいます。
なので、「*(アスタリスク)ハック」を使用します。

body {
      font-size: 12px; /* モダンブラウザ */
      *font-size: small; /* IE 7 */
      *font: x-small; /* IE 6以下 */
}

ショートハンドのfont プロパティには、font-sizeとfont-familyの値が
必須となります。なので、3行目の技術は不正なプロパティとなり、
仕様に準拠しているブラウザでは無視され、IEだけ読み込んでしまいます(笑)

で、これらの文法違反をクリアしようとするとこうなります。

body {
      font-size: small !important; /* IE 7向け */
      font-size: x-small; /* IE 6以下 */
}
html>/**/body {
      font-size: 13px; /* モダンブラウザ向け */
}
次ページへ »