memo.xight.org

- Summary
以下のように，ユニバーサルセレクタを用いたCSSのリセットは，レンダリング速度の面で問題．

 * {
    margin: 0;
    padding: 0;
}

html, body,  {
    margin: 0;
    padding: 0;
}
 
h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
    margin: 1em 0;
    padding: 0;
}

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}

- Demo
CSS Speech Bubbles
http://www.willmayo.com/journal/projects/07/bubbles/

- Reference
willmayo.com - CSS Speech Bubbles
http://www.willmayo.com/2007/02/10/css-speech-bubbles/

- Reference
Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework
http://www.yaml.de/

- Demo
Dustin Bachrach
http://www.dbachrach.com/

- Reference
Dustin Bachrach Blog - A Cool CSS Effect - Dashboard [Updated x2]
http://dbachrach.com/blog/2006/10/a-cool-css-effect-dashboard/

- via
MOONGIFTニュース - CSS/JavaScriptだけでDashboard風のイフェクトを行うTips
http://news.moongift.jp/i-2947.html

- Reference
OverZone Software - CSS Tab Designer
http://www.highdots.com/css-tab-designer/

- via
phpspot開発日誌 - 2006-11-30 - CSSなタブインタフェースを簡単に作成できる「CSS Tab Designer」
http://phpspot.org/blog/archives/2006/11/csscss_tab_desi.html

- Summary
CSSによるタブメニューを生成するソフトウェア．
予めテンプレートが登録されているため，簡単にメニューが生成可能 ．

- Reference
OverZone Software - CSS Tab Designer
http://www.highdots.com/css-tab-designer/

- via
MOONGIFT - CSS Tab Designer - CSSによるメニューを簡単に作成
http://fw.moongift.jp/intro/i-2867.html

MOONGIFT - CSS Tab Designer レビュー
http://fw.moongift.jp/review/i-2868.html

- Reference
phpspot開発日誌 - 2006-11-20 - CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例:
http://phpspot.org/blog/archives/2006/11/css_16.html

- Summary
line-height の値に単位をつけて 1em とした場合

p {
	font-size: 16px;
	line-height: 1em;
}
p em {
	font-size: 24px;
}

p {
	font-size: 16px;
	line-height: 1;
}
p em {
	font-size: 24px;
}

p {
	font-size: 16px;
	line-height: 1em = 16px;
}
p em {
	font-size: 24px;
	line-height: 16px;
}

p {
	font-size: 16px;
	line-height: 1 = 16px;
}
p em {
	font-size: 24px;
	line-height: 24px;
}

- Summary
画像の幅，高さがわかっていれば，CSSのみで画像をポップアップさせることが可能．

- Reference
hail2u.net - 画像のポップアップ
http://hail2u.net/pub/test/076.html

hail2u.net - Weblog - Linksをサムネイル化した
http://hail2u.net/blog/webdesign/thumbnailed-links.html

- Summary
Jimmy Lin による XHTML + CSSのテンプレート集．
1段組, 2段組, 3段組の固定幅，流動幅(リキッドレイアウト)のテンプレート集．

- 対応ブラウザ
Internet Explorer 5.0+
Firefox 1.5
Opera 8.5
Safari 2

- Reference
Jimmy Lin - Templates
http://www.jimmylin.info/templates.html

- via
phpspot開発日誌 - 2006-09-19 - ValidなCSS/XHTMLテンプレート集
http://phpspot.org/blog/archives/2006/09/validcssxhtml.html

- Summary
<a>タグの href属性の末尾が '.pdf' , '.doc' ,'.zip'の要素をピックアップ．
対象の<a>タグにclass名を付加する．

例では，pdfLink , docLink, zipLinkというclass名を使用．
各々のclassには，拡張子と対応する画像が指定してある．

- Source
リンク先がPDF，Wordファイル，Zipファイルの<a>タグに，class名を付ける．

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}

