DreamweaverでSassを使う（SCSSを書く）時、Zen Coding for Dreamweaverを利用しようとしてもデフォルトでは上手く動作しません。調べてみると、.scssファイルを編集している際のドキュメント解析モードが「text」と判定されるためです。

そこで、Zen Codingのコアファイルをカスタマイズし、SCSSを書く際もZen Codingが利用できるようにする方法をご紹介します。

• 続きを読む

Webページ上に「Google カレンダー」を埋め込むと、スケジュールの公開・共有が手軽に行えるので便利かと思います。

埋め込みの際、「Google カレンダー埋め込み支援ツール」にて背景色の指定が可能ですが、背景色の指定を変更してもタイトルやカレンダーの表示を切り替えるインタフェース周辺のみしか適用されず、肝心のカレンダー部分はブルー系の配色のままです。

そこで、U-notez Blogの記事「Easy Color Customization for Embedded Google Calendars」で配布されているプログラムを利用し、カレンダー部分の配色を変更してWebページに埋め込む方法をご紹介します。

• 続きを読む

CSSでフォントサイズを相対値（em・rem・%）で指定する時に発生する計算は意外と手間なものですよね。私はEmChartを見て値を拾っていますが、細かいチャートから目的の値を探すのは若干大変です。

Sassで簡単にすることはできないかなと思っていたところ、Compassの拡張フレームワークである「Stitch - A CSS Pattern Framework for Compass」の中にrelative-size関数を見つけました。まさに思い通りの計算値＋単位を出力してくれる関数です。

下記のように、relative-size(目的のサイズ,元のサイズ継承したサイズ)を指定すると

body {
  font-size: relative-size(12,16);
}

em値となって返ってきます。これは便利！　ちなみに小数点以下は3桁まで出力されるようです。

body {
  font-size: 0.75em
}

• ※ 「元のサイズ」という表現がわかりにくいとのご指摘を頂きましたので、「継承したサイズ」修正させて頂きました。

• 続きを読む

Less & Sass Advent calendar 2011の17日目は、@_hideki_aがSassの出力ソースをカスタマイズする方法について書かせていただきます。

3日目の「Sass を今すぐ実務で使おうよ！」ほか様々な記事で紹介されている通り、SassはCSSの設計を強力にサポートしてくれる素晴らしい言語です。しかしながら、学習コストや環境設定など多少のハードルがあり制作チーム全員がすぐに導入するのは難しいという場合や、納品後の運用はクライアントさんが行うためにSassの導入はしてもらえないという場合もあるのではないでしょうか。

そのようなことから、構築時はSassでCSSを設計し、運用ではSassで生成したCSSファイルを直接編集するという場面も想定されます。その際、「従来から決められている社内のCSS記述ルールに沿ったCSSを生成しなければならない」という問題に遭遇する可能性が考えられます。

• 続きを読む

今年9月にMacBook Proを買ったのがきっかけで、最近では専らCodaを利用して(X)HTML/(S)CSS/JavaScriptをコーディングするようになりました。

それまで(X)HTMLのコーディングに利用していたDreamweaverには、div要素の終了タグにコメントを自動追加するカスタマイズをした「Zen Coding for Dreamweaver v0.6」を入れていたのですが、Codaに乗り換えたことでコメントの自動追加ができなくなり、非常に不便に感じていました。

CodaのZen Coding -- TEA for CodaはPythonで書かれているため、Pythonの経験がない私はDreamweaverのようにはカスタマイズできないでいたのですが、改めてチャレンジしてみるとわりと簡単にコメントの自動追加ができるようになったので、カスタマイズ方法をご紹介します。

• 続きを読む