« 2005年11月 | メイン | 2006年01月 »

2005年12月23日

IE は swf の再生スピードが遅い
:::: Flash ::::

このバグを回避するには、パラメータの設定をするだけで解決する。

Flash の設定で直す場合

パブリッシュ設定 / HTML /ウィンドウモード → 不透明表示 or 透明表示 を選ぶ(デフォルトは標準)

<param name="wmode" value="opaque>(不透明を選択した場合に入るタグ)

<param name="wmode" value="transparent>(透明を選択した場合に入るタグ)

Dreamweaver の設定で直す場合

挿入した swf を選択して、プロパティインスペクタで "パラメータ" の設定を以下のどちらかにする。

パラメータ
wmode opaque
wmode transparent

もちろんソースコードで直しても OK。

そうです、あれです! Flash の背景を透明に設定したいときと同じです。笑

著作権表示
:::: other ::::

Copyright © 2004 xxxxx All rights reserved.
  • 「Copyright」は著作権があることを意味する。
  • © は「マルシーマーク(英語読みは「サークルシー」)」と読み、同じく著作権があることを意味する。この2つは意味が重複しているが、著作権の扱いが国によって異なるため、より多くの国において保護を受けられるようにという習慣からきているらしい。
  • 西暦は著作物を公開した最初の年(ハイフンで現在の年を表示しているのもよくみかける)。
  • xxxxx は著作権者。
  • 最後の「All rights reserved.」は著作権以外の権利についても保持していることを示すもの。

2005年12月22日

text-shadow プロパティ
:::: ひとりごと ::::

あっ気づいたらタイトルに text-shadow プロパティ入ってた! これは今のところ Safari だけしか対応してないので、WIn だとドロップシャドウが表示されないですよね(笑)

2005年12月21日

Flash のストロークについて
:::: Flash ::::

シンボル化されたオブジェクトにストロークの設定がある場合、拡大するとストロークも太ってしまう。

グループ化、もしくはシェイプのままなら、拡大してもストロークのサイズは一定に保たれる。

ただしシンボルでも、”極細線”に設定すると拡大縮小してもストロークは太らない。

ブラウザ別にプロパティを使い分ける(The Underscore Hack)
:::: CSS ::::

ブラウザによってフォントサイズが違う場合などはアンダースコア・ハックが有効です。CSS で設定したプロパティ(width/font-color 等)の前にアンダースコア "_" を付与すると Win IE ではそれを正常なプロパティとして読み込み、他のブラウザでは無視される(定義されていないプロパティとして認識される)ことを利用したものです。例えば、

div {
font-size:10px;
_font-size:9px; ← Win IE ではフォントサイズが9ピクセルになる
}

記述の順番を間違えないこと!

テーブルのタイトル項目を折り返したくない
:::: CSS ::::

<table width="300">
<tr>
<td>かおりんちょ</td>
<td>エジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。</td>
</tr>
<tr>
<td>かめ</td>
<td>中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。</td>
</tr>
<tr>
<td>やま</td>
<td>安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。</td>
</tr>
</table>

たとえばこういうテーブルがあったとします。これを表示するとこうなります。

かおりんちょエジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。
かめ中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。
やま安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。

テーブルの幅だけ決定していて(300ピクセル)項目と内容は成り行きでいいのだけれど、長いタイトル項目でも折り返さないで表示したい時どうしてますか? タイトル項目のセルの幅を設定すればいいですよね。「かおりんちょ」はフォントサイズを10ピクセルに設定してるので6文字だから、マージンとかはこの際無視したとして td width="70" くらいにしておけばまあ安全だと思います。

<table width="300">
<tr>
<td width="70">かおりんちょ</td>
<td>エジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。</td>
</tr>
<tr>
<td>かめ</td>
<td>中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。</td>
</tr>
<tr>
<td>やま</td>
<td>安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。</td>
</tr>
</table>
かおりんちょエジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。
かめ中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。
やま安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。

ところが、ブラウザによってフォントサイズが違ったり、ブラウザのフォント表示を大きくしている場合は「かおりんちょ」の文字列の長さがピクセルで設定したセル幅を超えるとやっぱり折り返されてしまいますから、セル幅をピクセルで設定するのがまずい場合がありますよね。

こんな時は「かおりんちょ」のセルにスタイルとして white-space: nowrap を入れるとバッチリでっす!(泣) もちろんタグに直接スタイル属性を設定しなくても OK です。

