HTMLの最近のブログ記事

iPhone用サイト内で、iframeを使った場合、window.orientationで画面縦横変更のトリガーがiframe内ではうまく動作しませんでした。
そこで、代わりに親htmlから縦横が変わった際にiframe内のJSを実行させることで、iframe内でも縦横によって違う動作をさせる(CSSでパーツの幅を変えるなど)ことができました。


//親html内
//iframe_idは、iframeのid名
document.getElementById("iframe_id").contentWindow.setOrientation_i(引数);

//iframe内
function setOrientation_i(dl) {
    //処理をココへ
}

HTML内で、<form>ではなく、ユーザーが編集や入力可能なテキストエリアを作るときには、contenteditableを使います。
たとえば、<div>内を編集可能にする場合は、下のようになります。

<div contenteditable="true">このエリアは編集可能です。</div>

不必要に<form>を使わずに、このcontenteditableを使って対応できるところがあるような気がします。
contenteditableはとても長いですが、contentを+edit(編集)+able(可能)の意味です。

サンプル
このdiv内は編集可能です。
Flashで扱う変数をHTMLに記述する //HTML&ActionScript (addvariable)と同様に、配列にしたい変数をHTMl内に記述して、それをFlash内で使用します。
更新が必要な変数をHTML内に変数を書くことで、更新作業の手間が大きく削減できます。

「,」で区切られた文字列をFlash内で配列にするには、splitを使います。

//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。

var so = new SWFObject("swf/test.swf", "devdev", "300", "200", "8");
so.addVariable("hensu", "100,111,154");
so.write("devdev");

//ActionScript//////////////////////////////////////////////////////////////////

var myAry = _root.hensu.split(",");
trace(myAry);

上をパブリッシュすると、myAryが配列としてtraceされます。

Flash内で使う変数をHTMLに記述して使う場面がよくあります。
例えば、1つのswfをいろいろなページで使う場合や、更新が多々あるものの、変数の変更のみの場合、変数をHTML側に書いてあれば、Flashを扱えない人にも更新をお願いすることができます。
もちろんXMLで管理することもできますが、大した量でない場合などは、HTML内に書くと便利です。

下の例は、『moviefile = movie75.flv』と『"picfile", "images/movie18.jpg"』という変数をHTML内に記述した場合の例です。FLVのプレーヤswfをサイト内で使い回し、プレーヤー内で使うFLVファイルと、サムネールなどを変数として投げる設定です。
addVariableを使って変数を設定します。


//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。

var so = new SWFObject("swf/movie.swf", "movie", "300", "200", "8");
so.addVariable("moviefile", "movie75.flv");
so.addVariable("picfile", "images/movie18.jpg");
so.write("movie");



//ActionScript//////////////////////////////////////////////////////////////////

trace(_root.picfile);
trace(_root.moviefile);
のように、これでActionscript内でJSから投げた変数が取得できます。
1つのswfをいくつかのページで使い回す際などにとても便利です。
フッターやヘッダー、バナーなど、各ページで共通して使う部分を外部JS化して、1つのファイルを更新することで、全てのファイルの内容が変わるようにします。

HTML内では、ソースを挿入したい部分でJavaScriptをよびます。

//HTML//////////////////////////////////////////////////////////////////

<script type="text/javascript" src="ぱす/footer.js"></script>

//JavaScript//////////////////////////////////////////////////////////////////

var html = '<div id="footer">';
html += '<a href="#"><img src="http://ぱす/bnr1.jpg" alt="" width="100" height="10"></a>';
html += '<a href="#"><img src="http://ぱす/bnr2.jpg" alt="" width="100" height="10"></a>';
html += '<a href="#"><img src="http://ぱす/bnr3.jpg" alt="" width="100" height="10"></a>';
html += '</div>';
document.write(html);



 4 
のように、四角で囲む文字をCSSで扱う機会があったので、記録しておきます。

ふと思うと、今までなら画像で処理してしまいそうでしたが、ブラウザでの文字サイズの変更や、ファイルサイズを1バイトでも減らすことは、サーバーや回線の負荷など、1つは微々たるものでも、何度も表示されれば積み重なっていくので、今回はエコを考えてCSSでの処理となりました。

まあ、とくに目新しい訳ではないですが、次使うときには忘れていそうなので。

//HTML//////////////////////////////////////////////////////////////////

<span class="cubettl">&nbsp;4&nbsp;</span>


//CSS//////////////////////////////////////////////////////////////////

.cubettl{
border-style: solid;
border-width: 1px;
border-color: #000000;
color:#000000;
}

