SQLの窓

2014年11月28日


CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い

CENTER 要素は、HTML 4 (及び XHTML)で非推奨要素に指定され、HTML5 で完全に廃止されていますが、間違って使われてしまった場合、Google Chrome( と Firefox は同じ ) と IE11 では全く表示が異なる場合があります。

DIV 要素を position:relative でラッパーにして、内部に position:absolute を指定しますが、DIV 要素は CENTER 要素によって中央に表示されるのですが、中の要素の位置が、Google Chrome と Firefox では、中央の軸が左端になって表示されます。これに関しては、IE11 の、DIV の左端に表示されるのが正しいと思うのですが、そもそも CENTER 要素を使う事が間違っているのでなんとも言えません。( 本来は、ラッパーに対して margin:auto を指定して、ラッパーの親要素の幅に対して中央位置に配置する )

Google Chrome と Firefox



IE11


<center>
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>
</center>
▼ CENTER で表示
<div style='position:relative;width:400px;height:350px;border:solid 1px #ccc;margin:auto'>
<img src="https://lh3.googleusercontent.com/-CWeNDTCMQRI/VF4sSgumWgI/AAAAAAAAXdQ/Ug4sBf9sB_I/s300/_img.png" style="position:absolute;border: solid 1px #000000">
</div>

▼ margin:auto で表示
※ IE11 ではどちらも同じ表示になります



posted by lightbox at 2014-11-28 03:39 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2014年11月26日


さくらインターネットの CRON の設定で、標準エラー出力を postmaster に送らない

設定ページに、標準出力を postmaster に送らない設定についてはサーバーコントロールパネルの実行コマンド欄に書いてありますが、そのままでは 標準エラー出力には出力されてしまいます。よって以下のように指定します。
cd /home/winofsql/www/lightbox/mail ; /usr/local/bin/php mailtest.php 1> /dev/null 2>&1
1> /dev/null 2>&1 で、1が標準出力、2が標準エラー出力。2を1 の結果に出力する書き方です。( /dev/null は null デバイスと呼ばれるものです )

※ さくらインターネットの CRON では、スクリプトのあるディレクトリに移動してから、処理を実行するのが通常です( PHP 以外では必ずしもそうではありませんが、カレントディレクトリに対して書き込み権限等あるという前提で処理する事が多いのでそのほうが問題が起きないことになります )





関連するさくらインターネットの『よくある質問』

CRONや.mailfilterに記述したプログラムが動作しません。

CRONが動作しません。



posted by lightbox at 2014-11-26 16:19 | 記録 | このブログの読者になる | 更新情報をチェックする

jQuery.selection(プラグイン) : テキストエリア内のカーソル位置や選択範囲に対して文字列を追加したり置き換えたりする。

2014/11/26 : jQuery.selection(プラグイン) のバグ対応。現在、Google Chrome のみ、選択後テキストエリアの最後までスクロールされています。中身を見ると、結局 Firefox でしか必要の無い処理の影響でした。以下の部分が変更内容です。
        setPos: function(element, toRange, caret) {
            caret = this._caretMode(caret);

            if (caret === 'start') {
                toRange.end = toRange.start;
            } else if (caret === 'end') {
                toRange.start = toRange.end;
            }

            var userAgent = window.navigator.userAgent.toLowerCase();
            if (userAgent.indexOf("firefox") > -1) {
                element.focus();
            }
            try {
                if (element.createTextRange) {
                    var range = element.createTextRange();

                    if (win.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
                        toRange.start = element.value.substr(0, toRange.start).replace(/\r/g, '').length;
                        toRange.end = element.value.substr(0, toRange.end).replace(/\r/g, '').length;
                    }

                    range.collapse(true);
                    range.moveStart('character', toRange.start);
                    range.moveEnd('character', toRange.end - toRange.start);

                    range.select();
                } else if (element.setSelectionRange) {
                    element.setSelectionRange(toRange.start, toRange.end);
                }
            } catch (e) {
                /* give up */
            }
        },



テキストエリアで使う事が最も便利で有効ですが、通常の1行の入力フィールドでもかまいません。

使用可能なメソッドは 5つ

1) getPos
2) setPos
3) insert
4) replace
5) get

get は、一応メソッドとしての名前ですが、1〜4 以外の文字列を指定すると全て get となります。getPos と setPos は、選択位置の情報の取得と反映です。

insert では、サブメソッドがあって、before か after を使用し、最後のカーソルモードとして、keep か start か end を選べます。

ページ全体で使用可能 selection メソッド

