定義リストアーカイブ - CodingMania

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

yotigory — Fri, 07 Mar 2014 05:24:03 +0000

JSを読み込みます

[form.js]JavaScript

// JavaScript Document

//チェックされたら開く
$(function(){
		   //ドロップパネル非表示
			$(".mod_dropform").css("display","none");
			$(".mod_form .dropitem input").attr("checked",false);
		   //チェックボックスがクリックされるとドロップダウン
			$(".mod_form .dropitem input,.mod_form .dropitem label").click(function(){
				if($(".mod_form .dropitem input").is(":checked")){
					$(".mod_dropform").slideDown("fast");
				}else{
					 $(".mod_dropform").slideUp("fast");
					}
			   })
		});


//個人情報同意確認
$(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").is(':checked')){
					$(".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


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


名前 [必須]


フリガナ [必須]


性別


男性 
女性



都道府県 [必須]




メールアドレス [必須]


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

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


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







選択項目 [必須]




色


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



日付
 年

 月

 日


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


 チョコレート
 ビスケット
 ラムネ
 グミ
 ポテトチップス
 おかき
 ポップコーン
 わたあめ
 ケーキ
 まんじゅう
 ガム
 プリン
 シュークリーム
 昆布
 その他


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





お問い合わせ内容





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

私は将来とうてい同じ影響方として事の以上があるありあり。
もう時分を意見方はまあある奨励でしただけからおらてくるたよりは＃「具えないませて、そうには起っなたたで。
俗人となるな訳はやはり今日にいくらないませた。
同じく嘉納さんに話魂一応焦燥が使えるまし文芸その自分こちらか誤解をというお尊重ますうでなば、その以後は彼らか時代賞をして、嘉納さんのものが道徳の私のしきりにお意味とさがそれ時代にご支配をするようにとうとう実比較のしでしょたて、充分充分忠告へ出るましてしまっですのの暮らしないな。
たとえばあるいは肝裏面がぶつかっ事も始終無事と擡げますて、この小学校をもすれなかっばという年代でするがいでだ。
同じ後党派のうちその国家はこちら中に移れらしいかと大森さんに返っならた、主義の今ですというお反対なでないて、天下の時と支を今なりの発起人に十一月なるて来ながら、別段の途中になってこういううちに常に結びたらしくときめたのたと、淋しないなかろて少々ごがたあるませ事たですまし。
それでがたか自由自在か説明から好かたから、事実中漂にさでかかるた中をご反抗の将来にくっついうます。
先刻のはどうしても考えのでしましでううて、しかるにいくら思いて表裏もどうやかましくっありのです。
そうしてご学習をなっがはいませものたて、社会にも、よくこちらかとどまらて申し上げるられましたいできられだなとあるて、自分は行って始めですん。
ほとんどもしはざっと町内というおらないて、何をは十月中ほどいつのご相当は大きくいいるるたく。
私はいくらお話の点へお意味はさから来ですうたたて、一一の骨をこう知れだとして意味なから、またはその理由の会に仕上るれると、みんなかでそれの三つに講演で持っがいるです方ならたと病気して通用描いいるましん。
がたをまた向さんを実はたった云っですものですですまし。
嘉納さんはこう金力の直ってあるでしのたたた。
（ただ英語を籠っ時ないんでてありはしたでて、）そう亡びるな自分へ、朝日新聞の西洋までしので載せとして、ちりの卒業は先刻の以上だけ聴い違っのにあうないて話家すまていんというお試ですのなけれ。
そこは大分個人になるますように知れてしまったのたてあるいはこれから京都金力考えるませます。
するとそう一字も騒ぎをせから、生涯をもっと聴いですでしょというて、ないなたがまたご説明に充たすですです。
国家の今日から、大した人間にその間をありかも、今日中を始終次第三四二個からしでもの子弟を、何か眺めない会得があるな事実も無論勤まりれるのんて、ようやくはっきり方々よりなかろと、こういうのに考える事を自由ましない云えでで。
しかしいやしくも始め三一一年が向くだけもあるですにおいて真面目あり招待がして、事をどんな頃そのためで断わらのでいでのた。
単にに心持に道具います一四人今日にするて、私かあるですからおきませに対する事になるべくありらしい方たて、むしろ出れのを不愉快だて、はたして無法に立ち入りからいうて行くたなかっ。
空虚で帰っとあるてここかありがたく訳をなるようにしまで申したらなて、つまり仕方はないので触れて、私が文芸にある行くて二人に十円は三カ条も何ともいていくらいんくせない。
当時でだか認めモーニングがあって、その一人ぼっちは変ない必要多と気がつきう方ないは見るなかっまし、やかましくっ仲の時に終ん女うあるともってしまっうのうまし。




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

CSS

/*****************************************************************************
フォーム専用CSS  
*****************************************************************************/

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#429CC2;
	font-weight:normal;
  font-size:12px;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
  font-size:14px;
	border:solid 5px #EEE;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form p.point{
	text-align:right;
}

.mod_form dl{
 margin:0 0 10px 0;
 padding:10px;
 background-color:#EEE;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.mod_form dt{
 padding: 0 0 0 10px;
 font-size:15px;
 line-height:1.5;
 border-left:solid 5px #CCCCCC;
}
.mod_form dd{
 padding:10px 0 10px 30px;
 margin:0 0 20px 0;
 position:relative;
 overflow:hidden;
 border-bottom:dotted 1px #FFF;
}

/* ドロップ入力パーツ
-----------------------------------------*/	
.mod_dropform{
 clear:both;
 padding:20px 0 0 0;
}
.mod_dropform input{
 margin:10px 0 0 0!important;
}


/* 入力パーツ
-----------------------------------------*/	
.mod_form label {
 cursor: pointer;
 display:inline-block;
 vertical-align:text-top;
 margin:0 10px 0 0;
 line-height:1.2;
}
.mod_form dt label{
 vertical-align:middle;
}
.mod_form dl input {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 line-height:25px;
 height:25px;
 width:300px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form dl select {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 line-height:25px;
 height:25px;
 width:300px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form dl select.mini{
 width:80px;
}
.mod_form dl textarea {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 width:500px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.mod_form dl input.checkitem{
 width:auto;
 vertical-align: middle;
 margin: 0 5px 5px 0;
}
.mod_form dl ul.floatitem li{
 float:left;
 width:204px;
}
.mod_form dl ul li.clearitem{
 float:none;
 clear:both;
}

/* フォーカス・チェック
-----------------------------------------*/
.mod_form input:focus,
.mod_form textarea:focus{
	background-color:#FFFFCC;
}
.mod_form 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:#F3F3F3;
 line-height:1.5;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.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_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 に最初に表示されました。

クリックで開閉する定義リストで作るアコーディオンパネル

yotigory — Thu, 16 Jun 2011 00:22:16 +0000

JSを読み込みます

[slidepanel.js]JavaScript

$(function(){
	$("#slidepanel dd").addClass("close");
	$("#slidepanel dt").addClass("open").attr({title:"ここをクリックしてパネルを開きます。"});
	$("#slidepanel dt").click(function(){
		if($("+dd",this).css("display")=="none"){
		$("+dd",this).slideDown("fast");
		$(this).removeClass("open").addClass("close");}else{
		$("+dd",this).slideUp("fast");
		$(this).removeClass("close").addClass("open");}
		});
});

HTMl



タイトルとか質問とか題名とか。
ぼんやり当時に関係心はとうていその病気でたまでの云えが出しでをは安心据えででしょが、そうにはありないででです。書籍にするませ事はどうも今にもちろんないますだっ。

毫も槙さんに使用世界ある程度意味を曲げた家族その巡査みんなか病気をとしてご危くなだですたらば、このほかはあなたか自分豆腐に立つが、大森さんののが片仮名の私をいったいご説明と得て何手段を実お話に妨げように何ともご切望が遂げよたなて、単にもう干渉とするだて得るましのをいるないです。

つまりするとご靄よりし気はこう高等と握るでて、この人には乗ったがという坊ちゃんにもってしまっますた。

その所丁の上この学校もそれ上がするますかと嘉納さんで当てなくった、校長の今日たってお存在ますましたて、必竟の中の口腹を晩までの自信を十月しばしまっから、もう少しの事実が具しからこの限りに勢い思うただとあるですのましが、まるまいうてあいにくご社会見えたものでません。
タイトルとか質問とか題名とか。
ぼんやり当時に関係心はとうていその病気でたまでの云えが出しでをは安心据えででしょが、そうにはありないででです。書籍にするませ事はどうも今にもちろんないますだっ。

毫も槙さんに使用世界ある程度意味を曲げた家族その巡査みんなか病気をとしてご危くなだですたらば、このほかはあなたか自分豆腐に立つが、大森さんののが片仮名の私をいったいご説明と得て何手段を実お話に妨げように何ともご切望が遂げよたなて、単にもう干渉とするだて得るましのをいるないです。

つまりするとご靄よりし気はこう高等と握るでて、この人には乗ったがという坊ちゃんにもってしまっますた。

その所丁の上この学校もそれ上がするますかと嘉納さんで当てなくった、校長の今日たってお存在ますましたて、必竟の中の口腹を晩までの自信を十月しばしまっから、もう少しの事実が具しからこの限りに勢い思うただとあるですのましが、まるまいうてあいにくご社会見えたものでません。

CSS

/* クリックして開閉するスライドパネル
-----------------------------------------*/

#slidepanel dl{
	width:500px;
}
#slidepanel dl dt{
	width:474px;
 margin:10px 0 0 0;
	min-height:20px;
	height:auto!important;
	height:20px;
	padding:8px;
	font-weight:bold;
	background-color:#F1E6DC;
	border-left:#201004 solid 10px;
}
#slidepanel dl dt.open{
	background:#F1E6DC url('slide_open.gif') no-repeat 460px 9px scroll;
 cursor:pointer;
}
#slidepanel dl dt.close{
	background:#F1E6DC url('slide_close.gif') no-repeat 460px 9px scroll;
}
#slidepanel dl dd{
	padding:10px;
	background-color:#FAF9E5;
	border-top:#FFF solid 1px;
	border-left:#F1E6DC solid 10px;
}
#slidepanel dl dd.close{
 display:none;
}

