サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
javascript123.seesaa.net
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 テキストボックスの値が数字か,数字以外の文字か判別。 年齢： 歳 (半角数値) 正規表現 Val.match( /[^0-9]/ )を利用して数値かどうか調べています。 heteml 【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！ ロリポップ！のドメインは選べる全８５種類！！ ☆さくらのレンタルサーバ ビジネスプロ☆ サンプルソース <html> <head> <title>正規表現 .match( /[^0-9]/ )、入力チェック 数字かどうか。JavaScript</title> <style type="text/css"> <!-- #frm { width:350px; padding:10px; border
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 見出し行固定、スクロールテーブルを css のみで実現 個々の列幅を自由に設定可能 テーブルの行数（データ）が多くなった場合、 ブラウザのスクロールバーでスクロールしていくと、見出し（ヘッダ）が見えなくなってしまいます。 これを回避するため、ヘッダを固定し、データ部分のみを スクロールさせる方法をCSSだけで行っています。 heteml 【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！ ロリポップ！のドメインは選べる全８５種類！！ ☆さくらのレンタルサーバ ビジネスプロ☆ サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/T
あの日は何曜日？？ new Date() Dateオブジェクト,getDay() メソッド 貴方は自分の誕生日や結婚記念日の曜日を知っていますか？ 知らない方が結構多いのではないのでしょうか.......さあ、調べてみましょう。 heteml 【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！ ロリポップ！のドメインは選べる全８５種類！！ ☆さくらのレンタルサーバ ビジネスプロ☆ サンプルソース <html> <head> <title>あの日は何曜日？？</title> <script language="JavaScript"> <!-- function getYobi(){ myY=document.getElementById("hogeY").value; //入力した年の値 取得 myM=document.getElementById("hogeM").val
サンプルソース <html> <head> <title>テーブルの行とセルをCSSだけでハイライト</title> <style type="text/css"> <!--/*cssだけで作るストライプテーブル*/ table.tbl0 tr th { /* 見出し thタグ */ color: white; /* 文字色 */ background-color: blue; /* 背景色 */ } table.tbl0 tr:hover { /* trタグ 行にマウスが乗った時*/ color: #19197c; /* 文字色 */ background-color: #e5ecff; /* 背景色 */ } table.tbl0 tr td:hover { /* tdタグ セルにマウスが乗った時*/ color: #19197c; /* 文字色 */ background-color
サンプルソース <html> <head> <title>テーブル クリックしたセルの行位置,列位置,内容の取得</title> <style type="text/css"> <!-- #TBL{ border-collapse: collapse; } #TBL th,td{ width : 170px; cursor: hand; padding:5px; } #Div{ border: 1px ridge fuchsia; width : 380px; padding : 10px; } --> </style> <script language="javascript"> function getCELL() { var myTbl = document.getElementById('TBL'); // trをループ。rowsコレクションで,行位置取得。 for (var i=
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 textarea 制限文字数を超えたら警告を表示し オーバーした文字列を削除します。 制限文字数１５文字 9文字 無料どころか、稼げるブログ。Seesaa 無料レンタルカウンター「デジデジ」 サンプルソース <html> <head> <title>テキストエリアの文字数制限</title> <script language="JavaScript"> <!-- var max=15; //制限文字数 function Limit(event){ Tarea= document.getElementById("Tobj1"); Mcnt= document.getElementById("msg1"); mojiVal= Tarea.value
サンプルソース <html> <head> <title>マウスが乗るとへこむアンカーテキスト、ボタン</title> <style type="text/css"> <!--/*cssだけで作るへこむテキスト、ボタン*/ .push0 a:hover{ position: relative; /* 相対位置への配置 */ top: 1px; left: 1px; text-decoration: none; /* 下線なし */ } .push1 a{ display: block; /* ブロック要素にする */ width: 170px; /* 横幅 */ color: #000000; /* 文字色 */ background-color: #e0ffff; /* 背景色 */ border: outset 2px #7cfc00; /* ボーダー */ margin-botto
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 textarea要素 element.scrollHeightプロパティでテキストエリアの高さを自動変更。 * 自動折り返し、Enterキー,改行で高さが自在に変わります。 ウェブ検索するだけで楽天スーパーポイントがもらえる ホームページが無料で作れます サンプルソース <html> <head> <title>テキストエリアの高さをリサイズ</title> <script type="text/javascript"> <!-- function resize(Tarea){ var areaH = Tarea.style.height; if(Tarea.value == ""){areaH=26+"px";} areaH = parseI
<html> <head> <title>インラインフレームに表示するページを切り替えます。</title> </head> <body> <p> <a href="表示するページのURL1" target="FRM">テーブルz-index</a><br> <a href="表示するページのURL2" target="FRM">テキストボックス</a><br> <a href="表示するページのURL3" target="FRM">経過時間</a><br/> <a href="表示するページのURL4" target="FRM">キラキラ星</a><br/> </p> <iframe src="表示するページのURL" width="300" height="250" name="FRM" scrolling="auto" frameborder="1"> </iframe> </bod
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 サンプルソース <html> <head> <title>要素の生成、削除</title> <script language="JavaScript"> <!-- //javascript123 window.onload = function() { //formの生成 var Frm = document.getElementById("Myfrm"); //要素を表示する場所（親要素） var Form = document.createElement("form"); //新規にform要素を生成 Frm.appendChild(Form); //Frmの子要素としてFormを追加 //input要素 checkbox生成 var Ch
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 replace メソッド 文字列置換。 String.replace(); 文字列.replace(検索文字列,置換文字列); テキスト置換 文字列を指定して、置換したい文字列を検索（検索文字列）して 置換文字列に置き換えます。検索文字列にマッチしなかった時は、 元の文字列をそのまま返します。 最初のマッチした文字列のみ置換します。 var str="奈良時代 奈良観光"; str= str.replace("奈良","xxx"); 正規表現による置換 ・検索文字列を /....../で囲みます。 最初のマッチした文字列のみ置換します。 var str="奈良時代 奈良観光"; str= str.replace(/奈良/,"xxx"); ・一致
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 サンプルソース <HTML> <HEAD> <TITLE>ドラッグして画像を移動する。複数画像 Mozilla Firefox対応</TITLE> <SCRIPT language="JavaScript"> <!-- var flag = false; var z_flag = false; var dx,dy,X,Y,IDname,index_value; window.document.onmousemove = move_Ly; //マウスが移動した時のイベントハンドラ move_Lyを実行 window.document.onmouseup = move_off; //マウスのボタンを離したとき move_off()を実行 //マウス
テーブル行 ハイライト 5GBで月額250円～！FC2レンタルサーバーLite！ サンプルソース <form name="frm1"> <textarea cols="60" rows="8" name="Tarea"> ここに書いた文字列が初期値として表示されます。 </textarea> </form> 無効化,読み出し専用に設定する場合はdisabled="disabled" readonly="readonly"をtextarea内に入れてください。 cols,rowsで入力枠の大きさを指定しますが入力行数・列数を 制限しているわけではありません。入力フィールドの大きさは スタイルシートでも設定できます。スタイルシートの値が 優先されます。 textarea要素にスタイルシートを適応 エリアの大きさ rows="5" cols="20"を指定 スタイルシート width
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 textarea要素 テキストエリアの行数を数える。 * フォーカスが外れた時 ,行数が、アラート表示されます。 自動折り返しはカウントされません。 Enterキーで改行がカウントされます。 無料レンタルカウンター「デジデジ」 サンプルソース <html> <head> <title>テキストエリアの行数を数える</title> <script type="text/javascript"> <!-- function chk(){ tval = document.getElementById("rtxt").value;//入力された文字列 num = tval.match(/\r\n/g); //IE 用 num = tval.match(
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 <BODY onload=" ＊＊＊()">を書かずに IMG タグの中に onload=" ＊＊＊()"を入れました。 なのでブログにも簡単に設置できます。 サンプルソース <HTML> <HEAD> <TITLE>ページを開いたときに画像がフェードインします。IE6,Mozilla Firefox</TITLE> </HEAD> <BODY> <script type="text/javascript"> <!-- opa=0; //透明度 0は透明 opacnt=2; //透明度の増減の間隔 timer=100; //setTimeout関数の実行間隔 ミリ秒 // フェードイン function FadeInstr() { gazouI
サンプルソース <html> <head> <title>マウスダウンで指定した要素の表示/非表示を切り替えます。</title> </head> <body> <div> <a href="#" onmousedown="if(document.getElementById('toggle').style.display == 'block') {document.getElementById('toggle').style.display = 'none';} else{document.getElementById('toggle').style.display = 'block';}"> トグルスイッチ 表示/非表示</a> </div> <div id="toggle" style="display:block"> <h3><img src="画像のURL" border="0"
上の画像やリンク文字を選択してください。 周囲が点線で囲まれます。フォーカス(forcus)を他に移すと消えます。 リンクの選択が良く判っていいのですが 場合によってはデザイン的に目障りな場合があります。 この点線枠（アウトライン）を最初から現れないようにする方法は 点線枠を消したい a 要素に onFocus="this.blur()"を追加します。 style="outline:none;"はFirefoxでは動作します。 Firefoxはイメージマップのリンクではアウトラインは出ません。 <a href="リンク先URL">サンプル集</a> <a href="リンク先URL;" onFocus="this.blur()">サンプル集</a> 下の画像、リンクをクリックしても点線枠は表示されません。 JavaScript スタイルシートサンプル集 onFocus="this.blur
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 角丸吹き出し ポップアップ CSSサンプル 吹き出しを ここにマウスを乗せるとCSSだけで吹き出しを 実現！！ 画像は使っていません。表示します。 ボックスの四隅を丸くするプロパティにCSS3のborder-radiusがあります。 border-radiusプロパティに対応しているブラウザは Safari Google Chrome 「-webkit-border-radius」 Firefox 「-moz-border-radius」 で独自実装しています。 残念ながら IEはIE８になってもまだ未対応です。 なので当サンプルを「IE」でご覧の方は吹き出しの四隅は四角いままです。 ロリポップ！なら初心者でも安心！ ホームページ簡単作成 「ホ
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 文字が白から黒へフェードインします サイトやブログをJavaScriptを 使って動きのあるページに、 スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 サンプルソース <html> <head> <title>文字がフェードイン,フェードアウトします</title> <script language="JavaScript"> <!-- var flag="in"; var i=254; function fade(){ (flag=="out") ?i++ : i-- ; //トグルスイッチ、条件演算子 if(i==255){ //フェードイン document.getElementById("botan
通常サイズのマスクでは、お子様には隙間ができてしまい ウイルスを効果的に遮断できません。 このマスクは、プリーツ構造で自由に伸び縮みするプリーツ構造で快適な着け心地を実現しています。1日中着けていても、息苦しくなったり耳が痛くなったりしづらい作りになっています。 普通のマスクよりも小さめに設計された 幼児・子供用のマスクなので、顔が小さい方でもジャストフィット。 幼児や学校に通うお子様にぴったりです。 ■新型インフルエンザ新型インフルエンザとは？ 動物のインフルエンザウイルスが変化して人に感染したものが『新型インフルエンザ』です。容易に人から人へ感染して広がり、急速な世界的大流行（パンデミック）を起こす危険性があります。対策の3層型高性能マスク 外側と内側には不織布、 真ん中にBFE95規格フィルターを採用した3層構造でウイルスを防ぎます。 2層目にはBFE95素材が使われているため、 新
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 DOM（Document Object Model）とは JavaScriptのようなプログラミング言語から， HTML/XML文書にアクセスして それを操作する方法を提供しています。 DOMでは、HTML/XML文書のすべての要素はノードと呼ばれるオブジェクトから構成されています。 このノードはいくつかありますが 要素ノード (element node)、テキストノード (text node)、属性ノード (attribute node)の ３ツのノードが基本です。 DOMとjavaScriptの関連についてはThe DOM and JavaScript を参考にしてください。 ロリポップ！なら初心者でも安心！ ホームページ簡単作成 「ホムペ
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 少数点 以下 Χ桁を四捨五入する Javascript 数値： 演算結果： ★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★ 月額２６３円で容量１ＧＢ Movable TypeやWordpressだって使えるよ。 サンプルソース <html> <head> <title>少数点 以下Ｘ桁を四捨五入します。</title> <script language="JavaScript"> <!-- function calc() { keta=100; var n =document.getElementById('in').value; n = n * keta; // 小数点以下2桁を整数部分にする n = Math.ro
cursorプロパティは、マウスカーソル（ポインタ）の形状を指定する時に使用します。 表示されるマウスカーソルの形状は OSやブラウザなど観る人の環境によって異なります。 各項目にマウスを乗せてください。 マウスカーソルの形が変わります。 default 通常のカーソル wait 待ち状態（砂時計） crosshair 十字 text テキスト編集 pointer ポインタ（指） help ヘルプ(？) move 移動 e-resize サイズ変更 右端 w-resize サイズ変更 左端 n-resize サイズ変更 上端 s-resize サイズ変更 下端 ne-resize サイズ変更 右上隅 se-resize サイズ変更 右下隅 nw-resize サイズ変更 左上隅 sw-resize サイズ変更 左下隅 auto
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 テーブル(表)表示／非表示を切り替える オンマウスでテーブル(表)を表示します。 display='block' display='none' 価格表 サンプルソース <html> <head> <title>テーブル表示／非表示</title> </head> <body> <a href="#" onmouseover="document.getElementById('tbl').style.display='block'" onmouseout="document.getElementById('tbl').style.display='none'">価格表</A> <table id="tbl" style="display:non
サンプルソース <html> <head> <title></title> <style type="text/css"> <!-- #adbox { /*広告本体*/ border: 2px solid #adff2f; width : 470px; } .ad { /*バナーのボックス*/ display: none; width : 470px; } --> </style> <script type="text/javascript"> <!-- num =0; //バナーのボックスの IDを配列に格納 var ADarray = new Array("ad00","ad01","ad02"); var flag ="ad000";//識別のための標識 //ページを読み込んだ時に実行 window.onload = Bannerinit; function Bannerinit()
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 セレクトメニュー 選択リストの一覧が下に展開して表示されます。ドロップダウンメニュー、プルダウンメニュー、オプションメニューとか呼ばれています。 リストを選択してください。 サンプルソース <HTML> <HEAD> <TITLE>プルダウンメニューの設置 値の取得</TITLE> <SCRIPT language="JavaScript"> <!-- function Selc(Obj){ index_nub = Obj.selectedIndex; //選択された項目番号を取得する msg="項目番号は " +"<SPAN style='color : red;'>"+index_nub+"</SPAN><br>"; O_value=Obj
サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか？ コピーしてご自由にご利用ください。 Mozilla Firefoxでも 動作するように創り替えてみました。Mozilla Firefox対応版 サンプル実行 サンプルソース <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> <!-- opa=0; //透明度 ０は透明 opacnt=5; //透明度の増減の間隔 timer=100; // フェードイン function FadeInstr() { gazouId = "gazou1"; MyIMG = document.getElementById(gazouId); MyIMG.style.visibility = "visible"; FadeIn1
サンプルソース <HTML> <HEAD> <TITLE>チェックが入るとチェックボックスとラベル(文字)の背景色が変わります</TITLE> <STYLE type="text/css"> <!-- a,label{cursor:pointer;} label:hover { color : red; } .Mychk1{ width:140px; margin:5px 2px 2px 0px; font:12px; } --> </STYLE> <SCRIPT language=JavaScript> <!-- function chebg(chkID){ Myid=document.getElementById(chkID); if(Myid.checked == true){ Myid.parentNode.style.backgroundColor = '#C6E5FF'; }
次のページ
このページを最初にブックマークしてみませんか？
『JavaScript スタイルシートサンプル集』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
