自分用覚え書き @Wiki

メニュー

2013-07-30T11:50:19+09:00

[[トップページ]] #region(デザインについて) - [[まとめサイト>デザインまとめサイト]] - [[お気に入り>最新技術・デザインお気に入りサイトまとめ]] - [[TIPS>基礎知識に関するサイトまとめ]] - [[配色>配色サンプル集]] - [[レスポンシブwebデザイン>レスポンシブwebデザインについて]] #endregion #region(JavaScriptについて) - [[JavaScriptとは>JavaScriptとは]] - [[JavaScriptについて>JavaScriptについて]] - [[JSサンプル集>JSサンプル集]] #endregion #region(HTML CSSについて) - [[HTML5について>HTML5]] - [[CSS3について>CSS3]] - [[プロパティ順序>プロパティ順序]] - [[機種依存文字>機種依存文字]] #endregion #region(正規表現について) - [[正規表現について>正規表現について]] - [[置換サンプル>置換サンプル]] #endregion #region(Macについて) - [[Macについて>Macについて]] - [[起動中にできること>起動中にできること]] - [[改行コードについて>改行コード]] - [[おすすめソフト一覧>おすすめソフト一覧]] - [[ショートカット>ショートカット]] #endregion #region(iOS Design) - [[Cheat Sheet>Cheat Sheet2]] #endregion - [[その他>その他]] ---- &link_editmenu(text=ここを編集)

Cheat Sheet2

2013-07-30T11:49:48+09:00

Resolutions

Devices	Portrait	Landscape
iPhone 5	640x1136 px	1136x640 px
iPhone 4/4S	640x960 px	960x640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation	320x480 px	480x320 px
Retina iPad iPad 3, iPad 4	1536x2048 px	2048x1536 px
iPad Mini	768x1024 px	1024x768 px
iPad 1st and 2nd Generation	768x1024 px	1024x768 px

Displays

Devices	PPI	Color Mode	Color Temperature
iPhone 5	326	8bit RGB	Warm
iPhone 4/4S	326	8bit RGB	Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation	163	8bit RGB	Warm
Retina iPad iPad 3, iPad 4	264	8bit RGB	Warm
iPad Mini	163	8bit RGB	Unknown
iPad 1st and 2nd Generation	132	8bit RGB	Warm

Icons

Devices	App Icon Pixels Radius	Appstore Icon Pixels Radius	Spotlight Icon Pixels Radius	Document Pixels	Tab Bar Pixels
iPhone 5	114x11420px	1024x1024180px	58x5810px	44x58	60x60
iPhone 4/4S	114x11420px	1024x1024180px	58x5810px	44x58	60x60
iPhone & iPod Touch 1st, 2nd and 3rd Generation	57x5710px	512x51290px	29x295px	22x29	30x30
Retina iPad iPad 3, iPad 4	144x14424px	1024x1024180px	100x10020px	128x128	60x60
iPad Mini	72x7212px	512x51290px	50x509px	64x64	30x30
iPad 1st and 2nd Generation	72x7212px	512x51290px	50x509px	64x64	30x30

Commonly used design elements

Devices	Height of Status Bar	Height of Nav Bar	Height of Tab Bar	Width of Tables
iPhone 5	40px	88px	98px	604px / 1100px
iPhone 4/4S	40px	88px	98px	604px / 924px
iPhone & iPod Touch 1st, 2nd and 3rd Generation	20px	44px	49px	302px / 462px
Retina iPad iPad 3, iPad 4	40px	88px	98px	dynamic
iPad Mini	20px	44px	49px	dynamic
iPad 1st and 2nd Generation	20px	44px	49px	dynamic

Cheat Sheet

2013-07-30T11:45:23+09:00

Resolutions

Devices	Portrait	Landscape
iPhone 5	640x1136 px	1136x640 px
iPhone 4/4S	640x960 px	960x640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation	320x480 px	480x320 px
Retina iPad iPad 3, iPad 4	1536x2048 px	2048x1536 px
iPad Mini	768x1024 px	1024x768 px
iPad 1st and 2nd Generation	768x1024 px	1024x768 px

