完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。
1．HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>
2．<body>内に下記を追加します。
<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
so.addParam("wmode", "transparent");
so.addParam("menu", "false");
so.addParam("scale", "noscale");
if(so.write("flashcontent")){
var forcesize = new SWFForceSize(so, 900, 700);
}
</script>
<div id="footer_wrap">
<div id="footer"></div>
</div>
今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。
3．下記のようにCSSを記述します。
html, body, #flashcontent {
height: 100%;
}
body > #flashcontent {
min-width: 900px;
width: 100%;
min-height: 700px;
height: 100%;
background: #ffcccc;
}#footer_wrap {
width: 100%;
height: 105px;
margin: -105px 0 0;
position: absolute;
left: 0;
background: #ccffcc;
}#footer {
width: 900px;
height: 105px;
margin: 0 auto;
background: #ccffcc;
}
幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。
textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。
Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。
下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。
Firefox
Safari、Google Chrome
でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。
もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。
＜リサイズを無効にする＞
textarea {
resize: none;
}
＜幅のリサイズだけを可能にする＞
textarea {
resize: horizontal;
}
＜高さのリサイズだけを可能にする＞
textarea {
resize: vertical;
}
Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。
個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。
HTMLの文法が正しいかどうか、何か間違いはないか。
Webサイトのページ数が多かったり、多くのHTMLやCSSを書いていたりする場合、全てをチェックするのはとっても大変です。
そんな時に便利なのが下記のようなチェックツールです。
The W3C Markup Validation Service
W3Cが提供しているHTMLの文法をチェックするサイトです。URLを入力するか、ファイルを参照するか、またはHTMLを貼り付けるかして「Check」ボタンを押すと、HTML/XHTMLの仕様で正しく記述されているかがチェックできます。
Another HTML-lint gateway
これもHTMLの文法をチェックするサイトです。URLを入力するか、HTMLを貼り付けるか、またはファイルを参照するかして「チェック」ボタンを押すと、100点満点で採点してくれます。チェック項目を細かく指定することができます。
W3C CSS 検証サービス
W3Cが提供しているCSSをチェックするサイトです。URLを入力するか、ファイルを参照するか、またはCSSを貼り付けるかして「検証する」ボタンを押すと、CSSが正しく記述されているかがチェックできます。