<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>仮ぶろぐ &#187; html/css</title>
	<atom:link href="http://plusb.jp/blog/?cat=7&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://plusb.jp/blog</link>
	<description>今更なことをそれでもつらづらと書くブログ</description>
	<lastBuildDate>Tue, 07 May 2013 09:06:48 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Webにおけるマジックナンバー</title>
		<link>http://plusb.jp/blog/?p=469</link>
		<comments>http://plusb.jp/blog/?p=469#comments</comments>
		<pubDate>Thu, 25 Mar 2010 04:47:23 +0000</pubDate>
		<dc:creator>M. K.</dc:creator>
				<category><![CDATA[html/css]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://plusb.jp/blog/?p=469</guid>
		<description><![CDATA[自分で勝手に認定したマジックナンバーを書き残しておきます。 85% スタイルシートにおける透過の比率です。現状スタイルシートでopacityを設定した場合、背景のみならず全ての子要素も透過していきます。これが85%位だと &#8230; <a href="http://plusb.jp/blog/?p=469">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>自分で勝手に認定したマジックナンバーを書き残しておきます。<br />
<span id="more-469"></span></p>
<h3>85%</h3>
<p>スタイルシートにおける透過の比率です。現状スタイルシートでopacityを設定した場合、背景のみならず全ての子要素も透過していきます。これが85%位だと透過している効果が残りつつ、子要素は明瞭に表示されてとても良い感じです。<br />
まあ、84%でも86%でも良いわけですが・・・</p>
<h3>15.625</h3>
<p>windows版のIEやOpera等のブラウザにおけるタイマーの分解能です。<code>setTimeout(function(){}, <span style="color: #00ccff;">1</span>);</code>と指定しても、実際は約16msです。</p>
<p>これは、Windowsのシステムタイマーの制約による物です。詳細は以下のページが詳しいです。FirefoxやSafari等は別のタイマーを使用しているのか1msの分解能が出ています。</p>
<ul>
<li><a href="http://hp.vector.co.jp/authors/VA007219/rtc_pic.html">WindowsにおけるSleep(1)の精度について</a></li>
</ul>
<p>思いつくたびに追記していきます。</p>
]]></content:encoded>
			<wfw:commentRss>http://plusb.jp/blog/?feed=rss2&#038;p=469</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>アンカーがクリック出来ない</title>
		<link>http://plusb.jp/blog/?p=277</link>
		<comments>http://plusb.jp/blog/?p=277#comments</comments>
		<pubDate>Thu, 11 Feb 2010 08:58:22 +0000</pubDate>
		<dc:creator>M. K.</dc:creator>
				<category><![CDATA[html/css]]></category>

		<guid isPermaLink="false">http://plusb.jp/blog/?p=277</guid>
		<description><![CDATA[なぜだか、ieではクリックできるのにFirefox等のその他ブラウザーではクリック出来ないという現象が発生しました。 答えを先に言ってしまうと、下図のようにDIV要素が上に重なっていた為ですorz。ただし、勘所は別の点に &#8230; <a href="http://plusb.jp/blog/?p=277">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>
なぜだか、ieではクリックできるのにFirefox等のその他ブラウザーではクリック出来ないという現象が発生しました。
</p>
<p><span id="more-277"></span></p>
<p>
答えを先に言ってしまうと、下図のようにDIV要素が上に重なっていた為ですorz。ただし、勘所は別の点にあります。<br />
下の図にあるDIV2はわかりやすくするために色がついていますが、実際には<code>{<span style="color:Red">background-color</span>: <span style="color:#11EEEE;">transparent</span>;}</code>です。<br />
ieの場合、背景色が<code>transparent</code>だと下の要素がクリックできてしまうようです。
</p>
<p><a href="http://plusb.jp/blog/wp-content/uploads/2010/02/link.png"><img src="http://plusb.jp/blog/wp-content/uploads/2010/02/link.png" alt="図1" title="link" width="355" height="300" class="alignnone size-full wp-image-278" /></a></p>
<p>
この場合、そもそもが２段組レイアウトにしょうとしていたのでDIV2に適切に<code>margin-right</code>を設定すれば解決です。
</p>
<p>
逆にlightboxなど、下の要素をクリックさせたくない（かつ透明にしたい）場合は背景色を設定した上で、透明度を0にすればＯＫです。
</p>
<pre>
{
    background-color: White;
    opacity: 0;
    fillter: alpha(opacity=0);
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://plusb.jp/blog/?feed=rss2&#038;p=277</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