Displays

Devices	PPI	Color Mode	Color Temperature
iPhone 5	326	8bit RGB	Warm
iPhone 4/4S	326	8bit RGB	Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation	163	8bit RGB	Warm
Retina iPad iPad 3, iPad 4	264	8bit RGB	Warm
iPad Mini	163	8bit RGB	Unknown
iPad 1st and 2nd Generation	132	8bit RGB	Warm

Icons

Devices	App Icon Pixels Radius	Appstore Icon Pixels Radius	Spotlight Icon Pixels Radius	Document Pixels	Tab Bar Pixels
iPhone 5	114x11420px	1024x1024180px	58x5810px	44x58	60x60
iPhone 4/4S	114x11420px	1024x1024180px	58x5810px	44x58	60x60
iPhone & iPod Touch 1st, 2nd and 3rd Generation	57x5710px	512x51290px	29x295px	22x29	30x30
Retina iPad iPad 3, iPad 4	144x14424px	1024x1024180px	100x10020px	128x128	60x60
iPad Mini	72x7212px	512x51290px	50x509px	64x64	30x30
iPad 1st and 2nd Generation	72x7212px	512x51290px	50x509px	64x64	30x30

Commonly used design elements

Devices	Height of Status Bar	Height of Nav Bar	Height of Tab Bar	Width of Tables
iPhone 5	40px	88px	98px	604px / 1100px
iPhone 4/4S	40px	88px	98px	604px / 924px
iPhone & iPod Touch 1st, 2nd and 3rd Generation	20px	44px	49px	302px / 462px
Retina iPad iPad 3, iPad 4	40px	88px	98px	dynamic
iPad Mini	20px	44px	49px	dynamic
iPad 1st and 2nd Generation	20px	44px	49px	dynamic

正規表現について

2013-02-07T11:23:08+09:00

正規表現（せいきひょうげん、regular expression）とは、文字列の集合を一つの文字列で表現する方法の一つである。正則表現（せいそくひょうげん）とも呼ばれ、形式言語理論の分野では比較的こちらの訳語の方が使われる。まれに正規式と呼ばれることもある。

