タグ:HTML ( 24 ) タグの人気記事
(JavaScript)IE環境でUniform Selectボックスを表示するときの注意
IEで Uniform の Select Option を使う時に、Optionに表示する文字列が短いと、下図のようにドロップダウンしない領域が出てきます。(IE7,8で確認)
(Firefox,Chromeはそのようなことは有りません)
e0091163_13532061.jpg


その場合、以下のように、select のスタイルシートで、widthを指定すると回避できるようです。
(165ピクセルくらいがちょうど良いです。)
<select  style="width:165px">
<option value="1">abc</option>
<option value="2">hgc</option>
<option value="4">rebc</option>
</select>


widthを指定すると、以下のようにドロップダウンメニューの幅が広がります。
e0091163_13532677.jpg

[PR]
by Jehoshaphat | 2012-11-24 23:52 | Webがらみ | Trackback | Comments(0)
HTML5になるとローカルファイルをブラウザにドラッグしてアップロードできる

画像をアップロードするとき、ローカルファイルをドラッグ&ドロップできるさいと増えましたよね。

で、社内イントラネット向けのウェブアプリ開発をすることになったので、ドラッグによるローカルファイルアップロードしようかと思ったんですが、これってHTML5の機能になるんですね。

自宅ではFirefoxをメインで使っていますが、職場はIE8を使うことに決まっています。
IE8は、HTML5の機能は使えないので、結局諦めました。

HTML5が使えるFifefox3.6やChrome11以降では、jQueryを使った droparea スクリプトを使うと簡単にドラッグアップロードできるようです。
[PR]
by Jehoshaphat | 2012-10-22 01:24 | Webがらみ | Trackback | Comments(0)
IEでGoogleカレンダー埋め込みサイトが正常に表示されない
サイトにGoogleカレンダーを埋め込んでるんですが、IEでページのリロードをするとGoogleカレンダーが表示されないという現象が発生しました。
Firefox,Chrome,Opera等では発生していません。

いろいろ調査したんですが、多分Google側が修正を加えたことで起こっているんじゃないかと思います。

埋め込みページを初回表示するときは正常に表示されます。(それで稀にエラーになることがありますが。。。)
ページを更新すると確実に表示されません。その際、以下の様なJavaScriptのエラーが発生します。


Web ページ エラーの詳細

ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; MDDS; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
タイムスタンプ: Wed, 4 Jul 2012 06:19:20 UTC


メッセージ: 'gapi.config' は Null またはオブジェクトではありません。
ライン: 126
文字: 216
コード: 0
URI: https://www.google.com/calendar/xxxxxxxxxxxxxxxxxxxxxxembedcompiled__ja.js


メッセージ: オブジェクトでサポートされていないプロパティまたはメソッドです。
ライン: 10
文字: 21
コード: 0
URI: https://www.google.com/calendar/embed?src=xxxx@group.calendar.google.com&ctz=Asia/Tokyo&gsessionid=OK


クッキーの受け入れやキャッシュの無効化等色々試したんですが、ダメでした。

こちら側ではどうしようもないので、とりあえず暫定的な方法を取ることに。。。
初回表示は正常に行くことから、[表示されない場合はここをクリック]みたいなボタンを作成し、埋め込みページにリダイレクトするコードを埋め込んだページにリダイレクトするようにしました。

こんな感じです。