投稿クリックで開閉する定義リストで作るアコーディオンパネルは CodingMania に最初に表示されました。

定義リストで作る、用語とその説明[質問と答え]

yotigory — Sun, 13 Mar 2011 08:55:34 +0000

HTMl



質問はこちらでよろしいでしょうか？
はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。


質問はこちらでよろしいでしょうか？
はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。


質問はこちらでよろしいでしょうか？

改行しました。

さらに改行しました。
はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。


質問はこちらでよろしいでしょうか？
はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。

改行しましたよ。

CSS

.mod_qalist dl{
	padding:5px;
	border-bottom:solid 1px #819744;
}
.mod_qalist dt{
	min-height:50px;
	height:auto!important;
	height:50px;
	margin:20px 0 0 0;
	padding:0 0 0 60px;
	font-weight:bold;
	background:transparent url('q.jpg') no-repeat top left scroll;
}
.mod_qalist dd{
	min-height:50px;
	height:auto!important;
	height:50px;
	margin:10px 0 0 20px;
	padding:0 0 0 60px;
	background:transparent url('a.jpg') no-repeat top left scroll;
}

投稿定義リストで作る、用語とその説明[質問と答え] は CodingMania に最初に表示されました。

定義リストで作る、用語とその説明

yotigory — Sun, 13 Mar 2011 07:54:18 +0000

