2007-02-21 Wed
ユニバーサルセレクタを利用せず,デフォルトのCSSをリセットする
- 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; }
- YUI Reset CSSの例
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; }
- Reference
Emotional Web - *{ margin : 0 }はもう古い!?
http://www.lllcolor.com/archives/200702/margin0.html
Yahoo! UI Library: Reset CSS
http://developer.yahoo.com/yui/reset/
2007-02-13 Tue
CSS Speech Bubbles - CSSで吹き出しを作る
- 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/
2006-12-17 Sun
Yet Another Multicolumn Layout - マルチカラムのHTML/CSSテンプレート
- Reference
Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework
http://www.yaml.de/
2006-12-01 Fri
CSS/JavaScriptだけでDashboard風のイフェクト
- 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
2006-11-30 Thu
CSS Tab Designer - XHTML + CSS のタブメニューを生成できるソフトウェア
- 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
2006-11-27 Mon
CSS Tab Designer - CSSによるタブメニューを生成するソフトウェア
- 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
2006-11-21 Tue
CSSと透過画像を用いてグラデーション背景を実現する
- Reference
phpspot開発日誌 - 2006-11-20 - CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例:
http://phpspot.org/blog/archives/2006/11/css_16.html
2006-11-18 Sat
CSS の line-height の値は単位なしが良い
- Summary
line-height の値に単位をつけて 1em とした場合
p { font-size: 16px; line-height: 1em; } p em { font-size: 24px; }
line-height の値に単位をつけずに 1 とした場合
p { font-size: 16px; line-height: 1; } p em { font-size: 24px; }
- line-height の継承に差が発生する.
line-height の値に単位をつけて 1em とした場合
p { font-size: 16px; line-height: 1em = 16px; } p em { font-size: 24px; line-height: 16px; }
line-height の値に単位をつけずに 1 とした場合
p { font-size: 16px; line-height: 1 = 16px; } p em { font-size: 24px; line-height: 24px; }
- Reference
Lucky bag::blog: line-height の値には単位なしが良いとされる理由
http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html
Lucky bag::blog: line-height の値には単位なしが良いとされる理由サンプル
http://www.lucky-bag.com/appendix/line-heights-sample.html
- via
日本の総理大臣の演説をタグクラウド化: blog.bulknews.net
http://blog.bulknews.net/mt/archives/002078.html
2006-09-29 Fri
CSSで画像のポップアップ
- Summary
画像の幅,高さがわかっていれば,CSSのみで画像をポップアップさせることが可能.
- Reference
hail2u.net - 画像のポップアップ
http://hail2u.net/pub/test/076.html
hail2u.net - Weblog - Linksをサムネイル化した
http://hail2u.net/blog/webdesign/thumbnailed-links.html
2006-09-19 Tue
XHTML + CSSのテンプレート集
- 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
2006-09-07 Thu
リンク先の拡張子に応じて自動的に画像を付加
- 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
maratz.com - 2005-01-13 - PDF Links Labeling
http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
maratz.com - PDF Link Labeling Example
http://webdesign.maratz.com/lab/pdf_links_labeling/
2006-09-07 Thu
Table Layout Assassination - テーブルレイアウトの暗殺
- 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/
2006-09-07 Thu
Webページにソースコードを表示するには
- 方法
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; }
- vimの設定
.vimrc に記述
" html escape function :function HtmlEscape() silent s/&/\&/eg silent s/ silent s/>/\>/eg :endfunction
対象範囲を選択後,
:call HtmlEscape()
- Reference
i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_129.html
404 Blog Not Found:ソースを貼付ける50の方法
http://blog.livedoor.jp/dankogai/archives/50621177.html
hail2u.net - Weblog - pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html
2xup - 2006-09-07 - pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056
hxxk.jp - 2006-09-06 - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://hxxk.jp/2006/09/06/2210
i d e a * i d e a - 2006-09-07 - ソースの貼り付け方法その後
http://www.ideaxidea.com/archives/2006/09/post_131.html
2006-09-07 Thu
背景画像に透過GIFを利用して,背景の更新を楽にする
- Summary
背景画像に透過GIFを利用することで,
背景色を変えるだけで様々なパターンのデザインが利用できるようになる.
- CSS
body { background: #fa0 url(stripe_1px.gif); }
- Sample
斜線 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample01.html
斜線 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample02.html
市松模様 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample03.html
市松模様 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample04.html
ストライプ (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample05.html
ストライプ (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample06.html
- Reference
Super Stripes
http://webdesign.maratz.com/lab/superstripes/
Lucky bag::blog: 背景画像に使える透過 GIF
http://www.lucky-bag.com/archives/2006/09/background-patterns.html
2006-08-30 Wed
CSSの便利ツール集
- Reference
- via
phpspot開発日誌 - 2006-08-29 - CSSの便利ツール集
http://phpspot.org/blog/archives/2006/08/css_8.html
2006-08-25 Fri
CSSを利用した画像置換による懸念事項
- 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/
2006-08-25 Fri
CSS と JavaScriptを利用した訪問済み,未訪問サイトを分析
- 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
2006-08-22 Tue
CSS圧縮サービス色々と比較
- Summary
以下の6つのサイトを使って,CSS圧縮サービスのIcey Compressor, Clean CSS[2006-06-19-17], CSS Optimiser, Flumpcakesを比較.
Digg.com
Slashdot
Filmsy
iBegin
Download.com
ESPN
- 結果
| Site | CSS Optimiser | Icey Compressor | Flumpcakes | Clean CSS |
| Digg.com | failed | failed | failed | 16.8% |
| Slashdot | 17.45% | 51.21% | 9% | 21.9% |
| Filmsy | 18.85% | 47.08% | 17% | 29.1% |
| iBegin | failed | 55.95% | failed | failed |
| Download.com | failed | 45.49% | 0% | 27.9% |
| ESPN | failed | 69.84% | failed | 27.9% |
| Average: | 18.15% | 53.91% | 8.67% | 24.18% |
- 順位
1. Icey Compressor
2. Clean CSS
3. CSS Optimiser
4. Flumpcakes
- 重要なポイント
・圧縮率の高さ
・再現性の高さ
整形・圧縮をかけた結果,元の表示と違ってしまうというケースが多いようだ.
- Reference
Blogging Pro - 20006-08-17 - CSS Optimization: Make Your Sites Load Faster for Free-
http://www.bloggingpro.com/archives/2006/08/17/css-optimization/
Icey - Projects - CSS Compressor
http://iceyboard.no-ip.org/projects/css_compressor
Clean CSS
http://www.cleancss.com/
Online CSS Optimizer / Optimiser
http://www.cssoptimiser.com/
flumpCakes - Online CSS Optimiser/Optimizer
http://flumpcakes.co.uk/css/optimiser/
CSS Formatter and Optimiser/Optimizer (based on CSSTidy 1.2)
http://www.cdburnerxp.se/cssparse/css_optimiser.php
CSS Tweak
http://www.cssdev.com/csstweak/
Factor CSS
http://zamez.org/factorcss
- via
秋元@サイボウズ研究所プログラマーBlog: CSSの圧縮サービス比較記事
http://labs.cybozu.co.jp/blog/akky/archives/2006/08/css_optimization.html
2006-08-22 Tue
CSSコーディング・スタイル
- Reference
hail2u.net - Weblog - CSSコーディング・スタイル
http://hail2u.net/blog/webdesign/css-coding-style.html
CSSTidy
http://csstidy.sourceforge.net/
2006-08-08 Tue
A Handy CSS Debugging Snippet
- 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 }
- Reference
A Handy CSS Debugging Snippet
http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/