●カレンダー埋め込みページ(main.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
.....
<input type="button" value="表示されない場合はここをクリック" onclick="location.href='back.html';" />
<div>
<!--ここにカレンダーへの埋め込みコード記述-->
</div>
.....
</body>
</html>




●back.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<SCRIPT type="text/javascript">
<!--
setTimeout("link()", 0);
function link(){
location.href='main.html';
}
-->

</SCRIPT>
</head>
<body>
</body>
</html>



GoogleにはさっさとIEでも表示できるように修正して欲しいもんです。。。

追記:
2012年10月現在は直っているようです。(この現象が起きたのは2012/6下旬です。)
[PR]
by Jehoshaphat | 2012-10-22 01:22 | Webがらみ | Trackback | Comments(0)
(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSSで、Niceformsの紹介をしました。

今回取り上げる Uniform もフォーム項目の見栄えを良くするスクリプトですが、Niceforms よりかは構造的にシンプルです。
Niceformsほど凝った処理をしていないので、ある意味使いやすいです。

動作には jQuery が必要です。(UniformはjQueryプラグインです)

入力フォームの input, textarea, select, button にだけ適用されるようですね。(選択することも可能です)

こんな感じになります。(Firefox5)
e0091163_7192681.jpg



IE8だと、テキストボックスの端の丸みがどうも出ないようです。
e0091163_7193763.jpg



ダウンロードは、http://uniformjs.com/からできます。

使い方はまず、下記のように、外部ファイルを読み込みます。(jQueryは必須です)
<link href="uniform.default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery.uniform.js"></script>


そして、下記のスクリプトを挿入します。
<script type="text/javascript" charset="utf-8">
$(function(){
$("input, textarea, select, button").uniform();
});
</script>



IE6には対応してませんが、デフォルトのフォームを表示するようです。

もし、MVCフレームワーク等の関係で、mod_rewriteを設定しURLと実際のパスが異なるような設定にしていて画像が表示されない場合は、uniform.default.css 内のbackgroundスタイルに指定している画像パスに適切な値を設定してみるといいかと思います。


参考:
セクシーなフォームがつくれるjQueryのプラグイン「Uniform」 | Web活メモ帳
jQueryでクールなフォームエレメント実装プラグイン「Uniform」:phpspot開発日誌
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
[PR]
by Jehoshaphat | 2012-06-28 07:21 | Webがらみ | Trackback | Comments(1)
(HTML)Niceforms 入力フォームの見栄えを良くするスクリプト+CSS
3流PGのようにデザインセンスがヘタレでXHTML+CSSがどうも苦手なプログラマに役立つスクリプトが、Niceforms です。

これを使うと、入力フォームの見栄えを簡単によくすることができます。

こんな感じになります。
e0091163_1482373.jpg


使い方は簡単で、http://www.emblematiq.com/lab/niceforms/download/からスクリプトダウンロードし、niceforms.js , niceforms-default.css を読み込みよう設定します。
そして、form のクラスを class="niceform" とするだけです。

HTML側は下記のような感じにしています。(文字数制限のためハイライト無し)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
<link href="niceforms-default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="niceforms.js"></script>
</head>
<body>
<form class="niceform" method="post" action="chk.php" id="input">
<fieldset>
<legend>個人情報入力</legend>
<dl>
<dt>氏名</dt>
<dd><input type="text" maxlength="20" id="name" ></dd>
</dl>
<dl>
<dt>氏名(カナ)</dt>
<dd><input type="text" maxlength="20" id="kana" ></dd>
</dl>
<dl>
<dt>性別</dt>
<dd>
<input type="radio" id="sex" value="男">男
<input type="radio" id="sex" value="女">女
</dd>
</dl>
<dl>
<dt>年齢</dt>
<dd>
<select id="age" name="age" size="1">
<option value="0">10代</option>
<option value="1">20代</option>
<option value="2">30代</option>
<option value="3">40代</option>
<option value="4">50代</option>
<option value="5">60代</option>
</select>
</dd>
</dl>
<dl>
<dt>利用出来る言語</dt>
<dd>
<input type="checkbox" id="pg" value="">C/C++
<input type="checkbox" id="pg" value="">C#
<input type="checkbox" id="pg" value="">Objective-C
<input type="checkbox" id="pg" value="">Java
<input type="checkbox" id="pg" value="">VB/VB.Net
<input type="checkbox" id="pg" value="">JavaScript
<input type="checkbox" id="pg" value="">PHP
<input type="checkbox" id="pg" value="">Perl
<input type="checkbox" id="pg" value="">Ruby
<input type="checkbox" id="pg" value="">Python
</dd>
</dl>
<dl>
<dt>連絡先(TEL)</dt>
<dd><input type="text" size="16" style="ime-mode: disabled" maxlength="15" id="tel"></dd>
</dl>

</fieldset>
<input type="submit" value="送信" class="submitstyle" name="Submit">
</form>
</body>
</html>


ただし、問題点もありdd要素に通常の文字列をいれると、IE8の場合下記のように、その下の各ボックスがずれてしまいます。
e0091163_1483544.jpg

と、おもったらIE8が互換表示になっているだけでしたorz


IE6に対応してないのも難点ですね。

参考:
NiceFormsデモ
[JS]既存のフォームをかわいいデザインに変更するスクリプト -Niceforms | コリス
フォームを鮮やかに彩るjavascript「NiceForms」|skuare.net
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい | DesignWalker
[PR]
by Jehoshaphat | 2012-06-27 01:53 | Webがらみ | Trackback | Comments(0)
(HTML)ul(リスト)を使って4列横並びにする
(HTML)定義リスト(dl,dt,dd)で2列横並びにするで、2列の場合の表を定義リストで表現する方法を書きました。

今回は ul 要素を使って複数列の場合を試してみたいと思います。

完成形は下記のような感じです。
e0091163_04736.jpg


1行目は2列。2行目以降は4列といった感じにします。

まず、HTMLはこんな感じです。
<ul>
<div class="li_float">
<li class="left">項目1</li>
<li class="cl2_right">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ</li>
</div>
 
<div class="li_float">
<li class="left">項目2</li>
<li class="float">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ </li>
<li class="float_title">項目3</dd>
<li class="right"><input type="text" size="16" maxlength="16" ></dd>
</div>
 
<div class="li_float">
<li class="left">項目4</li>
<li class="float">0<input type="text" size="16" maxlength="16" ></dd>
<li class="float_title">項目5</dd>
<li class="right">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨ</dd>
</div>
</ul>



次に,CSSはこんな感じです。
ul {
list-style:none;
padding : 5px;
}
 
/*左端にくる項目名*/
li.left {
clear: left;
float: left; /*liを横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
}
 
/*2列目*/
li.float {
margin-bottom: 0.8em;
float: left; /*liを横並びにするため、回りこみ許可*/
margin-left:2px;
width: 15em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
 
}
 
/*3列目 項目名列*/
li.float_title{
float: left; /*li横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
 
}
/*4列目(右端)*/
li.right {
width: 15em
margin-bottom: 0.8em;
margin-left: 31em; /*この値は各列のwidthの計+2*/
}
 
/*2列の場合の右側の列*/
li.cl2_right {
margin-bottom: 0.8em;
margin-left: 7em;
}
 
/*これを指定しないと、折り返し文字がある場合、各列の上下位置がずれる*/
div.li_float{
clear: left; /*各行毎に回り込み解除*/
}


IE6だと上手く表示できませんでした。
また、IE8の場合、上記例の "項目4" のテキストボックスが何故かセンタリングされて表示されてしまいます。テキストボックスの前に何かの文字を入れれば問題有りませんでした。

罫線を引いて表形式にすることも試みましたが、どうやら難しそうです。


なかなかCSSに苦労させられている3流PGです。。。
[PR]
by Jehoshaphat | 2012-06-26 00:47 | Webがらみ | Trackback | Comments(1)
(HTML)定義リスト(dl,dt,dd)で2列横並びにする
よくWebページで使われるのに、2列の表があります。

昔はこれを table タグで書いていましたが、XTHM+CSS 全盛の今日ではdl要素を使用することが主流になってきたようです。


ということで、2列の表を dl タグ(定義リスト)で作成する方法です。
幾つか方法はあるようですが、3流PGは float を使って dd 要素が dt 要素に回りこむ方法を取りました。

ほぼ、参考先のコピペですが、こんな感じです。

●HTML
<div style="width:600px">
<dl>
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目ホゲホゲホゲホゲ</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
</dl>
</div>


●CSS
dt.left {
clear: left;
float: left; /*dt,dd横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7.5em; /*この幅の後に次のdd要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 8px #CCC; /*左に罫線描画*/
padding-left: 5px;
}
dd.right {
margin-bottom: 0.8em; /*dtのmargin-bottomと同じ値が無難*/
margin-left: 8em; /*dtのmargin-leftより大きい値にする。多数行になってもdtの下に回りこまないようにする。*/
}


こんな感じになります。
e0091163_043397.jpg



borderを指定することで、ホントの表のように表現することもできるようです。(IE6の場合はバグで若干ずれるので調整要)


参考:
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト こちらのサイトさんのコードを拝借しました。
汎用性の高い横並びdlリストを作る [Cool Web Window]:IE6対応や罫線表示のコードも載せられています。
dlのdt dd を横並びに - CSS HappyLife
[PR]
by Jehoshaphat | 2012-06-26 00:44 | Webがらみ | Trackback | Comments(0)
(HTML)IE8で「操作は中断されました。」となる
簡単なWEBサイトを作っていたんですが、IE8でテストしていると、リンクを押下すると、「操作は中断されました。」とかいうエラーが表示されました。
ただ、この現象がでるPCとでないPCがある上に、現象発生するPCでもたまに現象が起きなくなる場合もあり、非常に気味が悪い現象でした。
(FirefoxやChromeなど他のブラウザでは発生しません。また、IE6でも発生しませんでした。)


いろいろ試すと、リンク元のページから、現象が発生するリンク先のページのURLにアンカータグ(ページ内リンク)が付いていると、この現象が発生します。(例:http://hoge.jp/test#top)
逆にアンカーリンクをのけると発生しません。(例:http://hoge.jp/test)

また、アンカーの名前を "top" にしているんですが、これを別の名前に変えたところ現象が発生しなくなりました。


同様の現象が、MS TechCenter:ページ内アンカーに移動しないIEでは”top”って予約語なのか?(ID名がtopだと移動できない?) | わたしのmemo帳でも取り上げられてました。

まったく、IEには困ったものです。
[PR]
by Jehoshaphat | 2012-05-16 00:34 | Webがらみ | Trackback | Comments(0)
(HTML)指定時間後別ページにジャンプさせる

よくサイト移転で、「新しいサイトに移転しました。○秒後にジャンプします」みたいページを見かけます。
てっきり、Javascriptでやってるのかと思いましたが、下記のようなHTMLのメタタグでもできるようです。

<meta http-equiv="refresh" content="秒数;URL=htt://jehupc.exblog.jp/">

非常に簡単ですね。


Javascriptだと下記のようにできるようです
<SCRIPT language="JavaScript">
<!--
mnt = 5; // 何秒後に移動するか?
url = "http://www.eweb-design.com/"; // 移動するアドレス
function jumpPage() {
location.href = url;
}
setTimeout("jumpPage()",mnt*1000)
//-->
</SCRIPT>

一定時間経過後に指定したページへ移動する - JavaScript
自動的に特定のページにジャンプさせる -HTMLタグ辞典-
[PR]
by Jehoshaphat | 2011-09-23 22:50 | Webがらみ | Trackback | Comments(0)
(ツール)WEBサイトのリンクチェックを行う
WEBサイトを更新していると、リンク先がリンク切れになってたりすることがあります。
一つ一つを追っかけるのは非常に労力掛かるので、その際のチェックに役立つツールです。

Website Explorer
リンク先がリンク切れになっているかどうかを調べるツールですが、非常に使いやすかったです。

Windowsアプリなので、ダウンロードして使う必要があります。

解析後に、サイト情報画面を表示してくれ、リンク切れを含むエラー一覧をはじめデータ更新頻度や、画像一覧表示、全文検索も出来ます。
リンク切れチェックに関しては、内部(同ドメイン内)と外部も分けてチェックできるのは嬉しいですね。


W3Cリンクチェッカー
W3Cが提供するオンラインツールです。
オンラインでスキャンできるのは評価できるのですが、英語Onlyなのでちょっと分かりづらいです。


孤島発見器
これは、ローカルでHTMLを編集してて、リンクが貼られていないファイルを検知するのに非常に役立ちました。
特にバックアップのHTMLや不要になった画像ファイルの整理に有用です。

フォルダを指定後、サイトトップの index.html を右クリックし「このページをTOPページにする」とする必要があります。

青色のファイルは無効なリンク(リンク切れ)を含むファイルで、ファイルの右に鎖マークが有るものがどのファイルからもリンクを貼られていないいわゆるゴミファイルです。

リンク切れとゴミファイル両方をチェックできるので助かります。
[PR]
by Jehoshaphat | 2011-09-23 22:48 | ツール | Trackback | Comments(0)