a:hover {
    text-decoration: none;
}
.pdfLink {
    padding-right: 19px;
    background: url(pdf.gif) no-repeat 100% .5em;
}
.docLink {
    padding-right: 19px;
    background: url(doc.gif) no-repeat 100% .5em;
}
.zipLink {
    padding-right: 17px;
    background: url(zip.gif) no-repeat 100% .5em;
}

- Reference
css Zen Garden: The Beauty in CSS Design
http://www.csszengarden.com/?cssfile=/156/156.css&page=0

- via
Creative Nights - Digital Portfolio of Marko Dugonji-
http://www.creativenights.com/

- 方法
1. <textarea>
Ctrl+A で Copy & Paste が楽．

2. <pre> + CSS

3. <pre> + <code> + CSS

4. <textarea> + dp.SyntaxHighlighter[2006-06-12-7]

- CSSの例

pre.code {
	font-family: monospace;
	white-space:pre;
	overflow:scroll;
}

" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction

:call HtmlEscape()

- Summary
背景画像に透過GIFを利用することで，
背景色を変えるだけで様々なパターンのデザインが利用できるようになる．

- CSS

body {
	background: #fa0 url(stripe_1px.gif);
}

- Reference
- via
phpspot開発日誌 - 2006-08-29 - CSSの便利ツール集
http://phpspot.org/blog/archives/2006/08/css_8.html

- CSSを利用した画像置換によるアクセシビリティ上の懸念
CSSによる画像置換は「CSSが有効，かつ画像は非表示」という閲覧環境で，文字も画像も表示されなくなる．

ナローバンドでインターネット接続をしているユーザが，帯域を有効活用するため，
「CSSが有効，かつ画像は非表示」の設定を行っている可能性がある．

ミツエーリンクスの意見は

コンテンツとして有意な画像，文字情報を含んでいる画像については，
CSS側から表示を制御するよりも，img要素として (適切なalt属性値とともに) マークアップしたほうが，
アクセシビリティ的には好ましいでしょう．

- CSSを利用した画像置換によるSEO上の懸念
非可視化されるテキストの内容が，置き換えられる画像の内容が等価ではないと考えられる場合，
SEOスパムとして認められる可能性がある．

テキストと画像の内容が等価であれば問題はない．
また，画像が表現している情報とテキストの内容の等価性を機械的かつ自動的に検証することは困難．

よって，CSSを利用した画像置換を利用しても問題ないと考えられる．

- Reference
ミツエーリンクス - Web標準Blog - 2005-06-10 - 画像置換という手法
http://standards.mitsue.co.jp/archives/000038.html

ミツエーリンクス - Web標準Blog - 2006-02-24 - 画像置換とSEOスパム
http://standards.mitsue.co.jp/archives/000153.html

456 Berea Street - 2005-10-21 - Google, SEO and using CSS to hide text
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/

- Demo
Tapping into your browser history
http://icant.co.uk/sandbox/nickhistory.html

- Reference
techfoolery - 2006-08-21 - A New Way of Tracking Users' Browsing Habits
http://techfoolery.com/archives/2006/08/21/2042/

- via
phpspot開発日誌 - 2006-08-25 - CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析
http://phpspot.org/blog/archives/2006/08/cssjavascriptor.html

- Summary
以下の6つのサイトを使って，CSS圧縮サービスのIcey Compressor, Clean CSS[2006-06-19-17], CSS Optimiser, Flumpcakesを比較．

Digg.com
Slashdot
Filmsy
iBegin
Download.com
ESPN

- 結果

- Reference
hail2u.net - Weblog - CSSコーディング・スタイル
http://hail2u.net/blog/webdesign/css-coding-style.html

CSSTidy
http://csstidy.sourceforge.net/

- Summary

 * { outline: 2px dotted red }
 * * { outline: 2px dotted green }
 * * * { outline: 2px dotted orange }
 * * * * { outline: 2px dotted blue }
 * * * * * { outline: 1px solid red }
 * * * * * * { outline: 1px solid green }
 * * * * * * * { outline: 1px solid orange }
 * * * * * * * * { outline: 1px solid blue }