html5 アーカイブ - CodingMania

html5media.jsを使ってmp4形式の動画を埋め込みます

yotigory — Thu, 11 Sep 2014 02:21:24 +0000

JSを読み込みます

HTMl

投稿 html5media.jsを使ってmp4形式の動画を埋め込みますは CodingMania に最初に表示されました。

検索窓をカスタマイズする。

yotigory — Sun, 01 Jul 2012 04:47:43 +0000

JSを読み込みます

[placeholder.js]JavaScript

$(function(){
 $('input#search')
  .focus(function() { $(this).css({
	background:"none"
		}
		) })
  .blur(function() { if ($(this)[0].value == '') { 
	$(this).css({
	 background:"transparent url('img/bg_searchinner.gif') no-repeat 8px 5px"
		}
		) } });
});

HTMl

CSS

/* 
-----------------------------------------*/
/* input[type="search"]reset｜Safari Chrome Mac */
input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}
input[type="search"]:focus {
	outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
.mod_search p{
	height:31px;
	background:transparent url('img/bg_search.jpg') no-repeat left top;
}
.mod_search form{
	width:270px;
	height:30px;
}
.mod_search input#search{
	width:192px;
	height:31px;
	line-height:30px;
	float:left;
	border:none;
	padding:0 0 0 5px;
	background:transparent url('img/bg_searchinner.gif') no-repeat 8px 5px;
}

.mod_search input#search_btn{
	width:40px;
	height:31px;
	float:left;
}
.mod_search input#search:focus{
	outline:none;　/* Safari Chrome Mac */
}

投稿検索窓をカスタマイズする。は CodingMania に最初に表示されました。

html5 入力フォームのテンプレート！[表型]

yotigory — Fri, 12 Aug 2011 06:14:45 +0000

JSを読み込みます

[formcheck.js]JavaScript

$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").attr('checked')==true){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
					}
			   })
		});

HTMl


[必須]項目は必ずご入力ください。




お問い合わせ項目 [必須]



名前 [必須]




フリガナ [必須]



性別


男性 
女性





メールアドレス [必須]


例：info@gmai.com


メールアドレス確認 [必須]


確認のため再度ご記入ください



郵便番号


例：571-0212


都道府県 [必須]



市区町村・番地


例：神戸市北区花山南町5-2


マンション・アパート名


例：メゾン南000号


電話番号 [必須]


例：0728122800


品番


その他の品番は下記へご記入ください。





日付

 年

 月

 日




色


その他を選択された方はご記入ください。






好きなお菓子はなんですか？



 チョコレート

 ビスケット

 ラムネ

 グミ

 ポテトチップス

 おかき

 ポップコーン

 わたあめ


 ケーキ

 まんじゅう

 ガム

 プリン

 シュークリーム

 昆布

 その他





お問い合わせ内容






「個人情報保護方針」と「当社における個人情報の取扱について」
上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。


会社名および個人情報保護管理者
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の利用目的

・箇条書き

・箇条書き
・箇条書き


個人情報の提供
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の取扱いの委託について
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報を入力するにあたっての注意事項 


（1）文章が入ります。
（1）文章が入ります。
（1）文章が入ります。


本人が容易に認識できない方法による個人情報の取得
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

開示対象個人情報の開示等および問合せ窓口について 
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。







 個人情報保護方針に同意する

お問い合わせ項目 [必須]
名前 [必須]
フリガナ [必須]
性別	男性女性
メールアドレス [必須]	例：info@gmai.com
メールアドレス確認 [必須]	確認のため再度ご記入ください
郵便番号	例：571-0212
都道府県 [必須]
市区町村・番地	例：神戸市北区花山南町5-2
マンション・アパート名	例：メゾン南000号
電話番号 [必須]	例：0728122800
品番	その他の品番は下記へご記入ください。
日付	年月日
色	その他を選択された方はご記入ください。
好きなお菓子はなんですか？	チョコレートビスケットラムネグミポテトチップスおかきポップコーンわたあめケーキまんじゅうガムプリンシュークリーム昆布その他
お問い合わせ内容

CSS

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#CC0000;
	font-weight:normal;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
	border:solid 5px #EEE;
}
.mod_form p.point{
	text-align:right;
}
.mod_form table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.mod_form table tr th{
	padding:10px;
	white-space: nowrap;
	font-weight:bold;
	vertical-align: top;
	border-bottom:solid 1px #C1D0E3;
	background-color:#EBF0F6;
}
.mod_form table tr td{
	width:70%;
	padding:10px;
	border-bottom:solid 1px #B6D1F5;
}

/* フォーム内2段組
-----------------------------------------*/
.mod_form_listbox{
	width:100%;
}
.mod_form_listbox_left{
	float:left;
	width:50%;
}
.mod_form_listbox_right{
	float:left;
	width:50%;
}

/* 入力パーツ
-----------------------------------------*/	
label {
  cursor: pointer;
}
select#item,
select#address01,
select#maker,
select#color{
	width:250px;
}
select#nengou,
select#year,
select#month,
select#day{
	width:60px;
}
input,
textarea{
	border:solid 1px #CCCCCC;
}
input#character_m,
input#character_w,
.mod_form_listbox input{
	border:none;
}

input#address02,
input#bill{
	width:350px;
	height:1.4em;
}
input#name,
input#kana,
input#email,
input#emailcheck,
input#maker_etc,
input#color_etc{
	width:250px;
	height:1.4em;
}
input#zipcode,
input#tel{
	width:150px;
	height:1.4em;
}
textarea{
	width:350px;
}
/* フォーカス・チェック
-----------------------------------------*/
input:focus,
textarea:focus{
	background-color:#FFFFCC;
}
input:checked + label{
	background-color:#FFFFCC;
	font-weight:bold;
}

/* 重要なお知らせの同意
-----------------------------------------*/
.mod_form_importance{
	margin:20px 0 0 0;
	padding:10px;
	border:double 3px #CCC;
	background-color:#DDD;
}
.mod_form_importance h2{
	font-weight:bold;
}
.mod_form_importance_txt{
	width:634px;
	height:250px;
	overflow:scroll;
	margin:10px 0 20px 0;
	padding:10px 20px 15px 20px;
	background-color:#FFF;
}
.mod_form_importance_txt h3{
	margin:10px 0 5px 0;
	font-weight:bold;
	border-bottom:solid 1px #DDD;
}
.mod_form_importance_btn{
	text-align:center;
}

/* 送信ボタンとエラー表示
-----------------------------------------*/
.mod_form_btn{
	margin:20px 0 0 0;
	text-align:center;
}

.mod_form_btn input#back,
.mod_form_btn input#submit{
	width:150px;
	padding:5px;
}


/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

投稿 html5 入力フォームのテンプレート！[表型] は CodingMania に最初に表示されました。

「video.js」を使った動画ページ

yotigory — Sun, 05 Jun 2011 06:55:51 +0000

JSを読み込みます

HTMl

投稿「video.js」を使った動画ページは CodingMania に最初に表示されました。

html5のvideo要素だけを使って動画を再生する

yotigory — Sat, 04 Jun 2011 15:46:43 +0000

HTMl

ご利用のブラウザーでは再生できません。コチラからダウンロードしてください。

投稿 html5のvideo要素だけを使って動画を再生するは CodingMania に最初に表示されました。