• デモを見る
• サンプルをダウンロードする

主な変更は、スタイルプロパティの見直しです。

AUGM in OITA のウェブページを無事に公開できたので、今回使用したボックススタイルをまとめてみました。なにかのお役に立てればいいなあ…。

ライブデモ

サンプルファイル (DMG)

サンプルファイル (ZIP)

ご意見、ご感想をお待ちしております！

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased; \* Standard *\
-webkit-font-smoothing: antialiased;

フォント比較の参考サイト: Test page for -webkit-font-smoothing | Christoph Zillgens

Safari でスタイルシートを指定してウェブページの見た目を変えてみましょう。~/Documents/user.css を作って以下のように記述します。

    html {-webkit-font-smoothing: antialiased;}

Safari 環境設定から「詳細」パネルを表示して「スタイルシート:」で先ほど作成したスタイルシートを選択します。ウェブページを表示して、プルダウンメニューで切り替えながら違いが確認できます。

Safari だけじゃなく App Store や iTunes でも使いたい場合は、

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.iTunes WebKitUserStyleSheetLocationPreferenceKey "~/Documents/user.css"

defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.appstore WebKitUserStyleSheetLocationPreferenceKey "~/Documents/user.css"

のように defaults コマンドを利用します。また、気に入らなければ

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool false
defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool false

とすれば無効になります。

<meta name="viewport" content="width=980, initial-scale=1, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.6" />

参考: Safari HTML Reference: Supported Meta Tags

この属性値が自動的に付与されるので、980px 以下の 640px 固定幅ウェブページは相対値 340px (980px – 640px) の余白を持ったページとなります。しかし、980px 以上 1280px 以下の場合は設定する必要はありません。

詳しく掘り下げていくと、却って分かりにくくなるので結論から申しますと

<meta name="viewoirt" content="width=640" />

と固定幅を指定するか、

<meta name="viewport" content="width=device-width" />

個々のデバイス幅でよろしく、とするかです。

両方を試してみて JavaScript 動作などに問題がなければ、きれいに表示される “width=device-width” がオススメ!!

Glow Text (リンク先で実際の動きを見れます)

.glow {
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: glow;
}
@-webkit-keyframes glow {
    0% {
        color: black;
    }
    100% {
        color: red;
    }
}

ボタン周辺(box-shadow)を点滅させるのも同じ原理です。

<a 
  onclick="return confirm('メールソフトが起動します');" 
  href="mailto:email@example.com"
>電子メール</a>

ただ、あまり使いすぎるとうるさい仕様になるので程々に。

何が便利かといいますと、zen coding が使えること。この構文を覚える手間がありますが、習得してしまえば作業効率が格段に向上しますよ。CSS セレクタを理解しているとすぐに使いこなせるようになります。

他にも、コンテンツや要素の選択が簡単にできたり、選択した要素に親要素を追加したり、とかが簡単にできるようになります。わざわざマウスに持ち替える手間がなくて入力できます。

一例として、箇条書きリストを ul 要素でマークアップしてみましょう。

home
about
content

3行を選択した状態から Wrap With Abbreviation (control-shift-A) アクションを使います。コマンド実行シートが表示されるので

ul>li*>a

と入力して実行します。すると

<ul>
  <li><a href="">home</a></li>
  <li><a href="">about</a></li>
  <li><a href="">content</a></li>
</ul>

このように要素が補完された状態になります。ビデオを見るともっと理解が早まるかもしれません。

Demo video with current Zen Coding features

jQueryのslidetoggleメソッドを使ってスライドするメニューを作ってみました。ボタンを押すと下へメニューがするするっと降りてくるものです。言葉では伝えにくいのでデモをご覧ください。また、サンプルファイルを用意してますのでご利用ください。

• デモを見る
• サンプルをダウンロードする

これを作成しようと思ったきっかけは、コードエディタのEspressoがバージョンアップしたので、どのくらい機能向上したのかを確かめるためでもありました。印象は、いくぶんか安定性は増したもののまだまだ不安定な部分が見受けられます。かなり良い感じに仕上がってきているので残念です。

あと、コード補完を選択するショートカットキーに Control-N および Control-P が使えないのがすごく残念。これを変えられるだけでも印象はすごく変わってくるのになぁ。まだまだ、重要なドキュメントはCodaで編集することになりそうです。

img {
  max-width: 100% !important;
  height: auto !important;
  width: expression(this.width > 540 ? 540: true); /*for ie6*/
}

これはウェブログへ画像を配置するときに画像サイズがコンテンツボックスを上回る時はサイズを調整して収まるようにするものです。

カーソルを画像の上に持っていくと画像が反転してテキストを表示してくれるという動作をします。ウィジェットの設定画面を表示する動作に似ています。ただ、このプロパティはここ最近リリースされたWebKit Nightly Buildでしか動作しません。Safari 4.0.2でも動作しないことを確認しております。

http://appling.jp/docs/flip-image.html