2010年1月のアーカイブ

山形では初開催となる「CSS Nite in YAMAGATA, Vol.1」が、2010年1月24日（日）に行われました。隣県で行きやすいということもあり、参加してきました。雑感を。

続きを読む

かなりニッチなニーズでしょうが、HTMLから外部ファイルとして扱っているCSSを、インラインCSSに変換してしまうというチカラワザなツールです。
インラインCSSとは、スタイルシートを適用させたい要素に直接プロパティを書き込むものです。

HTML email inline styler
http://inlinestyler.torchboxapps.com/

利用シーンとしては

• HTMLメール用変換
• 携帯電話向けに変換
• ブログの記事部分のスタイリング

あたりが考えられます。

使い方

入力欄に、ダイレクトにURLか、外部CSSを含んだソースコードを直接コピペします。

「Convert」ボタンをクリックすると、すぐ下のConverted HTMLエリアに変換後のソースが生成されます。

CSSの再現性は、元ファイルの作り方にも影響するようです。

2010/1/17（日）に、『dachas×CSS Nite』と題したスペシャルイベントが行われました。

セッション1「HTML5とCSS3」益子さん

2010年は普及が広まりそうなHTML5とCSS3。私も結構CSS3は多用しています。
益子さんが言っていたのは『Progressive Enhancement』という考え方。IEだけに基準を置かず、新しい技術はサポートの良いブラウザのためにも積極利用していきましょう！とのこと。

CSS3で表現するドロップシャドウとか角丸は相当便利。今から使い慣れておいた方が良いかもしれませんね。

セッション2 「アクセスマップで考えるユーザーシナリオと”リッチ”なコンテンツ」鷹野さん

仙台では珍しいワークショップ形式のセミナー。もう何というか、地図一つのページにこんなにドラマがあるのか！というくらいの濃い内容。

いかに自分が目先のものだけしか見ていないって事を痛感しました。本当のユーザ目線って、これくらいしないと実はダメなんだなぁとつくづく思ったり。フォローアップで使ったデータをそっくりそのままもらえるのも嬉しいです。復習します。

今回はセッション毎の課金でしたが、ほとんどの人が一日通して参加されていました。前半だけで帰る人何人かいましたが、非常にもったいないですね。

• dachas
• CSS Nite公式サイト

Magic Mouseを使用する際、デフォルトだと2フィンガーの基本動作しか出来ませんが、ユーティリティを活用することにより3フィンガー・4フィンガーのクリックやタップに対応させたりと、かなり操作性の幅が広がります。

何種類かリリースされれているのでご紹介

BetterTouchTool

フリーウェア：http://blog.boastr.net/
MagicMouseの他、MacBook（Pro）のトラックパッドも拡張してくれます。キーボードとの組み合わせやカーソルの移動速度・精度を変更する機能も。個人的には超オススメです。

マジックドライバ

ベータ版：http://plentycom.jp/magicdriver/
※ベータ版（2010年3月まで使用可）。製品版では有料化になるそうです
アップル製マウス「Magic Mouse」用ドライバ。システム標準ではサポートしていない様々なジェスチャーに7種類の機能を割り当てることができます。

MagicPrefs

フリーウェア：http://vladalexa.com/apps/osx/magicprefs/
BetterTouchToolよりは設定画面が多少グラフィカルで、見やすいです。

MouseWizard

シェアウェア／2.50ドル：http://www.samuco.net/web/node/23
こちらも設定画面がグラフィカル。実際の操作がひと目でわかります。有料なのが少し考えるところ。

いずれも頻繁にアップデートを繰り返しており、より高機能・安定性を求めている感じがうかがえます。個人的にはずっと使っているBetterTouchToolがオススメです。

WordPressでソースコードを明示する際、「SyntaxHighlighter」を利用すると便利です。そんなSyntaxHighlighterの書き方、覚え書き。

基本

［sourcecode language=”css”］で始めて［/sourcecode］

で閉じる

sourcecodeは下記の形で書いてもOK

• [source language=”css”]ソースコード[/source]
• [code language=”css”]ソースコード[/code]
• [sourcecode lang=”css”]ソースコード[/sourcecode]
• [source lang=”css”]ソースコード[/source]
• [code lang=”css”]ソースコード[/code]
• [sourcecode=”css”]ソースコード[/sourcecode]
• [source=”css”]ソースコード[/source]
• [code=”css”]ソースコード[/code]

languageに指定できる言語

• C++の場合・・・”cpp”・”c”・”c++”
• C# の場合・・・”c#”・”c-sharp”・”csharp”
• CSSの場合・・・”css”
• Delphiの場合・・・”delphi”・”pascal”
• Javaの場合・・・”java”
• JavaScriptの場合・・・”js”・”jscript”・”javascript”
• PHPの場合・・・”php”
• Pythonの場合・・・”py”・”python”
• Rubyの場合・・・”rb”・”ruby”・”rails”・”ror”
• SQLの場合・・・”sql”
• VBの場合・・・”vb”・”vb.net”
• XML/HTMLの場合・・・”xml”・”html”・”xhtml”・”xslt”

参考

ソースコードをハイライト表示できるWordPressのプラグイン SyntaxHighlighter – sprouthead blog