<?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>MetaLoop &#187; CSS</title>
	<atom:link href="http://blog.tpop.jp/category/programming/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.tpop.jp</link>
	<description>ブログ、です。</description>
	<lastBuildDate>Sun, 04 Apr 2010 01:46:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS Tips:コメントアウト</title>
		<link>http://blog.tpop.jp/2007/02/03/css-tips%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88/</link>
		<comments>http://blog.tpop.jp/2007/02/03/css-tips%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88/#comments</comments>
		<pubDate>Sat, 03 Feb 2007 12:38:13 +0000</pubDate>
		<dc:creator>so-me-e-da</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://blog.someeda.com/2007/02/03/css-tips%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88/</guid>
		<description><![CDATA[ふつー、CSSのコメントは
/* */、もしくは &#60;!&#8211; &#8211;&#62;で囲う。（W3C:Comments)
が、しかしだ、こんな方法で行う事もできる。
A trick I use all the time to temporarily disable a style attribute involves simply adding an &#8216;x&#8217; in front of the attribute name. It&#8217;s safer then cutting and quicker then commenting out:

1234567#footer{

&#160;border-top: 1px solid #e5e5e5;

&#160;xborder-bottom: 1px solid #e5e5e5;

&#160;}


Squeaky Clean CSS

border-bottom属性をコメントアウトするのに、先頭に&#8217;x'を付けている。なるほど、文法が間違っているわけでは無いから、こういう方法もあるのか。知らない人が見たらコメントだとも思えないのが欠点だけど、作業中のスピードアップが計れるのが良い所。
実際に仕事で使うとしたら、リリースする時に実行するスクリプトというのを作って、自動で&#8217;x'が先頭に付いた属性を削除するべきかな。これをそのまま納品するのは避けないと。納品前にはlintで文法チェックしすべし。（Webアプリケーションではみんなどうしているんだろう、ふと疑問に思った。）
Squeaky Clean CSSでは他のTipsもあって、CSSを見やすくするためのグループ化、インデントで見やすくする、&#60;div&#62;タグを閉じる方にid名をコメントで記述する等、ありがちではあるけど大事な事ばかり。インデントのスタイルに関してはそれぞれポリシーもあるだろうけど、書いた人の考えが出てくる部分でもあるので、結構他人の書き方は参考になる。
CSSセレクタの指定が重なる時に優先されるのは？
Squeaky Clean CSSからリンクされていた、他のページにも面白い記事があった。CSSではidやclass、タグを指定（セレクタと呼ばれる機能）して、色や大きさ等の属性を設定するのだが。指定が重なった時には何が優先されるのかを、この記事では解説してた。しかもスターウォーズに例えて!
Join me, and together we can rule the [...]]]></description>
			<content:encoded><![CDATA[<h2 class="posttitle" id="post-57">ふつー、CSSのコメントは</h2>
<p>/* */、もしくは &lt;!&#8211; &#8211;&gt;で囲う。（<a href="http://www.w3.org/TR/CSS21/syndata.html#comments">W3C:Comments</a>)</p>
<p>が、しかしだ、こんな方法で行う事もできる。</p>
<blockquote><p>A trick I use all the time to temporarily disable a style attribute involves simply adding an &#8216;x&#8217; in front of the attribute name. It&#8217;s safer then cutting and quicker then commenting out:</p>
<pre>
<div class="codecolorer-container text blackboard" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="text codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">#footer{<br />
<br />
&nbsp;border-top: 1px solid #e5e5e5;<br />
<br />
&nbsp;xborder-bottom: 1px solid #e5e5e5;<br />
<br />
&nbsp;}</div></td></tr></tbody></table></div>

<a href="http://www.huddletogether.com/2006/02/16/practical-web-development-tips/" rel="bookmark" title="Permanent link to Squeaky Clean CSS"></a></pre>
<pre><a href="http://www.huddletogether.com/2006/02/16/practical-web-development-tips/" rel="bookmark" title="Permanent link to Squeaky Clean CSS">Squeaky Clean CSS</a></pre>
</blockquote>
<p>border-bottom属性をコメントアウトするのに、先頭に&#8217;x'を付けている。なるほど、文法が間違っているわけでは無いから、こういう方法もあるのか。知らない人が見たらコメントだとも思えないのが欠点だけど、作業中のスピードアップが計れるのが良い所。</p>
<p>実際に仕事で使うとしたら、リリースする時に実行するスクリプトというのを作って、自動で&#8217;x'が先頭に付いた属性を削除するべきかな。これをそのまま納品するのは避けないと。納品前にはlintで文法チェックしすべし。（Webアプリケーションではみんなどうしているんだろう、ふと疑問に思った。）</p>
<p><a href="http://www.huddletogether.com/2006/02/16/practical-web-development-tips/" rel="bookmark" title="Permanent link to Squeaky Clean CSS">Squeaky Clean CSS</a>では他のTipsもあって、CSSを見やすくするためのグループ化、インデントで見やすくする、&lt;div&gt;タグを閉じる方にid名をコメントで記述する等、ありがちではあるけど大事な事ばかり。インデントのスタイルに関してはそれぞれポリシーもあるだろうけど、書いた人の考えが出てくる部分でもあるので、結構他人の書き方は参考になる。</p>
<p><strong>CSSセレクタの指定が重なる時に優先されるのは？</strong></p>
<p><a href="http://www.huddletogether.com/2006/02/16/practical-web-development-tips/" rel="bookmark" title="Permanent link to Squeaky Clean CSS">Squeaky Clean CSS</a>からリンクされていた、他のページにも面白い記事があった。CSSではidやclass、タグを指定（セレクタと呼ばれる機能）して、色や大きさ等の属性を設定するのだが。指定が重なった時には何が優先されるのかを、この記事では解説してた。しかもスターウォーズに例えて!</p>
<p><a href="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html">Join me, and together we can rule the galaxy as father and geeks!<br />
</a></p>
<p>内容はともかく、話のたとえでスターウォーズの画像を作って掲載されているので。まずはそちらをチェック。</p>
<p>一応自分のために内容を要約しておくけど。このページによればCSSのセレクタのそれぞれを、idは1、classは10、タグは100と考えて、それぞれを足した数の大きい方が優先されるのだとか。タグの指定が一番強力という事になる。</p>
<p>しかしこの記事のコメントを見て行くと、どうもこれは正確な話では無いらしい。あんまり沢山書いてあってとても読んでいられなかったけど、<strong>タグ＞class＞id</strong>という関係があるんだな〜という程度を知っていれば、とりあえずは十分かと。</p>
<p>きちんと知りたい人は、迷わず<a href="http://www.w3.org/">http://www.w3.org/</a>へ！</p>]]></content:encoded>
			<wfw:commentRss>http://blog.tpop.jp/2007/02/03/css-tips%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