<table width="300">
<tr>
<td style="white-space: nowrap">かおりんちょ</td>
<td>エジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。</td>
</tr>
<tr>
<td>かめ</td>
<td>中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。</td>
</tr>
<tr>
<td>やま</td>
<td>安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。</td>
</tr>
</table>
かおりんちょエジプトのプトレマイオス王朝最後の女王。正式には「かおりんちょ7世」。美貌と教養・機知を併せ持ち、ローマの有力者を手玉に取ったとして古代随一の有名な女性。
かめ中国唐代の皇妃。玄宗皇帝の寵姫。蜀出身。あまりにも玄宗皇帝が寵愛しすぎたために安史の乱を引き起こしたので傾国の美女と呼ばれる。
やま安土桃山時代に活躍した盗賊である。出生地は伊賀国・河内国・丹後国・遠江国(現・浜松市)などの諸説がある。あまりの悪逆非道ぶりのために三条河原で釜煎の刑に処せられたとされている。

試しにブラウザのフォントサイズを大きくして見比べてみてください!

2005年12月20日

ダイナミックテキストにマスクは使えない
:::: Flash ::::

ダイナミックテキストにマスクをかけようとすると、テキスト自体が表示されなくなる。

代替案1
背景色のシェイプを上に置いて、さもマスクで表示しているように見せる
代替案2
Actionscript でマスクをかける(ただし矩形でしかマスクされない)

フレームに記述する場合

マスク用インスタンス名.setMask (マスク対象のインスタンス名)

マスク用インスタンスに記述する場合

onClipEvent (load) {
this.setMask (this._parent.マスク対象のインスタンス名)
}

検証した結果、ダイナミックテキストにフォントのアウトラインを埋め込めば、マスクを使用できる。レイヤーを使用した通常のマスクも使用可。スクリプトでマスクする場合も、フォントのアウトラインを埋め込まなければ表示されなかった。

ムービークリップシンボルでボタンを作る
:::: Flash ::::

1フレーム 2フレーム 3フレーム 4フレーム
stop(); _up _over _down

もしくは

1フレーム 2フレーム 3フレーム
_up _over _down
stop();    

このように、ムービークリップシンボルの中のタイムラインをフレーム1で止めて、それぞれのフレームにラベルを付けると、ボタンシンボルの様に反応する。その場合、シーンに置いてあるインスタンスに、on(press) { getURL("#"); } などのボタン用の Actionscript を記述して初めて、ボタンとして機能します。

※ムービークリップシンボルのインスタンスのプロパティを ”ボタン” に変更した場合は、以下のように、stop(); を入れる必要はない。フレームラベルもなくても動きます。ただし、インスタンスのプロパティを ”ボタン” にしてしまうと、マスクは使えません。(プレビューすると効いていないのが分かります。)

1フレーム 2フレーム 3フレーム
_up _over _down

ボタンシンボルの中でマスクは使えない
:::: Flash ::::

ムービークリップシンボルでは使えるマスクが、ボタンシンボルの中では使えない

2005年12月16日

リンクを ウィンドウ100%で開く
:::: javascript ::::

<script type="text/javascript">
<!--
var displayWidth=screen.width;
var displayHeight=screen.height;
function openWin() {
var winWidth=displayWidth;
var winHeight=displayHeight;
var winLeft=0;
var winTop=0;
var optionString="toolbar=no, location=no, status=no, menubar=no, scrollbars=no,";
optionString+="width="+winWidth+", height="+winHeight+",
left="
+winLeft+", top="+winTop;
var win1=window.open('○○○.html', 'newwin1', optionString);
}
//-->
</script>
※ onClick で openWin() を呼び出して使用

ウィンドウ100%表示
:::: javascript ::::

<script language=JavaScript>
<!--
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
//-->
</script>

スクロールバーの色を変える (WinIE)
:::: CSS ::::

<style type="text/css">
<!--
body {
scrollbar-track-color: #ffefff;
scrollbar-face-color: #ffccff;
scrollbar-shadow-color: #ffccff;
scrollbar-darkshadow-color: #ff66ff;
scrollbar-highlight-color: #ffccff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #ffccff;
font-size:13px; color:black; backfround-color:#ffefff;
}
-->
</style>
※システム識別子があるとダメ(互換モードのみ)

WinIE の float のバグを回避 ( The Holly Hac )
:::: CSS ::::

現象:内側要素に float の設定がされているときに、親要素の高さの表示がつぶれてしまう

外側のボックスのサイズ指定がないと起こるバグ。
ごく小さな height の指定を WinIE だけが読むように指定するとよい。

/* Hides from IE-mac \*/
← MacIE は \ (バックスラッシュ)のせいでコメントの終了に気づかない

* html .○○○ { height: 1%; }
← WinIE 、MacIE だけが、HTML 要素に祖先要素が存在していると解釈されるみたいだ

/* End hide from IE-mac */

テキストが右側にはみ出す(Mac IE)
:::: CSS ::::

letter-spacing に、Mac IE は未対応。
回避するには、letter-spacing をやめる。

2005年12月15日

フレームセットページの検索ロボットのクロール
:::: HTML ::::

検索エンジンロボットは、index.html から <a> タグでリンクされているページを順にクロールするので、リンク先を記述した方がよい。