(Wikipedia: http://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE)

メタ文字	説明
.	任意の 1 文字に一致します。
[ ]	文字クラスを示します。角かっこ内のいずれかの文字に一致します。たとえば、`[abc]` と指定した場合、"a"、"b"、および "c" のいずれかに一致します。
^	文字クラスの先頭にこのメタ文字がある場合は、後に続く文字クラスが否定されます。このように指定した文字クラスは、角かっこ内の文字以外の任意の文字に一致します。たとえば、`[^abc]` と指定した場合、"a"、"b"、および "c" 以外のすべての文字と一致します。正規表現の先頭にある `^[abc]` と指定した場合、"a"、"b"、または "c" で始まる入力文字列だけに一致します。
-	文字クラスの中で使用され、文字の範囲を示します。たとえば、`[0-9]` と指定した場合、"0" から "9" までの任意の数字に一致します。
?	直前の正規表現に一致する文字があるかないかわからない場合に使用します。つまり、その正規表現が 0回または 1 回出現するものと一致します。たとえば、`[0-9][0-9]?` と指定した場合、"2" と "12" のいずれにも一致します。
+	直前の正規表現の 1 回以上の繰り返しに一致します。たとえば、`[0-9]+` と指定した場合、"1"、"13"、"666" のいずれにも一致します。
*	直前の正規表現の 0 回以上の繰り返しに一致します。
??, +?, *?	`` の最短一致。可能な限り広範囲に一致する最長一致とは異なり、最小範囲に一致します。たとえば、"<abc><def>"という文字列がある場合、`<.>` と指定すると "<abc><def>" に一致します。
( )	グループ化演算子。たとえば、`(\d+,)*\d+` と指定した場合、コンマで区切られた数字のリスト ("1"、"1,23,456" など) に一致します。
{ }	一致グループを示します。中かっこ内の正規表現に一致する実際のテキストを入力文字列から取得できます。
\	エスケープ文字。次に続く文字が、特殊文字としてではなく通常の文字として解釈されます。たとえば、`\a` は任意の英数字を示します。次の表を参照してください。 `<{.?}>.?</\0>` は "<head>Contents</head>" に一致します。
$	正規表現の末尾にある `[0-9]$` と指定した場合、入力文字列の末尾にある数字に一致します。
\|	選択演算子。この演算子で区切られた 2 つの正規表現のいずれかに一致します。たとえば、`T\|the` と指定した場合、"The" または "the" に一致します。
!	否定演算子。`a!b` と指定した場合、後ろに "b"が続いていない "a" に一致します。

省略形

省略形	対応する表現
\a	任意の英数字 : ([a-zA-Z0-9])
\b	空白 : ([ \\t])
\c	任意の英字 : ([a-zA-Z])
\d	任意の 10 進数字 : ([0-9])
\h	任意の 16 進数字 : ([0-9a-fA-F])
\n	改行文字 : (\r\|(\r?\n))
\q	引用符で囲まれた文字列 : (\"[^\"]\")\|(\'[^\']\')
\w	単語 : ([a-zA-Z]+)
\z	整数 : ([0-9]+)

その他

2013-01-22T17:48:48+09:00

画像を一切使わずにCSS3だけでドラえもんを描いてみた！

http://shopdd.blog51.fc2.com/blog-entry-932.html

css3maker

http://www.css3maker.com/text-rotation.html

Webクリエイターボックス

http://www.webcreatorbox.com/tech/css-heading-list-blockquote/

Dreamweaver MX で認識できるファイルの拡張子を変更または追加する

/Users/b06068/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration

/Applications/Adobe Dreamweaver CS5/Configuration/DocumentTypes

/Applications/Adobe Dreamweaver CS5/Configuration の3箇所

機種依存文字

2012-09-11T11:38:28+09:00

よく使われる文字実体参照

文字実体参照		数値文字参照		説明
<	<	<	<	小なり
>	>	>	>	大なり
&	&	&	&	アンパサンド
"	"	"	"	二重引用符
				スペース ( 改行禁止スペース )
©	©	©	©	著作権
®	®	®	®	登録商標

文字実体参照一覧表

マークアップ記号、国際化文字
( Special Character Entity Set )
文字実体参照		数値文字参照		説明
<	<	<	<	小なり
>	>	>	>	大なり
&	&	&	&	アンパサンド
'	'	'	'	アポストロフィ
"	"	"	"	疑問符
Œ	&OElig;	Œ	Œ	OE 連字
œ	&oelig;	œ	œ	oe 連字
Š	&Scaron;	Š	Š	S キャロン
š	&scaron;	š	š	s キャロン
Ÿ	&Yuml;	Ÿ	Ÿ	Y ウムラウト
ˆ	&circ;	ˆ	ˆ	曲アクセント
˜	&tilde;	˜	˜	チルダ
	&ensp;			n の文字幅のスペース
	&emsp;			m の文字幅のスペース
				細いスペース
‌	&zwnj;	‌	‌	ノンジョイナー
‍	&zwj;	‍	‍	ジョイナー
‎	&lrm;	‎	‎	書字方向制御文字( 左から右 )
‏	&rlm;	‏	‏	書字方向制御文字( 右から左 )
–	–	–	–	n の文字幅のダッシュ
—	—	—	—	m の文字幅のダッシュ
‘	‘	‘	‘	引用符(始)
’	’	’	’	引用符(終)
‚	&sbquo;	‚	‚	下つき引用符
“	“	“	“	二重引用符(始)
”	”	”	”	二重引用符(終)
„	&bdquo;	„	„	下つき二重引用符
†	&dagger;	†	†	ダガー (短剣符)
‡	&Dagger;	‡	‡	ダブルダガー (短剣符)
‰	&permil;	‰	‰	パーミル
‹	&lsaquo;	‹	‹	山カッコ (始)
›	&rsaquo;	›	›	山カッコ (終)
€	€	€	€	ユーロ

ISO 8859-1 ラテン、アルファベット
( Latin 1 Character Entity Set )
文字実体参照		数値文字参照		説明
				スペース ( 改行禁止スペース )
¡	¡	¡	¡	反転感嘆符
¢	¢	¢	¢	セント
£	£	£	£	ポンド
¤	¤	¤	¤	汎用通貨
¥	¥	¥	¥	円
¦	¦	¦	¦	縦破線
§	§	§	§	セクション
¨	¨	¨	¨	ウムラウト
©	©	©	©	著作権
ª	ª	ª	ª	女性序数
«	«	«	«	二重山カッコ (始)
¬	¬	¬	¬	ノット
				ソフトハイフン
®	®	®	®	登録商標
¯	¯	¯	¯	マクロン
°	°	°	°	度
±	±	±	±	プラスマイナス
²	²	²	²	上付きの 2
³	³	³	³	上付きの 3
´	´	´	´	鋭アクセント
µ	µ	µ	µ	マイクロ
¶	¶	¶	¶	パラグラフ
·	·	·	·	中黒
¸	¸	¸	¸	セディーユ
¹	¹	¹	¹	上付きの 1
º	º	º	º	男性序数
»	»	»	»	二重山カッコ (終)
¼	¼	¼	¼	4 分の 1
½	½	½	½	2 分の 1
¾	¾	¾	¾	4 分の 3
¿	¿	¿	¿	反転疑問符
À	À	À	À	A 低アクセント
Á	Á	Á	Á	A 鋭アクセント
Â	Â	Â	Â	A 曲アクセント
Ã	Ã	Ã	Ã	A チルダ
Ä	Ä	Ä	Ä	A ウムラウト
Å	Å	Å	Å	A リング
Æ	Æ	Æ	Æ	AE 連字
Ç	Ç	Ç	Ç	C セディラ
È	È	È	È	E 低アクセント
É	É	É	É	E 鋭アクセント
Ê	Ê	Ê	Ê	E 曲アクセント
Ë	Ë	Ë	Ë	E ウムラウト
Ì	Ì	Ì	Ì	I 低アクセント
Í	Í	Í	Í	I 鋭アクセント
Î	Î	Î	Î	I 曲アクセント
Ï	Ï	Ï	Ï	I ウムラウト
Ð	Ð	Ð	Ð	アイルランド語の ETH
Ñ	Ñ	Ñ	Ñ	N チルダ
Ò	Ò	Ò	Ò	O 低アクセント
Ó	Ó	Ó	Ó	O 鋭アクセント
Ô	Ô	Ô	Ô	O 曲アクセント
Õ	Õ	Õ	Õ	O チルダ
Ö	Ö	Ö	Ö	O ウムラウト
×	×	×	×	乗法
Ø	Ø	Ø	Ø	O スラッシュ
Ù	Ù	Ù	Ù	U 低アクセント
Ú	Ú	Ú	Ú	U 鋭アクセント
Û	Û	Û	Û	U 曲アクセント
Ü	Ü	Ü	Ü	U ウムラウト
Ý	Ý	Ý	Ý	Y 鋭アクセント
Þ	Þ	Þ	Þ	アイルランド語の THORN
ß	ß	ß	ß	ドイツ語の sz 連字
à	à	à	à	a 低アクセント
á	á	á	á	a 鋭アクセント
â	â	â	â	a 曲アクセント
ã	ã	ã	ã	a チルダ
ä	ä	ä	ä	a ウムラウト
å	å	å	å	a リング
æ	æ	æ	æ	ae 連字
ç	ç	ç	ç	c セディラ
è	è	è	è	e 低アクセント
é	é	é	é	e 鋭アクセント
ê	ê	ê	ê	e 曲アクセント
ë	ë	ë	ë	e ウムラウト
ì	ì	ì	ì	i 低アクセント
í	í	í	í	i 鋭アクセント
î	î	î	î	i 曲アクセント
ï	ï	ï	ï	i ウムラウト
ð	ð	ð	ð	アイルランド語の eth
ñ	ñ	ñ	ñ	n チルダ
ò	ò	ò	ò	o 低アクセント
ó	ó	ó	ó	o 鋭アクセント
ô	ô	ô	ô	o 曲アクセント
õ	õ	õ	õ	o チルダ
ö	ö	ö	ö	o ウムラウト
÷	÷	÷	÷	除法
ø	ø	ø	ø	o チルダ
ù	ù	ù	ù	u 低アクセント
ú	ú	ú	ú	u 鋭アクセント
û	û	û	û	u 曲アクセント
ü	ü	ü	ü	u ウムラウト
ý	ý	ý	ý	y 鋭アクセント
þ	þ	þ	þ	アイルランド語の thorn
ÿ	ÿ	ÿ	ÿ	y ウムラウト

一般記号、数学記号、ギリシア文字
( Greek and Symbolic Character Entity Set )
文字実体参照		数値文字参照		説明
Α	Α	Α	Α	アルファ
Β	Β	Β	Β	ベータ
Γ	Γ	Γ	Γ	ガンマ
Δ	Δ	Δ	Δ	デルタ
Ε	Ε	Ε	Ε	エプシロン
Ζ	Ζ	Ζ	Ζ	ゼータ
Η	Η	Η	Η	イータ
Θ	Θ	Θ	Θ	シータ
Ι	Ι	Ι	Ι	イオタ
Κ	Κ	Κ	Κ	カッパ
Λ	Λ	Λ	Λ	ラムダ
Μ	Μ	Μ	Μ	ミュー
Ν	Ν	Ν	Ν	ニュー
Ξ	Ξ	Ξ	Ξ	クシー
Ο	Ο	Ο	Ο	オミクロン
Π	Π	Π	Π	パイ
Ρ	Ρ	Ρ	Ρ	ロー
Σ	Σ	Σ	Σ	シグマ
Τ	Τ	Τ	Τ	タウ
Υ	Υ	Υ	Υ	イプシロン
Φ	Φ	Φ	Φ	フィー
Χ	Χ	Χ	Χ	キー
Ψ	Ψ	Ψ	Ψ	プシー
Ω	Ω	Ω	Ω	オメガ
α	α	α	α	アルファ
β	β	β	β	ベータ
γ	γ	γ	γ	ガンマ
δ	δ	δ	δ	デルタ
ε	ε	ε	ε	エプシロン
ζ	ζ	ζ	ζ	ゼータ
η	η	η	η	イータ
θ	θ	θ	θ	シータ
ι	ι	ι	ι	イオタ
κ	κ	κ	κ	カッパ
λ	λ	λ	λ	ラムダ
μ	μ	μ	μ	ミュー
ν	ν	ν	ν	ニュー
ξ	ξ	ξ	ξ	クシー
ο	ο	ο	ο	オミクロン
π	π	π	π	パイ
ρ	ρ	ρ	ρ	ロー
ς	&sigmaf;	ς	ς	ファイナルシグマ
σ	σ	σ	σ	シグマ
τ	τ	τ	τ	タウ
υ	υ	υ	υ	イプシロン
φ	φ	φ	φ	フィー
χ	χ	χ	χ	キー
ψ	ψ	ψ	ψ	プシー
ω	ω	ω	ω	オメガ
ϑ	&thetasym;	ϑ	ϑ	greek small letter theta symbol
ϒ	&upsih;	ϒ	ϒ	かぎつきイプシロン
ϖ	ϖ	ϖ	ϖ	greek pi symbol
•	•	•	•	ブリット
…	…	…	…	三点リーダー
′	′	′	′	プライム分
″	″	″	″	ダブルプライム時
‾	&oline;	‾	‾	オーバーライン
⁄	&frasl;	⁄	⁄	スラッシュ
℘	&weierp;	℘	℘	script capital P
ℑ	&image;	ℑ	ℑ	I
ℜ	&real;	ℜ	ℜ	R
™	™	™	™	商標
ℵ	&alefsym;	ℵ	ℵ	アーレフ
←	←	←	←	左矢
↑	↑	↑	↑	上矢
→	→	→	→	右矢
↓	↓	↓	↓	下矢
↔	↔	↔	↔	左右矢
↵	&crarr;	↵	↵	キャリッジリターン
⇐	⇐	⇐	⇐	二重左矢
⇑	&uArr;	⇑	⇑	二重上矢
⇒	⇒	⇒	⇒	二重右矢
⇓	&dArr;	⇓	⇓	二重下矢
⇔	⇔	⇔	⇔	二重左右矢
∀	∀	∀	∀	数学 (すべての)
∂	∂	∂	∂	数学 (偏導関数)
∃	∃	∃	∃	数学 (存在する)
∅	∅	∅	∅	数学 (空集合)
∇	∇	∇	∇	数学 (ナブラ)
∈	∈	∈	∈	数学 (元として含まれる)
∉	∉	∉	∉	数学 (元として含まれない)
∋	&ni;	∋	∋	数学 (元として含む)
∏	∏	∏	∏	n-ary product
∑	∑	∑	∑	n-ary sumation
―	−	−	−	数学 (総和)
∗	&lowast;	∗	∗	数学 (アステリスク)
√	√	√	√	数学 (平方根)
∝	&prop;	∝	∝	数学 (比例)
∞	∞	∞	∞	数学 (無限)
∠	&ang;	∠	∠	数学 (角度)
∧	&and;	∧	∧	数学 (合接)
∨	&or;	∨	∨	数学 (離接)
∩	∩	∩	∩	数学 (積集合)
∪	∪	∪	∪	数学 (和集合)
∫	∫	∫	∫	数学 (積分)
∴	&there4;	∴	∴	数学 (ゆえに)
～	&sim;	∼	∼	数学 (否定)
≅	&cong;	≅	≅	数学 (およそ等しい)
≈	≈	≈	≈	数学 (ほぼ等しい)
≠	≠	≠	≠	数学 (等しくない)
≡	&equiv;	≡	≡	数学 (合同)
≤	&le	≤	≤	数学 (小なりまたは等しい)
≥	≥	≥	≥	数学 (大なりまたは等しい)
⊂	⊂	⊂	⊂	数学 (真部分集合含まれる)
⊃	⊃	⊃	⊃	数学 (真部分集合含む)
⊄	&nsub;	⊄	⊄	数学 (真部分集合含まれない)
⊆	&sube;	⊆	⊆	数学 (部分集合含まれる)
⊇	&supe;	⊇	⊇	数学 (部分集合含む)
⊕	&oplus;	⊕	⊕	加法丸
⊗	&otimes;	⊗	⊗	乗法丸
⊥	&perp;	⊥	⊥	数学 (垂直)
⋅	⋅	⋅	⋅	ドット
⌈	&lceil;	⌈	⌈	左セイリング
⌉	&rceil;	⌉	⌉	右セイリング
⌊	&lfloor;	⌊	⌊	左フロア
⌋	&rfloor;	⌋	⌋	右フロア
〈	&lang;	〈	〈	左向きかっこ
〉	&rang;	〉	〉	右向きかっこ
◊	&loz;	◊	◊	ひし形
♠	&spades;	♠	♠	スペード
♣	&clubs;	♣	♣	クラブ
♥	&hearts;	♥	♥	ハート
♦	&diams;	♦	♦	ダイアモンド

基礎知識に関するサイトまとめ

2012-07-23T09:30:06+09:00

レスポンシブwebデザインについて

2012-07-04T10:56:04+09:00

レスポンシブwebデザインについて

Media Queriesを利用する

CSS3「Media Queries」ex.スクリーンサイズ、デバイスの解像度に応じて、CSSを使い分ける。
今まではMedia Type→ media="screen"や media="print" の拡張として利用されている。
但しユーザーエージェントによって振り分け（.htaccess や Javascriptを使って）するわけではない。
ブラウザサイズによって相対的に幅が可変するリキッドレイアウトで構築。
コンテナなどのボックス、マージンやパディング、画像の幅、ポジションの値など、基本的には %で指定して可変する必要あり
※可変にしないとボックスからはみ出してしまう。

Media Queriesの書き方

【link要素のmedia属性】
【@import】
@import url("tablet.css") screen and (min-width:480px) and (max-width: 768px)
ウインドウサイズが480px?768pxの場合にtablet.cssを読み込む
【@media】
@media screen and (min-width:480px) and (max-width: 768px){/* style */}

スマートフォン対策

viewportの設定がかけられている ex.iPhoneのviewportのデフォルト値は980px
以下の記述で等倍表示に設定しなおす
viewportの設定変更でiPhone などのスマートフォンの width をコントロールできる（しないと擬似的な横幅になってしまう）
縦表示から横にすると拡大されて表示される（拡大したくない場合はmaximum-scale=1.0指定）

対応ブラウザ

Safari 3 系
Opera 9 系
Firefox 3 系以降

IE対策

IEでMediaQueryを使用できるようにするcss3-mediaqueries.js or respond.jsの追加
IE 7以下で縮小された画像が粗く見える問題を解決するimgSizer.jsを追加
IEでもCSS3を使う場合 IE-CSS3.htc or ie-css3.jsを追加

結論

同じHTMLで実現できる→制作工数が減る。更新や運用が楽。
非表示部分の読み込んでしまうため表示が遅くなる可能性（画像をサーバに読みにいってしまう）
モバイルの通信速度を考えて情報量（ファイル容量）を出来るだけ小さくしてやる必要あり → 大規模サイトには不向き?

参考：
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

レスポンシブWebデザインで使えそうなテーブル実装例(2012.06追記)

ドロップダウンでカラムの表示・非表示を選択

ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています。
幅の広いスクリーンではすべてのカラムを表示。スクリーンが狭くなるとJavaScriptで段階的にカラムが隠されます。

カラムの優先順位を決める必要あり
ドロップダウンでカラムの表示・非表示がコントロール出来ることを、いかに分かりやすくユーザに明示するか

テーブルの隠れた部分を横スクロール

右側のカラムが横スクロールできます

横にスクロールできることをユーザにいかに分かりやすく示せるか
Android 2.3は動かない

要素ごとにテーブルを分ける

横スクロールのは無くなるが、縦スクロールが手間になってしまう。
データの比較が難しい

一定幅以下はリンクを設け、テーブルのみ表示させる

親コンテンツの横スクロール発生を避けることができる

背景色で振り分ける

親コンテンツの横スクロール発生を避けることができる

格子構造から急にレイアウトが変わるため混乱する可能性あり

参考：
http://parashuto.com/rriver/responsive-web/two-examples-of-responsive-tables

置換サンプル

2012-04-30T23:04:33+09:00

テキストを維持したままタグ変更

置換対象：<td width="300"><font size="2">テキスト</font></td>
置換後：<th scope="row">テキスト</th>
検索パターン：<td width="300"><font size="2">(.+)</font></td>
置換パターン：<th scope="row">$1</th>

() → ()内の正規表現パターンを記憶する
. → 改行以外のすべての単一文字
+ → 直前の文字の1回以上の繰り返し。*も可

検索対象によっては、.を以下に変更したほうが良い場合もある。※複数同時に使う場合は大カッコ[]で挟む。

¥w → 下線を含む、英数字1つ。[A-Za-z0-9_] と同じ
¥d → 数字1文字。[0-9] と同じ
¥W → 非英数字の1つ。[^A-Za-z0-9_] と同じ
¥s → スペース、タブ、用紙送り、改行を含むホワイトスペース1つ

属性の中の値のみまとめて変更

置換対象：<td width="397">テキスト</td>
置換後： <td width="300">テキスト</td>

検索パターン：img width="\d+"
置換パターン：img width="300"

属性に単語を追加

置換対象：<span class="hoge">テキスト</span>
置換後：<span class="hoge test">テキスト</span>

検索パターン：class="(\w+)"
置換パターン：class="$1 test"

XHTMLの書式に変更

置換対象：<img src="test.gif" alt="test">
置換後：<img src="test.gif" alt="test" />

検索パターン：<img(.*)">
置換パターン：<img$1" />

アンダーバーをハイフンに変更

置換対象： <img src="images/hoget_img.gif" alt="test">
置換後： <img src="images/hoge-img.gif" alt="test" />

検索パターン：(\w*)/(\w*)_(\w*).
置換パターン：$1/$2-$3.

置換で$3～$2～$1と指定すると順番変更も出来る。

属性の挿入

置換対象： <span>hoge</span>
置換後： <span class="top">hoge</span>

検索パターン：<span>(.*)</span>
置換パターン：<span class="top">$1</span></strong>

属性の挿入

置換対象： <table cellspacing="0" cellpadding="0" width="691" id="main" class="hoge">
置換後： <table id="main" class="hoge">

検索パターン：<table(?:(?: (?:cellpadding|cellspacing|width|border)="[\w\-_%]+")+( (?:id|class)="[\w\-_%]+")*)>
置換パターン：<table$1>

先頭カッコの直後にエクスクラメーションとコロン（?:）をつけるとマッチした文字が記憶されなくなる

tbodyを削除する

置換対象：
<table>
<tbody>
<tr>～</tr>
</tbody>
</table>
置換後：
<table>
<tr>～</tr>
</table>

検索パターン：[\s\t]+(<TBODY>|</TBODY>)
置換パターン：無し

先頭カッコの直後にエクスクラメーションとコロン（?:）をつけるとマッチした文字が記憶されなくなる

配色サンプル集

2012-03-09T15:56:05+09:00

ポップで楽しいイメージの配色

D06DA265B7ECFFF000
9560A0B4CC31D06D8C
F1CF00C7337F6BB6BB
D16C150080C8DBDF1A
F8E100924C9465ACE3

カジュアルで親しみやすい配色

F1D14E82C1DFD4ACCC
C8D6277DA8DBF9E8AB
6492CDE8E5E2DD9BA5
E8E0AA9BB637EABF4B
E5D8A6D06D80ADCAEB

ダイナミックで強く目を引く配色

C8D627C300675C1D82
009DA6EEC600C30067
232584EEC600AB1B35
44AEEA8B0000DD960F
FFF00056A6464C2774

ゴージャスで高級感のある配色

5C1D82B59A3C9D2037
724D90BAC1C7D3C91E
D07F93211917AA9026
CF921B7E87398D1570
C2007BCDD2BCB59929

自分用覚え書き @Wiki

メニュー

Cheat Sheet2

Resolutions

Displays

Icons

Commonly used design elements

Cheat Sheet

Resolutions

Displays

Icons

Commonly used design elements

正規表現について

省略形

その他

画像を一切使わずにCSS3だけでドラえもんを描いてみた！

Dreamweaver MX で認識できるファイルの拡張子を変更または追加する

機種依存文字

よく使われる文字実体参照

文字実体参照一覧表

基礎知識に関するサイトまとめ

鏡面反射光 ハイライトの謎

イラレ道場

動画マニュアル.com

スマートオブジェクト

イラレ基本操作

レスポンシブwebデザインについて

レスポンシブwebデザインについて

Media Queriesを利用する

Media Queriesの書き方

スマートフォン対策

対応ブラウザ

IE対策

結論

レスポンシブWebデザインで使えそうなテーブル実装例(2012.06追記)

ドロップダウンでカラムの表示・非表示を選択

テーブルの隠れた部分を横スクロール

要素ごとにテーブルを分ける

一定幅以下はリンクを設け、テーブルのみ表示させる

背景色で振り分ける

置換サンプル

テキストを維持したままタグ変更

属性の中の値のみまとめて変更

属性に単語を追加

XHTMLの書式に変更

アンダーバーをハイフンに変更

属性の挿入

属性の挿入

tbodyを削除する

配色サンプル集

ポップで楽しいイメージの配色

カジュアルで親しみやすい配色

ダイナミックで強く目を引く配色

ゴージャスで高級感のある配色

鏡面反射光ハイライトの謎