PERUTORO -小樽の新米ウェブデザイナーのブログ- » css

css3で画像の半透明化。IEも可。

masa — Tue, 20 Apr 2010 11:21:48 +0000

わざわざ半透明の画像を作ったりしなくても、cssで透過指定が出来るって凄い便利。でも相変わらず、IEは未対応なのですが、なんとか出来るは出来るようで。

filter: alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;

これでIEでも、cssで画像の透過指定が出来ます。

文字が折り返さず、枠をはみ出て表示される対処法。

masa — Sat, 17 Apr 2010 03:05:37 +0000

URLや、「あーーーーーー」等、枠からはみ出て表示される文字を折り返す方法。css、ちゃんと基礎から勉強し直さないとだなぁ…。

word-wrap: break-word;

これだけで折り返して表示されるはず。。。他にもいろいろ対処法はあるみたいですが、僕が遭遇した環境では、この書き方でokでした。今後の為にもメモメモ。

IE6で文字が繰り返されるバグ。

masa — Wed, 07 Apr 2010 02:15:28 +0000

またIE6。もう嫌だーって思ってましたが、すぐ解決策は見つかりました。詳細は下記サイト参照。

IE6で、文字(画像)が複製されてズレる – Archiva

複数のfloat要素が重なった場合に発生する事があるバグって事ですかね。上のサイトでも書いてありましたが、それなり有名なバグらしい。「Explorer 6 Duplicate Characters Bug」。とりあえず解決策は、実際に繰り返されるタグ（僕が見たのはpタグ）に「margin-right: -3px;」と振れば良いとの事。

うちの場合は、これだけで解決されましたが、バグが出る環境によると思いますので、もしこんな現象に遭遇したら試してみて下さい。

css3で@font-face。IEも対応してるってのがびっくり。

masa — Sun, 28 Mar 2010 16:42:36 +0000

css3、ちょっとずつ見るようになりました。IEの対応はほぼ全滅のようですが、IE9ではちゃんと対応されそう？まぁそれはいいとして、css3はデザイナーやコーダーからすると、嬉しい機能が満載です。ただ現状では、残念な事に上記の通りIEはほぼ全滅。FirefoxやOperaは半分ほど。現状ではSafariやChromeがいい感じっぽいです。

で、そのcss3の機能の一つで、Webfonts機能ってのがあります。この機能、IEはVer4から対応出来ているそう。この機能を使えば、制作者が用意したフォントを、見ているユーザーのパソコンにそのフォントがインストールされていなくても、テキストとして表示させることが出来る機能。すごい便利。これがあれば、使いたいフォントで画像を作って置換えなどする必要がない。SEO的にもgood。という事で、このサイトもリニューアルする時にWebFonts機能を使ってみる事に。タイトルのロゴや、サイドバーのメニュータイトルに使用予定。どうなるかなー。

新しい技術は、出来るだけ使っていこうと思う今日この頃でした。

CSSでIE6でも透過PNGを表示させる方法。

masa — Sat, 06 Mar 2010 16:26:30 +0000

便利だったので、メモ。まぁIE6はそろそろ消えそうな雰囲気もありますが…覚えておくに越したことはないかと。

下記にhtmlの例。

サンプル

下記にcssの例。

li a{
	display: block;
	width: 100px;
	height: 70px;
	text-indent: -9999px;
}
li.sample a {
	background: url(sample.png);
}
li.sample a:hover {
	background: url(sample_on.png);
}
* html li.sample a {
	filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='sample.png',sizingMethod='scale');
	background: none;
}
* html li.sample a:hover {
	filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='sample_on.png',sizingMethod='scale');
	background: none;
}

以上です。

サンプル作ってみました。　サンプルはこちらから

DirectX filter AlphaImageLoader っていう物らしいです。こんな方法があったんだなー…まだまだ知らない事だらけです。

デザインリニューアルと、W3C準拠しよう。

masa — Tue, 02 Mar 2010 14:27:18 +0000

報告？が遅れましたが、リニューアルしました。ようやっとー…って感じです。なんだかんだで、海外のウェブサイトデザインのチュートリアルに載っていたデザインを真似た感じ。100％…とは言わなくても、自分の頭で考えたデザインで、納得出来るものが作りたいですね。理想と実力が伴わない感じ。もっと精進しないと…！！

さて。ところで、リニューアルしてコーディングは本当に1からやったんですが、せっかくだしW3Cに準拠したサイトにしよう！といろいろやってみました。結果的に、css,htmlの両方でクリアして、Another HTMLというサイトもクリア。とりあえずはまぁ満足ですかね。
ただ、最初は散々でしたｗ　ボロボロの点数で、エラーの場所を直しながら調べながらでなんとか…って感じ。

Another HTML -ling gateway : HTMLのチェック。どこをどう直すかも調べられる。

W3C CSS 検証サービス : 名前の通り、W3CのCSSチェックサービス。これは一発OKでした。

W3C Markup Validation Service : W3Cのhtmlのチェックサービス。Another HTMLで修正してからやると、一発OKでした。

勉強にもなるので、試してみるといいかもですよ。