ドキュメント宣言で標準モードにした際に、FirefoxなどのGeckoエンジン系ブラウザで画像の下の隙間ができます。
解決方法は、imgタグにvertical-align: bottom;を指定すると解決できます。
img {
vertical-align: bottom;
}
vertical-align: bottom;
}
2007年8月アーカイブ
チェックボックスから特定の数だけチェックさせ、そのvalue値をパラメータとしてリンク先に渡す方法です。
var itemNumで個数を設定。この個数以上、もしくはこの個数以下チェックされていてもアラートを表示させます。
チェックボックスのvalue値をパラメータとして連結させ、リンク先に渡します。
リンク先はjmpURLで設定します。
■Javascriptソース
var itemNum = 3; // 選択する個数を設定
function check() {
if (document.myform.elements['flag[]'].length) {
count = 0;
for (var i=0;i
}
}
if (count == itemNum) {
var jmpURL = "./itemVar?item1=" + document.myform.elements[0].value + "&item2=" + document.myform.elements[1].value + "&item3=" + document.myform.elements[2].value;
window.location.href= jmpURL;
return false;
} else {
var artTxt = "商品は必ず" + itemNum + "個チェックしてください。"; alert(artTxt);
return false;
}
}
}
if (document.myform.elements['flag[]'].length) {
count = 0;
for (var i=0;i
}
}
if (count == itemNum) {
var jmpURL = "./itemVar?item1=" + document.myform.elements[0].value + "&item2=" + document.myform.elements[1].value + "&item3=" + document.myform.elements[2].value;
window.location.href= jmpURL;
return false;
} else {
var artTxt = "商品は必ず" + itemNum + "個チェックしてください。"; alert(artTxt);
return false;
}
}
}
■HTMLソース
<p>メニューからご希望の3つをお選びください。</p>
<form id="myform" name="myform" method="post" action="" onsubmit="return check()">
<ul>
<li><input type="checkbox" name="flag[]" value="itm1" />塩ラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm2" />みそラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm3" />しょうゆラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm4" />チャーシューメン</li>
<li><input type="checkbox" name="flag[]" value="itm5" />タンタンメン</li>
</ul>
<p>
<input type="submit" name="Submit" value="送信" />
</p>
</form>
<form id="myform" name="myform" method="post" action="" onsubmit="return check()">
<ul>
<li><input type="checkbox" name="flag[]" value="itm1" />塩ラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm2" />みそラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm3" />しょうゆラーメン</li>
<li><input type="checkbox" name="flag[]" value="itm4" />チャーシューメン</li>
<li><input type="checkbox" name="flag[]" value="itm5" />タンタンメン</li>
</ul>
<p>
<input type="submit" name="Submit" value="送信" />
</p>
</form>
clearfixであれこれ調べているうちに、overflowを使った方法でfloat問題を解決した方法がありました。
QuirksModeというサイトのClearing floatsという記事に紹介されていた方法。
日本語でも下記のサイトで紹介されていました。
ただし・・・MacIEで問題が生じるそうなのですが、現在テスト環境が無いので確認できず。
Netscape7.1でも中身が表示されないなどの問題が生じると記載されているサイトがあるのですが、overflow: hidden;と記述した場合、Windows用Netscape7.1版では問題なく表示されました。
Mac OS Classic (OS 8 & 9) 用Netscape7.02 版でのことでしょうか？
元ネタの記事からそのままソースを拝借
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
MacIE対応、Netscape7.1対応も含めて下記の通りに。
/* for modern browser */
.clearfix {
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 1px;
clear: both;
overflow: hidden;
}
/* Hides from IE-mac \*/
* html #container {
height: 1em;
overflow: visible;
}
/* End hide from IE-mac */
.clearfix {
overflow: hidden;
}
.clearfix:after {
content: ".";
display: block;
height: 1px;
clear: both;
overflow: hidden;
}
/* Hides from IE-mac \*/
* html #container {
height: 1em;
overflow: visible;
}
/* End hide from IE-mac */
CSSで2カラムレイアウトした際に生じるfloatに関する問題について。
親ボックスの中にサイドバー部分をfloat:leftさせ、コンテンツ部分をfloat:rightさせたとします。
すると、中身のボックス（サイドバー部分、コンテンツ部分）の高さが親ボックスに反映されません。
親ボックスに背景を敷いていた場合、中身のボックスが親ボックスをはみ出してしまいます。
そこで編み出されたのがclearfixという方法。
本家はPosition Is Everythingというサイトで、その中のHow To Clear Floats Without Structural Markupという記事で紹介されています。
IE6以降、Firefox、Safari、Operaといったモダンブラウザだけならnorisfactoryの「clearfixの決定版を作る －モダンブラウザ編－」が、もっとも参考になるかもです。
ここで紹介されているCASE10でファイナルアンサーと言えると思います。
しかしながら、いまだIE5.0、MacIE5.2といったレガシーブラウザでCSSレイアウトを依頼してくるクライアントもいまだ後を絶ちません。
実際つい最近、IE5.0、MacIE5.2、Netscape7.1対応のフルCSSレイアウト移行案件がありました。
Win IE5.0やMac IEなどのテスト環境を揃えるだけで一苦労でした。
clearfixに関しては、本家以外にもいろいろな記述方法が発表されていますが、上記のレガシーブラウザ対応を考慮すると、実は本家が一番よく練られているのがわかりました。
ちなみに本家の記述方法は下記の通り。
.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
clearfix自体にはいろいろバリエーションがあります。
■IE独自拡張zoomプロパティを使用
/* for modern browser */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for IE 5.5-7 */
.clearfix {
zoom:100%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* for IE 5.5-7 */
.clearfix {
zoom:100%;
}
※zoom:100%をzoom:1としているパターンもあります。
いずれにせよ、zoomプロパティはIE独自拡張のため、W3Cのバリデートに通りません。
便利ではありますがレギュレーションにマッチしないのでアウト。残念です。
■IE7対応版（本家にプラスアルファ）
/* for modern browser */
.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
.clearfix {
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
※本家のclearfixに追記してIE7対策を施したもの。
IE7が登場するまでは、最初のdisplay: inline-block;をdisplay: inline-table;と記述しているパターンが多かったようです。
レガシーブラウザもIE７も網羅するならこれでOKかと。
■content: ".";のピリオドはNetscape7.1以下用
content: ".";の箇所をcontent: "";（スペースなし）、content: " ";（半角スペース入り）としているバリエーションがあります。
結局これは、Netscape7.1を対象ブラウザとしているかどうかがポイントのようです。
続きを読む: clearfixのバリエーション
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD付)
これからActionScript 3.0の基礎をきちっとおさえていきたいと思います。
MovableType4 RC1から製品版にアップグレードしました。
RC1をインストールしているフォルダにそのまま上書きして、アップロードしました。
無事アップグレードを完了。
明確な違いといえば、すみずみまで日本語化されているということ。
もともとRC1（英語版）も翻訳パックが同梱されているため、自動的にメニューなどが日本語化されていました。
でも今回ダウンロードしたのは日本語版ですので、何から何まで日本語です。当たり前ですけど。
ちょうど、MovableType関連の案件が入ってきているので、新しく追加されたテンプレートタグとか使ってみようかと思います。
MovableTypeにGoogle Mapsを埋め込みします。
ただMovableTypeのエントリー記事にGoogleMapsを埋め込むのは、他の方でもされていますので、ちょっと違ったアプローチ方法を取ってみました。
■設定条件
「表示する地図の緯度・経度をエントリー記事から指定できるようにする」
つまりあらかじめ決められた座標の地図をエントリーに表示させるのではなく、そのエントリーごと好きな座標の地図を表示できるようにするという条件を設定しました。
■実施手順
Google Mapsを利用するにはGoogleアカウントを取得後、Google Maps API-Sign Upで、API Keyを取得する必要があります。
今回私が取った方法は、MovableTypeのテンプレートにあらかじめAPI Keyを埋め込んでおく方法。
<script type="text/javascript" src="http://maps.google.co.jp/maps?file=api&v=1&key=あなたのKey">
■注意点その１・・・文字コードUTF-8。
Google Maps APIを利用するには文字コードがUTF-8でなくてはなりません。
当ブログはUTF-8で記述しているので問題ありませんが、Shift-JISやEUC-JPでエンコードしている場合は、インラインフレームで呼び出すしかありません。
■注意点その２・・・Javascriptは<head>タグ内に。
FirefoxやOperaなどのブラウザでは問題ないのですが、IEでは<body>タグ内に、Javascriptを記述して直接GoogleMapsを呼び出そうとするとエラーが表示されます。
今回のケースのように、どうしてもエントリー記事内にJavascriptを記述する必要がある場合が出てくるでしょう。
そのときは、<body>タグ内のJavascriptはfunction化します。
<body onload="onLoad()" onunload="GUnload()">というように、<body>タグのonloadでそのfunctionを呼び出します。
※ちなみにonunload="GUnload()"はIEのメモリリーク対策用だそうです。
■ブログのテンプレート
各テンプレートの<head>内に、Google API Keyのソースを記述します。
同時に、緯度と経度、ふきだしに表示させるテキストを引数で受け取るためのスクリプトを記述します。
こちらは外部ファイル化したほうがスマートですが、説明を簡素化するため<head>タグ内に記述します。
引数lat、lon、lotに緯度・経度・文字テキストを受け渡します。
上記で記載の<body>タグのonloadを忘れずに！
<script src="http://maps.google.com/maps?file=api&v=2&key=あなたのKey" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(lat,lon,lot) {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(lon,lat), 2);
var point = new GPoint(lon,lat);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode(lot),offset);
}
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function load(lat,lon,lot) {
if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(lon,lat), 2);
var point = new GPoint(lon,lat);
var marker = new GMarker(point);
map.addOverlay(marker);
var offset = new GSize(0, -20);
map.openInfoWindow(map.getCenterLatLng(),
document.createTextNode(lot),offset);
}
}
//]]>
</script>
■エントリー記事の記述例
ブログのエントリー記事内のGoogleMapsを表示させたい箇所に下記のように記述します。
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
function onLoad() {
load(34.675813, 135.5037,"ハートンホテル南船場");
}
</script>
<script type="text/javascript">
function onLoad() {
load(34.675813, 135.5037,"ハートンホテル南船場");
}
</script>
■実施の埋め込み例
2007年10月6日修正。実際の埋め込み例を削除しました。
理由はいちいちgoogleにアクセスして、ページが重くなるからです。
「Google Mapsの埋め込み（その２）」の記事を参照
続きを読む: Google Mapsの埋め込み
先日7月26日に、Movable Type 4 RC1（Release Candidate 1）がリリースされました。
やっとこ本日インストール。
ダウンロード先は、MovableType.orgのDownloadページから。
http://movabletype.org/download.html
私の場合は、すでにMovable Type 4 β版をインストール済みでしたので、RC1版にアップグレードという形になるはずなのですが・・・結果的にエラーになりました。
普通にダウンロードして解凍したファイルを、Movable Type 4をアップしているサーバーの同じディレクトリにアップロードしてアップグレード。
アップグレード成功と出たのですが、ブログを再構築しようとするとエラーになりました。
エラーの内容は下記の通り。
「Can't call method "data_based" on unblessed reference at lib/MT/WeblogPublisher.pm line 1014.」
続きを読む: Movable Type 4 RC1にアップグレード
