Karappo web design room

Sassとても便利ですね。Compassをインストールして、watchを走らせておけばローカルファイルを監視して変更があれば瞬時にコンパイルしてくれるので、もう通常のCSSなんて使いたくないと思うほどです・・・。

ただ、ローカルで作業している場合はいいのですが、ひとつ問題だったのがリモートホスト上にあるファイルをwatchすることができない点。案件ごとに変わるリモートのサーバーに毎回環境を整備するのは非常に面倒です（sshでログインすることすら面倒だし・・・）。ローカルのマシンにインストールしているCompassで、なんとかリモートのファイルを監視できないのか、色々調べてみました。

最初に見つかったのが、sshfsを使ってサーバーをローカルマシンにマウントする方法。依存関係やコマンドラインからの実行で多少面倒ではある物の、これを使えばマウントしたディレクトリをローカルのCompassでwatchできました。

→　sshでリモートサーバーをマウント、便利にsshfs / Unix的なアレ

素晴らしい！・・・と思ったのですが、10分も繋げているといきなり接続が切れたりして非常に不安定で、実用レベルには達しませんでした（Macへの移植の過程で何か問題が発生したのかな？）。sshfs関係はいくつかGUIアプリも出ていたのですが、どれも結局同じ不具合があり、開発が止まっているプロジェクトとかもあって、なんだか不安な感じでした。

あー、駄目なのかなぁ。と諦めかけた時、Transmitをいじっているとふと、「お気に入り＞ディスクとしてマウント」というメニューがあることに気付きました。要は、上記のsshfsと同じようにリモートをマウントする機能なので、同じことができました。そして接続が切れません！素晴らしい。しかも、sshは不要でftpでログインできていればOK。ツールバーに常駐しているTransmitアイコンからも直接ディスクにマウント機能が使えます。この「ディスク機能」は、今回の件以外でもかなり役に立ちそうです。ありがたい！


Thank you, Transmit !!

よくmixiやらBLOGやらなんやらで、凄く長いURLや凄く長い半角文字の単語とかを貼り付けたときに、URLが折り返されずにレイアウトがぐちゃぐちゃに崩れたりしていることがありますが、こういう問題の解決策がやっと見つかりました。

CSSで、

word-break:break-all;

と書けば良いみたいです。

ちなみにこれが適用されるのは、IE5以上のみで、IEの独自仕様だそうなので、その他のブラウザでは折り返されないようです。

あと、word-breakに関してですが、他の設定は以下の通りです。

word-break:normal; /* デフォルト：英文のみ単語の切れ目で改行 */

word-break:break-all; /* 英文、和文共に単語の途中でも改行 */

word-break:keep-all; /* 英文、和文共に単語の切れ目で改行 */

CSSでなくても良い場合は、他にもこんな解決方法があるようです。

よく使うのですぐにコピペ出来るようにまとめておきます。

■Mac版IE 5.x
MacIEが「*/」の直前に「\」をつけるとコメント終了を認識できないバグを利用したテクニック。

ここはMacIEだけに適用

/*↑Style for MacIE5.x\*/

ここでそれ以外のブラウザ向けに上書き

/*↑Style for Others*/

/*↓Style for Others\*/

ここはMacIEに適用されない

/*↓Style for MacIE5.x*/

MacIE、その他全てに適用される

■Win版IE＋Mac版IE
IEではCSS2の仕様では優先されるべき「!important」タグが無視される。

!important

＜例＞

#fugefuge

{

	background:black;!important 

	background:white; /*←IE用スタイル*/

}

▽ 2006.07.23 三尾追記

/*Win IE以外のブラウザ用 */

.hoge{ background:black; }



/*IE5.01 と IE5.5 と IE6 に対応したパターン*/

* html .hoge{

background:white;

}

■Win版IE　（2006.07.23 三尾追記）

全てのWindows版IE以外に他と違う設定をする。

body {width:100px; } /* winIEのみ */

*html>body {width:200px; } /* winIE以外 */

■Win版IE　（2010.03.30 寺田追記）

もはや、Mac版IEとかIE5とかは無視してもいい時代なので、上みたいな面倒な書き方ではなくてこれだけでいいと思います。
IE6とIE7にだけCSSを上書きしてやる書き方です。

div.hoge

{

	/* 通常スタイル */

}

	/* IE 6 */

	* html div.hoge

	{

		/* IE6用通常スタイル */

	}

	/* IE 7 */

	*:first-child+html div.hoge

	{

		/* IE7用通常スタイル */

	}

あと、良く使うmin-heightの書き方も定型文化しとくといいでしょう。

div.hoge

{

	min-height: 600px;

	height: auto !important;

	height: 600px;

}