こちらは、text か html かで選択部分の情報を取得します
ここを選択して html 取り出しすると

▼ テキストエリア内限定 ▼ ページ全体に対しての処理

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jquery.selection.js"></script>
<script type="text/javascript">

$(function(){

	$("#text")
		.css({
			float: "left",
			width: "400px",
			height: "200px"
		});

	$("#insert1")
		.attr("type", "button")
		.val("前へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "before", caret: "keep" })
		});

	$("#insert2")
		.attr("type", "button")
		.val("後へ挿入")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("insert",{ text: "文字列", mode: "after", caret: "keep" })
		});

	$("#replace")
		.attr("type", "button")
		.val("置き換え")
		.css({
			display: "block"
		})
		.click(function(){
			$("#text").selection("replace",{ text: "文字列", caret: "keep" })
		});

	$("#get")
		.attr("type", "button")
		.val("取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $("#text").selection("get") )
		});

	$("#get_text")
		.attr("type", "button")
		.val("選択部分の text 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("text") )
		});

	$("#get_html")
		.attr("type", "button")
		.val("選択部分の html 取り出し")
		.css({
			display: "block"
		})
		.click(function(){
			alert( $.selection("html") )
		});

});

</script>
<b>ここを選択して <span>html</span> 取り出しすると</b><br><br>

<textarea id="text">aaa
bbb
ccc</textarea>
▼ テキストエリア内限定
<input id="insert1">
<input id="insert2">
<input id="replace">
<input id="get">
▼ ページ全体に対しての処理
<input id="get_text">
<input id="get_html">



IE11 のエミューレートテストでは、IE8 を含むそれより前は、.attr("type", "button") が動作せず、jQuery も 1.11.0 以前である必要があります( IE8 には addEventListener が無いので )

関連する記事

ノーマル JavaScript と比較。jQuery でクリックしたテキスト( SPAN 要素 と INPUT またはテキストエリア ) を選択状態にする


posted by lightbox at 2014-11-26 15:25 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする

2014年11月24日


jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法

タイトルとコンテンツ

指定方法は3種類ありますが、基本はアコーディオンを指定したブロックの子要素の偶数番号がタイトルになり、その直後の要素がコンテンツになります。
Content panels must be the sibling immediately after their associated headers.

