<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>CSS &amp; xhtml</title>
    <link rel="alternate" type="text/html" href="http://101lab.net/css/" />
    <link rel="self" type="application/atom+xml" href="http://101lab.net/css/atom.xml" />
    <id>tag:101lab.net,2007-09-16:/css//29</id>
    <updated>2007-09-17T09:55:07Z</updated>
    <subtitle>CSSとxhtmlの覚え書きとサンプル</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Publishing Platform 4.0</generator>

<entry>
    <title>リンク</title>
    <link rel="alternate" type="text/html" href="http://101lab.net/css/2007/09/post-13.html" />
    <id>tag:101lab.net,2007:/css-tips//29.1988</id>

    <published>2007-09-16T10:21:35Z</published>
    <updated>2007-09-17T09:55:07Z</updated>

    <summary> Another HTML-lint gateway ABC Web Site ...</summary>
    <author>
        <name>101</name>
        <uri>http://101lab.net/blog/</uri>
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://101lab.net/css/">
        <![CDATA[<dl>
<dt>
<a title="Another HTML-lint gateway" href="http://openlab.ring.gr.jp/k16/htmllint/htmllint.html" >Another HTML-lint gateway</a></dt>
<dd>ABC</dd>

<dt>
<a title="Web Site 作成支援 - [HTML、XHTML、CSS、W3C勧告邦訳、ウェブサイト開発情報]" href="http://www.nextindex.net/web/index.html" >Web Site 作成支援 - [HTML、XHTML、CSS、W3C勧告邦訳、ウェブサイト開発情報]</a></dt>
<dd>ABC</dd>

</dl>]]>
        
    </content>
</entry>

<entry>
    <title>文脈セレクタ</title>
    <link rel="alternate" type="text/html" href="http://101lab.net/css/2007/09/post-4.html" />
    <id>tag:101lab.net,2007:/css-tips//29.1970</id>

    <published>2007-09-16T07:01:35Z</published>
    <updated>2007-09-17T15:29:32Z</updated>

    <summary>CSS1 では文脈セレクタは要素の木構造に対して先祖、子孫 全称セレクタであるワ...</summary>
    <author>
        <name>101</name>
        <uri>http://101lab.net/blog/</uri>
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://101lab.net/css/">
        CSS1 では文脈セレクタは要素の木構造に対して先祖、子孫

全称セレクタであるワイルドカード * （アスタリスク）

div * p { font-size: 10.5pt }

* 前後の半角スペースに注意

子供セレクタ

子要素だけを指定したい場合、「大なり」不等号記号

IEはだめ。

隣接セレクタ

或る要素の共通の子要素であり、且つ相前後して隣接する要素にマッチ

h1 + h2 { margin-top: -5mm }
        
    </content>
</entry>

<entry>
    <title>height100%のボックス</title>
    <link rel="alternate" type="text/html" href="http://101lab.net/css/2007/09/height100.html" />
    <id>tag:101lab.net,2007:/css-tips//29.1962</id>

    <published>2007-09-16T05:03:52Z</published>
    <updated>2007-09-16T05:04:55Z</updated>

    <summary> ...</summary>
    <author>
        <name>101</name>
        <uri>http://101lab.net/blog/</uri>
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://101lab.net/css/">
         
        
    </content>
</entry>

<entry>
    <title>イメージ無しのblockquoteで引用を表示するCSSサンプル</title>
    <link rel="alternate" type="text/html" href="http://101lab.net/css/2006/11/blockquotecss.html" />
    <id>tag:101lab.net,2006:/css-tips//29.1992</id>

    <published>2006-11-27T03:04:37Z</published>
    <updated>2007-09-20T03:06:24Z</updated>

    <summary>イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザ...</summary>
    <author>
        <name>101</name>
        <uri>http://101lab.net/blog/</uri>
    </author>
    
        <category term="Tips" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="blockquote" label="blockquote" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://101lab.net/css/">
        <![CDATA[<p><a href="http://weblibrary.s224.xrea.com/weblog/css/cat15/blockquotecss.html">イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザイン　BLOG</a>:より。 </p>
<blockquote>
<p>blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。</p>
</blockquote>
<p>「<a href="http://weblibrary.s224.xrea.com/weblog/index.html" title="WEBデザイン　BLOG">WEBデザイン　BLOG</a>」は恥ずかしながら最近知ったのですが、内容もデザインも素晴らしいサイト。思いっきり影響受けました。</p>

<p>blockquoteに関しては僕も長い事悩んでいまして、最近<a href="http://alistapart.com/" title="A List Apart: A List Apart">A List Apart: A List Apart</a>のCSSを参考に（&#133;&#133;というかほとんどそのまま）利用する事に落ち着いたばかり。こちらはオーソドックスに画像での処理。</p>

<p>一方紹介してくれているひとつは画像ではなく文字を<code>&lt;span&gt;&lt;/span&gt;</code>でくくる方法ですが、やはりちょっと美しくはないですよね。普通に、</p>

<code>&lt;blockquote&gt;&lt;p&gt;引用文&lt;/p&gt;&lt;/blockquote&gt;</code>

<p>で行きたい所。</p>

<p>CSS疑似要素要素（:beforeと:after）を利用するのがやはりいいのかな。IEでは適用されませんけれど、htmlソースをデザインのためにいじるのは最後の手段かなあと思います。インクルードしているヘッダやフッタなどはOKだと思いますけれどね。</p>]]>
        
    </content>
</entry>

</feed>
