Nuts Choco Web Design - 情報誌 -

すでにご存知の方もおられると思いますが、このブログはSixApart 社から提供されている MOVABLE TYPE をインストールしたものです。スタイルシートを個人好みに幅広くカスタマイズすることができる特徴があるので、導入してみました。現時点では、テーマに盛り込まれているスタイルシートを利用しているだけですが、今後は、もっとカスタマイズしていく予定です。

メールをいただければ、MOVABLE TYPE のオリジナルブログを提供します。よければ活用してください。

ウェブ製作で困ることはいくつかありますが、その中でも非常に困る点としては複数のOSやブラウザの動作検証を行うのが難しいといったことではないでしょうか？

現在、ブラウザが多様化されています。その多様かされた複数のブラウザの中でも、OSやバージョンによっても動作や表示が異なります。これは製作者にとって非常に悩みの種であると思われます。

まさか、以前のIEの動作検証を行うために、Windows 95 をインストールするわけにもいかないと思います。今回は、IEに絞って Multiple IE といったものを紹介します。

このソフトウェアは現在、WindowsにインストールされているIEのバージョンに影響を受けたり、上書きすることなく、複数バージョンのIEの動作確認が行えるようになります。IE 3.0 - 6.0 までのバージョンがありますので、あらかじめ Windows のIEはバージョン 7にしておくとすべてのバージョン確認ができますね。ただし、Microsoft から提供しているソフトウェアではなく、意図しない問題が発生する可能性もありますので、自己責任でご利用ください。あと、表示メニューはすべて英語です。日本語版は現時点でありません。

Download Multiple IE installer(10.3MB) 

以下は英語の説明のサイトですが、あらかじめ一読されることをお勧めします。

Install multiple versions of IE on your PC

インストールが完了すると、以下のような画面が表示されます。

 

「家のPCのお気に入りを他のPCで使いたい！」そういったことがありませんか？そんな時に便利な機能があります。

Windows Live Favoritesです。

Microsoft 提供のサービスなんですが、これは便利ですよ。家のPCのお気に入りをネットカフェや会社や友達の家で使うことができるんです。

PCをリカバリーしたけど、お気に入りをバックアップするのを忘れた！！って時にも、このサービスにログインすれば、以前のお気に入りが見れます。インターネットをよく利用する人にとってお気に入りは結構重要な役割になってますよね。

このサービスを利用するにはアカウントが必要になるらしいです。無料のHotmailアカウントを取得してください。 あと、Windows Live Toolberとセットで利用するともっと使いやすくなります。詳細はこちらに問い合わせてください。

今日はおもいっきり他社のサービスの宣伝ですね＾＾；
便利だし。いいよね

マウスオーバーの動作を行うと、リンクのボタンの色や画像が変わるような動作を作る場合はJavaScriptを使うことがあります。ただ、クライアントによっては最初からJavaScriptを無効にしていることがあり、正常にリンクの動作も行われない可能性があります。今回はCSSを使ったリンクボタンについて説明します。HTMLで以下のようなリンクと画像をあらかじめ作成しておきます。

【HTMLタグ】
<ul id="test">
 <li id="test1"><a href="#">test1</a></li>
 <li id="test2"><a href="#">test2</a></li>
</ul>

【ボタンの画像】


上記の設定でスタイルシートを以下のような記述にすることで
リンクボタンが動的に動いている感じのものが作成できます。

【スタイルシート】
/*基本設定*/
#test { height: 25px;list-style-type: none;}
#test li {float: left;width: 60px;}
#test li a {display: block;overflow: hidden;width: 100%;height: 0 !important;height /**/:25px;
padding-top: 25px;background-image: url(test.jpg);}
/*画像指定*/
#test1 a { background-position:  0     0; }
#test2 a { background-position: -60px  0; } 
/*マウスオーバーの画像指定*/
#test1 a:hover { background-position:  0     -25px; }
#test2 a:hover { background-position: -60px  -25px; }

【説明】
1.list-style-type:none でリストタグの「・」を無効にします。
2.float: left で配置を指定します。
3.display: block; で A リンクの属性を文字箇所以外もクリックできるようにblock に変更します。
4.background-position:  0     0; は横方向 0 の上方向 0 の画像を表示させる
5.background-position: -60px  -25px; は横方向 65px の上方向 25px の画像を表示させる

完成はこちら

Flashのサウンド再生のイベントを作成し、ボリューム調整のフェーダー(knob_mc)を作る場合がある。

このフェーダーの動作を以下のような値に設定をするとマウスでフェーダーを動かして、クリックしたままフェーダー以外の場所で、マウスをはなすと、フェーダーの動作がおかしくなってかなり鬱陶しい。イライラ度2

/*マウスでドラッグ開始*/
knob_mc.onPress = function():Void  {
 startDrag(this, false, -50, this._y, 50, this._y);
};
/*マウスをはなす*/
knob_mc.onRelease = function():Void  {
 stopDrag();

Sample1

このような怪しいボリュームフェーダーの動きは、「マウスのリリースをムービークリップ以外の場所で行った場合、ドラッグをやめろ」との記述を追加することで回避ができる。

/*マウスをムービークリップ以外の場所ではなす*/
knob_mc.onReleaseOutside = function():Void  {
 stopDrag();
};

Sample2

普段、パソコンでテキストデーターはどんな形で保管していますか？おそらくはメモ帳やワードなどをファイルで保存していると思います。でも毎回ファイル名や場所を設定して保存したり、内容を修正するために、該当するファイルをダブルクリックで開いて確認してから修正したりと、結構手間ですよね？

僕は普段、紙copi といったツールを利用して管理しています。思いついたら、簡単にメモなどを保存できますし、大きなサイズのテキスト情報も、HTMLもまるごと保存できます。保存と書きましたが、ソフト上で自動的に保存してくれるので、保存の操作は不要なのです。あと、箱といった形で保存するデーターをジャンルわけができ、保存したテキスト情報も、インデックスで表示されてて分かりやすいですね。今の仕事で使っていますが、かなり便利なので家でも使っています。無料で使えます。一部の機能が有料ですが、無料の機能だけでも十分に便利です。

Kamilabo.jp

頭が痛いし、のども痛いし、体も節々が痛いし、、、、風邪を引いてしまいました。リポビダンをガンガン飲みながら、体力の回復をまってます。ちょっと仕事がつらい。。。今日も仕事か、、、うおおおお。。。 （涙