コンテンツパネルは、ヘッダの直後の兄弟要素でなければなりません。
但し例外があって、子要素の中に LI 要素が並ぶ場合( 通常親要素は UL )は、LI 内の最初の子要素がタイトルになり、それに続く要素がコンテンツになります。( セレクタ : > li > :first-child ) もう一つ、header オプションでタイトルとする要素を指定する事ができます。これは、無条件に偶数をタイトルにすると、非表示要素が対象になってしまいます。そのような事を避ける為に header オプションがあります コンテンツはブロック要素で heightStyle というオプション( 規定値は auto )があり、fill、auto、content が指定できます。いずれも、正しく表示する為にコンテンツの高さが必要になってくるので、コンテンツ部分はブロック要素で指定します。 注意するのは、fill の場合で、アコーディオンを指定した親要素の高さいっぱいに広がるようになります。レイアウトが変化しては困る場合に親要素の指定は有用ですが、その為に親要素を正しくレイアウトする必要があります。 auto は、複数コンテンツがある場合、そのコンテンツの中で一番高さが大きいものにあわせられます。順に内容を読んで行くようなコンテンツに適しています。 content は、コンテンツ毎の高さで表示されるので、オプション表示等に向いています
  • 最初の要素が li の場合、li の child の最初の要素がタイトルとなります
    コンテンツは高さのコントロールがあるので、
    ブロック要素が望ましいようです
  • heightStyle が fill の場合は
    親要素の高さいっぱいに広がります
  • ヘッダは通常は偶数で、コンテンツは奇数です
    header オプションで要素を指定も可能です
  • ▲ いっぱいいっぱいまで使用しているので、親要素の bottom と重なっています
    active オプションで最初に開くコンテンツを指定できます
    この内容を localStorage に保存しておけば、次回に開く処理を実装できます
    heightStyle が auto の場合は
    コンテンツの中で
    一番大きな高さにあわせます
    このアコーディオンのヘッダは
    偶数要素が使われています
    ▼ ヘッダ部分の輪郭のスタイルが違うのは、このブログ内の H3 に対するスタイルです

    ヘッダを強制的に指定しています

    コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません

    heightStyle が content の場合は

    コンテンツのの
    高さにあわせます

    UI の基本スタイルを変更したい場合は

    新しいクラスを定義し、追加して上書きします
    
    
    
    ▼ ソースコードサンプル
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script>
    $(function(){
    	$( ".wrap" ).css( { height: "250px", border: "solid 2px #000", "margin-bottom": "20px" } );
    	$( "#accordion1" ).accordion({
    		heightStyle: "fill"
    	});
    
    	$( "#accordion2" ).accordion({
    		heightStyle: "auto",
    		active: 1
    	});
    
    	$( "#accordion3" ).accordion({
    		heightStyle: "content",
    		header: "h3"
    	})
    	.addClass( "accordion3_style" );
    
    });
    </script>
    <style type="text/css">
    .accordion3_style {
    	font-size: 14px;
    	font-family: "メイリオ","MS ゴシック";
    }
    </style>
    <div class="wrap">
    <div id="accordion1">
    	<li><span>最初の要素が li の場合、li の child の最初の要素がタイトルとなります</span><div>コンテンツは高さのコントロールがあるので、<br>ブロック要素が望ましいようです</div></li>
    	<li><span>heightStyle が fill の場合は</span><div>親要素の高さいっぱいに広がります</div></li>
    	<li><span>ヘッダは通常は偶数で、コンテンツは奇数です</span><div>header オプションで要素を指定も可能です</div></li>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion2">
    	<span>active オプションで最初に開くコンテンツを指定できます</span>
    	<div>この内容を localStorage に保存しておけば、次回に開く処理を実装できます</div>
    
    	<b>heightStyle が auto の場合は</b>
    	<div>コンテンツの中で<br>一番大きな高さにあわせます</div>
    
    	<div>このアコーディオンのヘッダは</div>
    	<div>偶数要素が使われています</div>
    </div>
    </div>
    
    <div class="wrap">
    <div id="accordion3">
    	<h3>ヘッダを強制的に指定しています</h3>
    	<div>コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません</div>
    
    	<h3>heightStyle が content の場合は</h3>
    	<div>コンテンツのの<br>高さにあわせます</div>
    
    	<h3>UI の基本スタイルを変更したい場合は</h3>
    	<div>新しいクラスを定義し、追加して上書きします</div>
    </div>
    </div>
    
    
    
    
    
    posted by lightbox at 2014-11-24 12:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする

    2014年11月21日


    INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン

    INPUT type="number" の振る舞いをブラウザ間で調整する でテストした結果を元に、jQuery のプラグインを作成しました。
    
    対応するに値するのは、Chrome と Firefox と IE11(10) だけです
    
    ブラウザは、Google Chrome と Firefox と IE だけです。さらに、Google Chrome のスピンボタンを非表示にする為に、INPUT 要素には id が必須となっています。その場合は、後から表示するような実装はしていません。IE の場合は、スピンボタンが最初から無いので、JQuery UI の spinner を使うようにしています。ただ、IE の入力チェックが type="number" に対して他のブラウザのように動作しないので、type="text" に変更した上で、pattern 属性でチェックさせている為、0〜9 の文字しか入らない実装になっています。
    
    ※ IE9 以前で、autoNumber.js を実装するようにしました。
    
    Opera と Safari for Windows をテストしました
    
    どちらも問題あるので、結局 IE9 以前と同じ対応になっています。
    ( Safari for Windows は Apple で長い間バージョンアップされていません )
    
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $.fn.extend({ 
    	type_number: function(option){
    
    		// オプションが省略された場合の対応
    		option = option || {};
    		// INPUT 要素のみ対象
    		if ( $(this).prop("tagName").toUpperCase() != 'INPUT' ) {
    			return;
    		}
    
    		var userAgent = window.navigator.userAgent.toLowerCase();
    		var appVersion = window.navigator.appVersion.toLowerCase();
    
    		if ( userAgent.indexOf("msie") > -1 ) {
    			if (appVersion.indexOf("msie 10.0") > -1) {
    				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    				else {
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    			}
    			else {
    				// IE9 以前で autoNumeric で数値以外を入力不可にする
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    			}
    		}
    		else {
    			if ( userAgent.indexOf("trident/7.0") > -1 ) {
    				// ※ IE11
    				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    				else {
    					$(this).attr( "type", "text" );
    					$(this).attr( "pattern", "^[0-9]+$" );
    				}
    
    			}
    			else if (userAgent.indexOf("firefox") > -1) {
    				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
    				if ( option.spin != 'on' ) {
    					// spinner を使う
    					if ( option.spin == 'jquery' ) {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$(this).css({ "-moz-appearance": "textfield" });
    								$(this).spinner(option);
    							}
    						});
    					}
    					else {
    						$(this).css({ "-moz-appearance": "textfield" });
    					}
    				}
    
    			}
    			else if (userAgent.indexOf("opera") > -1) {
    				// スピンボタンが表示されますが、消す方法が見つからないので
    				// IE と同じく jQuery で対応したほうがよさそうです。また、
    				// FORM の送信で数字以外の文字のチェックがされないので、
    				// 数字のみ入力させるプラグインをさらに実装する必要があります
    				// ※ autoNumeric.js は type="text" でのみ有効です
    				$(this).attr( "type", "text" );
    
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    			}
    			else if (userAgent.indexOf("chrome") > -1) {
    				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
    				if ( option.spin != 'on' ) {
    					// spinner を使う
    					if ( option.spin == 'jquery' ) {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
    								$(this).spinner(option);
    							}
    						});
    					}
    					// スピンボタンを非表示にする為に、スタイル要素を追加
    					// ( id があるという前提と、後から表示に切り替える事は考えていない )
    					else {
    						$(this).each(function(){
    							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
    								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
    							}
    						});
    					}
    				}
    			}
    			else if (userAgent.indexOf("safari") > -1) {
    				// Google Chrome の劣化版でした。そもそも最近に
    				// バージョンアップされていない気がします。コード
    				// 自体は Google Chrome と同じで見た目は同様の
    				// 結果になりますが、FORM の送信で数字以外の文字
    				// のチェックがされないので、数字のみ入力させる
    				// プラグインをさらに実装する必要がありますが、
    				// autoNumeric.js は type="text" でのみ有効なの
    				// で、Opera と同じコードになります
    
    				$(this).attr( "type", "text" );
    
    				var el = this;
    				var s = document.createElement("script");
    				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
    				if(s.addEventListener) {
    					s.addEventListener("load",callback,false);
    				} 
    				else if(s.readyState) {
    					s.onreadystatechange = callback;
    				}
    				document.body.appendChild(s);
    				function callback() { 
    					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
    				}
    
    				if ( option.spin == 'on' || option.spin == 'jquery' ) {
    					$(this).spinner(option);
    				}
    
    			}
    			else {
    			}
    		}
    
    	}
    });
    
    $(function(){
    	$("#num1").type_number( { spin: "off" } );
    	$("#num2").type_number( { spin: "on" } );
    	$("#num3").type_number( { spin: "jquery" } );
    });
    
    </script>
    
    <style type="text/css">
    * {
    	font-family: "メイリオ", Meiryo, "MS Pゴシック";
    	font-size: 16px;
    }
    
    </style>
    <form 
    	method="get" 
    	id="target_form" 
    	target="my_ferame" 
    	action="http://winofsql.jp/php_get.php" 
    	accept-charset="utf-8">
    <pre>
    <input 
    	id="send_check" 
    	class="num"
    	type="submit" 
    	name="send" 
    	value="送信">
    ▼ type="number" でスピンボタンなし
    <input
    	id="num1"
    	class="num"
    	type="number" 
    	name="num[]">
    
    ▼ type="number" でスピンボタンあり
    <input 
    	id="num2"
    	class="num" 
    	type="number" 
    	id="ie9" name="num[]">
    
    ▼ jQuery spinner
    <input 
    	id="num3"
    	class="num" 
    	type="number" 
    	id="ie9" name="num[]">
    </pre>
    </form>
    <iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
    
    
    以下の3種類の実行でそれぞれの表現が変化します。( spinner へのオプションが必要な場合は、追加で設定します。
    
    $(function(){
    	$("#num1").type_number( { spin: "off" } );
    	$("#num2").type_number( { spin: "on" } );
    	$("#num3").type_number( { spin: "jquery" } );
    });
    
    
    
    
    
    posted by lightbox at 2014-11-21 11:33 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

    2014年11月20日


    INPUT type="number" の振る舞いをブラウザ間で調整する

    Google Chrome と Firefox ではスピンボタンが実装されていますが、IE では何もありません。この違いは、jQuery の spinner で吸収するのですが、IE のバージョンによって input[type=number] というセレクタが使え無いので、バージョン毎の対応が必要でした。
    
    さらに、IE で HTML5 による入力チェックが働くのは、IE10 以降なのですが、type="number" で 数字以外を入力すると、チェックされずに空文字列がサーバーに送られてしまいます。ですから、type="text" で pattern 属性で同様の対応をしています。
    
    また、逆にスピンボタンを必要としない場合は、Google Chrome と Firefox で非表示にする必要がありますが、その場合は CSS で、ブラウザ毎に対応します。
    
    Google Chrome : -webkit-appearance: none;
    Firefox : -moz-appearance: textfield;
    
    
    
    ▼ デモページの表示イメージ
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
    var userAgent = window.navigator.userAgent.toLowerCase();
    var appVersion = window.navigator.appVersion.toLowerCase();
    $(function(){
    
    	var target = null;
    
    	if ( userAgent.indexOf("msie") > -1 ) {
    		if (appVersion.indexOf("msie 10.0") > -1) {
    			target = $( "input[type=number].num_b" ).spinner()
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			target = $( "input[type=number].num_a" )
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			$("#title").text("今ブラウザは IE 10です");
    		}
    		else {
    			target = $( "#ie9" ).spinner()
    			$("#title").text("今ブラウザは IE 9 以前です");
    		}
    	}
    	else {
    		if ( userAgent.indexOf("trident/7.0") > -1 ) {
    			target = $( "input[type=number].num_b" ).spinner()
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    			target = $( "input[type=number].num_a" )
    			target.attr( "type", "text" );
    			target.attr( "pattern", "^[0-9]+$" );
    
    			$("#title").text("今ブラウザは IE 11です");
    		}
    		else if (userAgent.indexOf("firefox") > -1) {
    			$("#title").text("今ブラウザは Firefox です");
    		}
    		else if (userAgent.indexOf("opera") > -1) {
    			$("#title").text("今ブラウザは Opera です");
    		}
    		else if (userAgent.indexOf("chrome") > -1) {
    			$("#title").text("今ブラウザは Google Chrome です");
    		}
    		else if (userAgent.indexOf("safari") > -1) {
    			$("#title").text("今ブラウザは Safari です");
    		}
    		else {
    			$("#title").text("今ブラウザは 不明なブラウザ です");
    		}
    	}
    
    	if ( target != null ) {
    		target.css({"width":"300px" });
    	}
    
    });
    
    </script>
    
    <style type="text/css">
    input[type="number"].num_a::-webkit-outer-spin-button, 
    input[type="number"].num_a::-webkit-inner-spin-button {
    	-webkit-appearance: none;
    }
    
    input[type=number].num_a {
    	-moz-appearance: textfield;
    }
    
    * {
    	font-family: "メイリオ", Meiryo, "MS Pゴシック";
    	font-size: 16px;
    }
    
    </style>
    <h3 id="title" style='margin-bottom:-10px;'></h3>
    <form 
    	method="get" 
    	id="target_form" 
    	target="my_ferame" 
    	action="http://winofsql.jp/php_get.php" 
    	accept-charset="utf-8">
    <pre>
    <input 
    	type="submit" 
    	name="send" 
    	id="send_check" 
    	value="送信">
    ▼ type="number" でスピンボタンなし
    <input
    	class="num_a"
    	type="number" 
    	name="num[]">
    
    ▼ type="number" でスピンボタンあり
    <input 
    	class="num_b" 
    	type="number" 
    	id="ie9" name="num[]">
    </pre>
    </form>
    <iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
    
    
    関連する記事
    
    INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
    
    参考
    
    Styling new Chrome number input (spin box) - Stack Overflow
    
    ※ 参考ページでは、スピンボタンのカスタマイズについて書かれています(自前のスピンボタンの使用)
    
    
    
    posted by lightbox at 2014-11-20 16:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
    Seesaa の各ページの表示について
    Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。
    
    Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。
    
    また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。
    
    ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです
    
    対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。
    
    
    ※ エキスパートモードで表示しています
    
    アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
    
    
    <% if:page_name eq 'archive' -%>
    アーカイブページでのみ表示される内容
    <% /if %>
    
    <% if:page_name eq 'category' -%>
    カテゴリページでのみ表示される内容
    <% /if %>
    
    <% if:page_name eq 'tag' -%>
    タグページでのみ表示される内容
    <% /if %>
    
    この記述は、以下の場所で使用します
    container 終わり

    フリーフォントで簡単ロゴ作成
    フリーフォントでボタン素材作成
    フリーフォントで吹き出し画像作成
    フリーフォントではんこ画像作成
    ほぼ自由に利用できるフリーフォント
    フリーフォントの書体見本とサンプル
    画像を大きく見る為のウインドウを開くボタンの作成

    CSS ドロップシャドウの参考デモ
    BUTTONS (CSS でボタン)
    イラストAC
    ぱくたそ
    写真素材 足成
    フリーフォント一覧
    utf8 文字ツール
    右サイド 終わり
    base 終わり