<noframes>
<body>
<h1>早稲田電子専門学校 WEBサイト</h1>
フレームに対応したブラウザがご利用できない方は、以下のリンクから各ページをご覧ください。
<ul>
<li><a href="service.html">サービス</a></li>
<li><a href="link.html">リンク</a></li>
<li><a href="○○○.html">○○○</a></li>
</ul>
</body>
</noframes>

右カラム 左端のインデント(IE のバグ)
:::: CSS ::::

不具合の発生する要素に、width か height を指定する。
(右カラムの div に width か height どちらかを指定すると回避)

横スクロールバーを消す
:::: CSS ::::

body { overflow: hidden; }

Fireworks のパス
:::: Fireworks ::::

アンカーポイント
コントロールハンドル
セメグメント (2つのアンカーポイントを結んだ線)

コントロールハンドルを個別に制御する
ダイレクト選択ツールの場合は、alt(option) キーを押しながら、ハンドルをドラッグ
ペンツールの場合は、ctrl(command)+ alt(option) キーを押しながら、ハンドルをドラッグ 

カーブをコーナーにする
ペンツールでアンカーポイントをクリック

コーナーをカーブにする
ダイレクト選択ツールで、alt(option) キーを押しながら、アンカーポイントからドラッグしてハンドルを引き出す
ペンツールで、ctrl(command)+ alt(option) キーを押しながら、アンカーポイントからドラッグ

アンカーポイントの追加
追加したいパスの上でペンツールでクリック

アンカーポイントの削除
ダイレクト選択ツールでアンカーポイントを選択して、delete もしくは、ペンツールでクリック

※環境設定 / 編集   ペンプレビューを表示 … このほうが慣れていない人はやりやすい

Flash のパス
:::: Flash ::::

アンカーポイント
コントロールハンドル
セメグメント (2つのアンカーポイントを結んだ線)

パスを閉じずに修了する 
 終了地点をダブルクリック

曲線から直線を描きたい時
ctrl( command ) + クリック → 同じ地点をクリック

カーブをコーナーにする (コントロールハンドルをなくす)
ペンツールでアンカーポイントをクリック

コーナーをカーブにする (コントロールハンドルを出す)
ダイレクト選択ツールで Alt ( option ) キーを押しながら、アンカーポイントからドラッグでハンドルを引き出す
ペンツールで ctrl( command ) + Alt ( option ) キーを押しながら、アンカーポイントからドラッグ

※環境設定 / 編集   ペンプレビューを表示 … この方が使いやすい人もいる

2005年12月09日

Opera のためのページマージン指定
:::: CSS ::::

ブラウザがデフォルトで持っているマージンを消すために、
margin: 0px の指定をするが、Opera はこれだけではダメ。

body { margin: 0px ; padding: 0px; }

インラインフレーム内を透明にする
:::: HTML ::::

<iframe src=" " name=" " frameborder="0" border="0" framespacing="0" width=" " height=" " scrolling="auto" allowtransparency="true"></iframe>
インラインフレーム内に表示するページの の背景色(bgcolor)を、 "transparent" にする必要があります。

イメージツールバーを無効にする
:::: HTML ::::

全ての画像に対して無効にする
<meta http-equiv="imagetoolbar" content="no">
1点のみ無効にする 
<img src="sample.gif" galleryimg="no">

Safari は alt 属性 未対応
:::: HTML ::::

title 属性を追加する

<img src=" 〜.gif " width="200" height="100" alt="○○○" title="○○○">

2005年12月08日

直アクセスでフォルダの中身を見えないようにする
:::: other ::::

フォルダの中身が丸見えになるとカッコ悪いので、
画像フォルダなどにもダミーの " index.html " ファイルを置く!

検索ロボットの収集を避ける
:::: HTML ::::

ポップアップページやフレームの中に表示するページが、検索に引っ掛からないようにするための対策です。

対策1
<meta name="robots" content="NOINDEX,NOFOLLOW">
(値の表記は大文字がいいらしい)

<a> タグによるリンクを避ける

対策2
サーバーのルートディレクトリに ” robots.txt ” を置く

User-Agent: *
Disallow: /directory/


※ 絶対的ではないので、どのページに行ってもトップにたどり着けるボタンやメニューを用意する方が良い。

※ Google用 <meta name="googlebot" content="NOINDEX,NOFOLLOW">

フォントのサイズ指定について
:::: CSS ::::

Osaka や 細明朝体 のフォント指定時の注意。

 9 , 10 , 12 , 14 , 18 , 24 , (36)px の 7 種類

上記以外は OS9 以下で字形が崩れる (ビットマップフォントがない)

DOCTYPE 宣言・互換モードと標準準拠モード
:::: HTML ::::

システム識別子を取って、互換モードにして解決する点について

  • インラインフレームの横スクロールバーの表示を消す
  • テーブルなどの height="100%" を有効にする(高さの%指定)

注意点

>>> ページトップ