/*Safariのみ見え方が異なるため、ハックで調整*/
body:last-child:not(:root:root) .cubettl {
padding-top:0px;
padding-bottom:1px;
}
広さの単位である、平方メートル(m&#178;)や、容積の単位である立法メートル(m&#179;)を入力するには、Macでは『平方メートル』もしくは『立方メートル』と入力して変換すると表示されますが、HTMLでは認識されません。

Windowsでも同様ですが、HTMLで正しく表示させるには、正しい文字コードで入力するか、上付き文字としてCSSで設定するかが必要です。

//文字コード//////////////////////////////////////////////////////////////////
『平方メートル』もしくは『立方メートル』の文字コード
² : &#178;
³ : &#179;


//CSS//////////////////////////////////////////////////////////////////

span.sup{
vertical-align:super;
font-size:80%;
}

参考サイト
特殊文字コード表
HTMLの特殊文字
やっぱりどうしてもInternet Explorerなどでうまく他のブラウザと表示をあわせることができず、最後の手段のハックを使う場面が出てきます。

今回はIE7のみに適応したい場面があったので、記録しておきます。

下の例は、#menu ulにmargin-leftをIE7のみ別の値を設定したい時のハックです。

//CSS//////////////////////////////////////////////////////////////////

#menu ul{
padding-top:21px;
margin-left:38px;
}

*:first-child+html #menu ul{
margin-left:76px;
}
web上にメールアドレスを記載すると、そこから迷惑メールがどんどん来るらしいという話は聞いたことがありますが、それが本当かを実験してみます。
最近では検索エンジンでFlash内のテキストを読込むことができるようなので、ひょっとすると迷惑メールも来うるのかなと疑問に思いました。
また、同時に検索エンジンに本当にFlash内のテキストが理解されるかも見ていきたいと思います。

実際にサイトを制作する際にはお問い合わせフォームなどにして実装しますが、あくまで実験なので、しばらくみなさんそっとしておいてください。

結果はしばらくたった後にこのページに追加します。


test1@bute-studio.com
InternetExplorerでは、position: fixedが使えないので、フッターやヘッダーを固定するレイアウトにする場合は、IE6に対策が必要です。
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。

いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html


これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。

最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。


もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/
Flash内にブログなどを引っ張ってくる際に、XMLをMTに吐き出させてそれをFlashへ引っ張ってくると、なかなかアップするクライアントが臨機応変にリンクや画像や動画埋め込みなどを行うことができないので、最近はiframeを使って入れる方法を使っています。


ただし、iframe内は通常のhtmlコンテンツになるため、ブラウザ間の表示の相違が問題になってきます。

今回ハマってしまったのは、またしても忌まわしいIEの横スクロールバー。

iframe内に入るコンテンツは、CSSでガチガチにwidthを指定してありますが、長さはスクロールが必要な長さでした。
なので、当然縦スクロールのみが出るのが当たり前と思いきや、なぜだかIEのみに横スクロールまで出てしまいます。

iframe内のwidthや、読込む親htmlのiframeタグのwidthをいじってみましたが、なかなか直らず。

調べてみると、結論は
「IEは縦が長くてスクロールが必要な場合、横も出てしまう」
みたいです。

だからIEなんかなくなればいいのに!って言ったのに

となると、解決策は下のようにしました。

//CSS//////////////////////////////////////////////////////////////////

(iframe内に入れるhtmlファイルのcssに記述)

html {
overflow-x: hidden;
}
Web制作の仕事をしていると、必ずぶち当たるIEの壁。
CSSでは違った解釈をいろんなところで引き起こしてくれるし、IE6までは.pngの透明画像もそのままは扱えず、ややこしくしてくれちゃうし。。。

そのくせ今でもIE6のシェアが高かったりして。
この際、IE6に致命的なバグが発見されて、毎日テレビのニュースで「古いIEを使っている人は、すぐにIE7に移行しましょう」ぐらいなことがおこらないかと毎日期待してますが、そんなこともなく。

といつもの壁をまたしても感じている今日、発見してしまいました。
IE6だけ落ちる仕掛けが!
しかも簡単に作れる!

驚くほど簡単です。
こんな1行で落ちてしまうIEってどんだけ弱いのかと哀れになってしまうほどです。

ネタ元はこちら
http://d.hatena.ne.jp/Hamachiya2/20070804/browser_crasher

//HTML//////////////////////////////////////////////////////////////////

<style>*{position:relative}</style><table><input></table>

価格.com ブロードバンド