「ほっ」と。キャンペーン
 

カテゴリ:├CSS( 3 )

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

Vimを利用したCSS編集

はじめ

ブログのスキン編集などにはCSSでいろいろと配置や装飾などを行う際に、ブラウザ上で編集も良いのですが、テキストエディタで編集するといろいろと便利なこともあります。私はメインのテキストエディタがVimで、ときどきemacsを利用しています。この2種類のエディタはいろいろと便利で手放せなくなってしまいました。
今日は、このエディタの中のVimを利用してCSSの編集などのお話を書いてみたいと思います。
 なお、Vimの達人のようにうまくできないので、見苦しいところは適当にスルーして下さいね。


Vimの入手について

WindowsのVimは香り屋さんから入手するのが比較的楽です。(私は自分でビルドして利用しています。)

圧縮されたものを解凍し、gvimを起動すればメニューもあって便利です。ただし、はじめての方は扱いに戸惑うかもしれません。

http://www.kaoriya.net/


まずはファイルタイプをCSSに変更してみる

通常、ファイルの拡張子がCSSならばCSSとして認識します。コピペだけでファイルに保存もしないでも、現在のファイルをCSSとして認識させるには以下のコマンドを入力します。

CSSとして


:set ft=CSS



 以下のようにCSSのコードが色別に表示されて見やすくなります。なお、このCSSはエキサイトのデフォルトのCSSです。

a0031863_20151381.gif


ついでに、タブを4文字にすると見やすいかもしれませんね。

タブの設定


:set ts=4
:set sw=4




デバッグ

CSSを見やすくするとコメントの閉じ忘れ、{の閉じ忘れなどが見分けやすくなります。意図的にコメントを閉じ忘れしたのが以下の図です。コメントは青く表示されているので次のA:LINKもコメントとなり、期待した動作が行われません。
しかし、このように表示が色分けされているので、見分けやすくなります。

a0031863_20152843.gif



補完機能

Ctrl+x Ctrl+oでタグ閉じやキーワードの補完ができます。うろ覚えでも思い出すことができます。
 次の例はpとタイプした後に Ctrl+x Ctrl+o を押してCSSの候補を表示した例です。

a0031863_20153785.gif


最後に

まだまだ、いろいろな面白い機能が満載です。他のテキストエディタでも色分け表示は可能な場合がありますので、ご自分のテキストエディタのマニュアルなどを読んでみると面白いかもしれませんね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2008-12-20 20:14 | ├CSS | Trackback | Comments(0)
 

気になった記事

今日気になった記事のリンク
時間のあるときに試したいのでリンクしておくことにします。でも、空き時間ができるのかなぁ


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-02-06 18:10 | ├CSS | Trackback | Comments(0)
 

ブラウザ毎にCSSの設定を切り分ける

はじめに


 CSSのレイアウトでブラウザの解釈の違いやバグなどによって、微妙に表示が崩れることってありますよね。 そんな時、裏技を使って各ブラウザ毎に設定を切り分ける方法が以下のサイトにあります。
どうしても、うまくできないときは使うのも良いかもしれませんね。

CSS Filters and Hacks



例えば・・
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-01-06 20:07 | ├CSS | Trackback | Comments(0)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。