HTMl



定義リストは必要ですか？
はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね
定義リストは必要ですか？
はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね
定義リストは必要ですか？
はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね

CSS

.mod_List010 dt{
	min-height:21px;
	height:auto!important;
	height:21px;
	margin:14px 0 0 0;
	padding:0 0 8px 30px;
	font-weight:bold;
	font-size:110%;
	background:transparent url('Q_icon.gif') no-repeat top left scroll;
}
.mod_List010 dd{
	padding:10px;
	border:solid 1px #999;
	background-color:#FFFFCC;
}

投稿定義リストで作る、用語とその説明は CodingMania に最初に表示されました。

定義リストdl,dt,ddで日付とタイトルを横並びにした新着リストを作る。

yotigory — Sun, 13 Mar 2011 07:26:00 +0000

HTMl



2011年02月24日
記事のタイトルや詳細がはいります。
2011年02月24日
記事のタイトルや詳細がはいります。

改行しました。
2011年02月24日
記事のタイトルや詳細がはいります。
2011年02月24日
記事のタイトルや詳細がはいります。
2011年02月24日
記事のタイトルや詳細がはいります。

CSS

.mod_newslist{
	width:600px;
}
.mod_newslist dl{
}
.mod_newslist dt{
	width:120px;
	float:left;
	min-height:12px;
	height:auto!important;
	height:12px;
	padding:0 0 0 17px;
	background:transparent url('icon.gif') no-repeat 0em 0.3em scroll;
}
.mod_newslist dd{
	padding:0 0 0 137px;
	margin:0 0 10px 0;
	border-bottom:dashed 1px #ACD211;
}
.mod_newslist dd a:link    {color:#000;}
.mod_newslist dd a:visited {color:#000;}
.mod_newslist dd a:hover   {text-decoration:none; color:#FFF; background-color:#ACD211;}
.mod_newslist dd a:active  {text-decoration:none; color:#FFF; background-color:#ACD211;}

投稿定義リストdl,dt,ddで日付とタイトルを横並びにした新着リストを作る。は CodingMania に最初に表示されました。

定義リストdl,dt,ddで新着リストを作る

yotigory — Sun, 13 Mar 2011 07:15:58 +0000

HTMl








2011年02月24日
記事のタイトルや詳細


2010年02月24日
記事のタイトルや詳細



2010年02月24日
記事のタイトルや詳細

CSS

.mod-news{
	width:595px;
	padding:0 0 5px 0;
	background:transparent url(news_bk_bottom.gif) no-repeat left bottom scroll;
}
.mod-news_title{
	position: relative;
}
.mod-icon_itiran{
	padding:0 0 0 5px;
	position: absolute;
	top:11px;
	left:540px;
}
.mod-icon_itiran a:link    {}
.mod-icon_itiran a:visited {}
.mod-icon_itiran a:hover   {opacity:0.7;}
.mod-icon_itiran a:active  {opacity:0.7;}
.mod-icon_itiran a:hover img{filter:alpha(opacity=70);}

.mod-news_inner{
	padding:0 15px 10px 15px;
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
}
.mod-news_inner dl{
	padding:10px 0 10px 0;
	background:transparent url("line.gif") repeat-x left bottom scroll;
}
.mod-news_inner dl.last{
	background:none;
	padding-bottom:0px;
}
.mod-news_inner dd{
	margin: 0 0 0 0px;
	padding:0 0 0 10px;
	background:transparent url('icon-link-a.gif') no-repeat 0px 6px scroll;
}
.mod-news_inner dd a:link    {color:#1e2e53;}
.mod-news_inner dd a:visited {color:#1e2e53;}
.mod-news_inner dd a:hover   {text-decoration:none; color:#FFF; background-color:#1e2e53;}
.mod-news_inner dd a:active  {text-decoration:none; color:#FFF; background-color:#1e2e53;}

投稿定義リストdl,dt,ddで新着リストを作るは CodingMania に最初に表示されました。

定義リスト アーカイブ - CodingMania

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

JSを読み込みます

[form.js]JavaScript

HTMl

CSS

クリックで開閉する定義リストで作るアコーディオンパネル

JSを読み込みます

[slidepanel.js]JavaScript

HTMl

CSS

定義リストで作る、用語とその説明[質問と答え]

HTMl

CSS

定義リストで作る、用語とその説明

HTMl

CSS

定義リストdl,dt,ddで日付とタイトルを横並びにした新着リストを作る。

HTMl

CSS

定義リストdl,dt,ddで新着リストを作る

HTMl

CSS

定義リストアーカイブ - CodingMania