では、CSSのbackground-imageの画像も、２倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも２倍サイズで作り、iPhone4、iPhone4以下でも綺麗に表示することができます。

ところがこのbackground-sizeでサイズ指定した背景画像が、XPERIAで指定することができませんでした。Android OS 1.6というのも原因なのか。Galaxy Android OS 2.2では正しくサイズ指定して表示することが出来ました。

そして端末依存かOS依存の問題かと思いましたが、プロパティの書き方に-webkit-を追加すれば、XPELIAでもサイズ指定できる事がわかりました。多くの参考サイトがbackground-sizeのままでしたが、本当は、-webkit-background-sizeと書いたほうがよさそうですね。もちろんCSS3なのでモダンブラウザしか対応してませんのであしからず。

/* 間違ったプロパティ */
selector{
background-size: 100px 100px;
}

/* 正しいプロパティ */
selector{
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
}

CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。

細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。

IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。

SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。

/*ふちの太さ*/
-webkit-text-stroke-width:3px;
-webkit-text-stroke-color:#FF0000;
-webkit-text-fill-color:#FFFFFF;

Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。

画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。
※検証に使ったブラウザは全て最新のバージョンです。

CSS3は古いブラウザで表示が崩れたりするので、すべてCSS3でコーディングされたWebサイトはなかなかありませんが、iPhoneのSafariやAndroidのChromeではWebKitが採用されているので、スマートフォン用のWebサイトにはCSS3の表現が使われています。今まで画像を使って表現するしかなかったグラデーションやテキストのドロップシャドウなど、画像を使わないことによってページ全体の容量を軽減することができますので、スマートフォン用のWebサイトではどんどんCSS3を活用していったほうがいいですね。

グラデーションやドロップシャドウをCSS3で書くのはちょっとだけ文字数が多く、ちょっと微調整にめんどくさいところがあります。今回は微調整しながら表示確認ができ、CSS3のソースを生成してくれるジェネレータの紹介です。
＞＞CSS3プロパティジェネレーター | CSS-EBLOG
＞＞http://css-eblog.com/eblog_sample/0912/css3-generator/

設定が終わったらページ右上の「ソースを生成」ボタンを押すとライトボックス風にソースが出てきます。-webkit　-moz　-ms と書かれているところはそれぞれのブラウザのレンダリングエンジンに対しての命令なので、スマートフォン用など限定して使う場合はとっちゃっていいとおもいます。

「-webkit」はSafari、GoogleChomeに使われているWebKitを指してます。「-moz」はMozilla系のGeckoエンジン、Firefoxなどを指してます。「-ms」はCSS3が使えるIE9のTridentエンジンを指してます。

body {
	-webkit-text-size-adjust: none;
}

縦向き横向きにしたらクルクルかわるiPhoneのSafariブラウザ。上記のWebkitスタイルをbodyに適応すれば、iPhoneの向きが変わったときにフォントサイズの大きさが変わるのを防ぐことができます。

ActionScriptを共有するwonderflのHTML5、JavaScript、CSS版ってところですね。サイト上で公開されているソースコードを編集して、そのまま公開することができます。

＞＞jsdo.it

にぎやかしにはなりますが、wonderflもjsdo.itも、実際に流用できて使えるコードってあるのでしょうか。。。とはいえ、刺激になり触発されるので、すばらしいサイトだと思います。シェアする方も、ホントの手の内は明かさないんでしょうけどねー。

IETesterというアプリを使えば、IE5.5、IE6、IE7、IE8での表示確認が一度にできます。Windows用ですが、無料で使えるのでダウンロードして損はないと思います。ボクはとても助かってます！＾－＾

▼IETester
配布元：My DebugBar | IETester

点線が出てしまう条件の予想

・Windows XP
・Firefox（Mac版 Firefoxでは出ませんでした。）
・swfobject v2.2　でFlashを表示。

点線を消す方法

根本的解決になるかどうかはわかりませんが、swfobjectでも最終的にはobjectタグをdocument.writeしているので、objectタグに対してoutline: none;としてあげると、ボクの環境でFlashの周りの点線は消えました。

コレでいいのかなー＾－＾；

object{
	outline: none;
}

追記：この点線は、Firefoxでフォーカスがあたっているところに対しての点線でした。見てくれを重視するために、この点線自体を消したい場合は、全体に対してCSSでoutline:noneｔ;とするといいと思います。

▼WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。

SyntaxHighlighterのライブラリをダウンロード

▼ダウンロードはこちらから。
配布元：syntaxhighlighter – Google Code

▼解凍したフォルダー構成。
・Uncompressed
・Styles
・Script

この３つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。

<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script>

<!-- 表示したい言語に応じて書きます -->
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script>

<!-- window.onloadの時に実行される、表示させる為の関数 -->
<script type="text/javascript">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

↑これは、普通のpreタグで挟んでます。
preタグに対してnameとclassを指定してあげます。

<pre name="code" class="html:collapse">
ここにソースコード
</pre>

さっきのheadに書く記述に挟んだpreタグnameとclassを設定してあげると、もうお気付きかもしれませんが、classの部分を書き換えると、その種類のソースコードにハイライトが変わります。下記はそのリストで、左側がclassに入力する種類で、右側は使用する際にheadに書き足すJavaScript名です。

cpp        => shBrushCpp.js
c          => shBrushCpp.js
c++        => shBrushCpp.js
c#         => shBrushCSharp.js
c-sharp    => shBrushCSharp.js
csharp     => shBrushCSharp.js
css        => shBrushCss.js
delphi     => shBrushDelphi.js
pascal     => shBrushDelphi.js
java       => shBrushJava.js
js         => shBrushJScript.js
jscript    => shBrushJScript.js
javascript => shBrushJScript.js
php        => shBrushPhp.js
py         => shBrushPython.js
python     => shBrushPython.js
rb         => shBrushRuby.js
ruby       => shBrushRuby.js
rails      => shBrushRuby.js
ror        => shBrushRuby.js
sql        => shBrushSql.js
vb         => shBrushVb.js
vb.net     => shBrushVb.js
xml        => shBrushXml.js
html       => shBrushXml.js
xhtml      => shBrushXml.js
xslt       => shBrushXml.js

view plain、copy to clipboard、print、?、のテキストを日本語にしてみる。

Scripts/shCore.js　をテキストエディタで開いて、「label:’」と検索してみると４箇所ヒットすると思います。それぞれを下記のように書き換えてみました。

label:'view plain'	=>	label:'プレーン表示'
label:'copy to clipboard'	=>	label:'クリップボードにコピー'
label:'print'	=>	label:'プリント'
label:'?'	=>	label:'コレは何？'

すると文字化けして表示されてしまいました。。orz　これらSyntaxHighlighterのファイルコードは全てShift_JIS形式になっています。ブログやサイトに設定している文字コードに引っ張られるので、headタグに書いているshCore.js”のところに、

<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js" charset="Shift_JIS"></script>

「charset=”Shift_JIS”」と書き足しました。

SyntaxHighlighterにActionScritpを対応させる方法

▼こちらのサイトから、ActionScriptをハイライトさせるJavaScriptをダウンロード
配布元：AS3 Syntax Highlighting (with SyntaxHighlighter)
▼解凍したフォルダー構成。
・Scripts
・Styles
StylesのなかにあるSyntaxHighlighter.cssに差し替えて、Scriptsの中にあるCompressedとUncompressedの中にある、shBrushAS3.jsをそれぞれのディレクトリにアップして、

<pre name="code" class="as:collapse">
ここにソースコード
</pre>

これでActionScriptのハイライトが可能になります。