リストアーカイブ - CodingMania

フォームにある現在地を示すステップナビゲーション

yotigory — Mon, 05 Mar 2018 04:47:07 +0000

HTMl


  
    １．製品情報入力
    ２．問合せ情報入力
    ３．お客様情報入力
    ４．確認
    ５．送信完了

CSS

/* Stepnav
-----------------------------------------*/

.Stepnav ol {
  margin-top: 40px;
  display: table;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.Stepnav ol li {
  position: relative;
  display: table-cell;
  box-sizing: border-box;
  padding-left: 25px;
  text-align: center;
  vertical-align: middle;
  color: #2196f3;
  font-size: 14px;
  background-color: #f9f9f9;
  font-weight: bold;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}

.Stepnav ol li:first-child {
  padding-left: 0;
}

@media screen and (max-width: 960px) {
  .Stepnav ol li {
    font-size: 12px;
  }
}

.Stepnav ol li.current {
  background-color: #2196f3;
  color: #FFF;
}

@media screen and (max-width: 960px) {
  .Stepnav ol li span {
    display: none;
  }
}

.Stepnav ol li:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -25px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #cccccc;
  z-index: 99;
}

.Stepnav ol li:nth-child(5):before {
  display: none;
}

.Stepnav ol li:after {
  content: "";
  position: absolute;
  top: -1px;
  right: -24px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #f9f9f9;
  z-index: 99;
}

.Stepnav ol li:last-child:after {
  display: none;
}



.Stepnav ol li.current {
  border-top: solid 1px #2196f3;
  border-bottom: solid 1px #2196f3;
}

.Stepnav ol li.current:after {
  border-left: 24px solid #2196f3;
}

投稿フォームにある現在地を示すステップナビゲーションは CodingMania に最初に表示されました。

jQueryで簡単にページ送りを自動で表示します。

yotigory — Wed, 04 Jun 2014 06:08:45 +0000

JSを読み込みます

[pagenav.js]JavaScript

$(function(){
	
// pagenav current
$(function(){
 var id = $(".mod_pagenav").attr("id");
 var current = $(".mod_pagenav ul li."+id);

 //var prev =$();
 $(current).addClass("active");

  if($(current.next("li")).size()){
   var nextlist = current.next("li");
   var nextlink = nextlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav li.linearNum").before('次のページへ>>');
  }

  if($(current.prev("li")).size()){
   var prevlist = current.prev("li");
   var prevlink = prevlist.find("a").attr("href");
   $(".mod_pagenav ul.linearNav").prepend('<<前のページへ');  
  }

 });

});

HTMl

var pagenav =''+
''+
''+
'1'+
'2'+
'3'+
'4'+
'5'+
'6'+
'7'+
''+
''
'';
document.write(pagenav);

▼HTMLソース

CSS

/* mod_pagenav */
.mod_pagenav{
 margin:0 auto;
 width:960px;
 margin:20px 0 20px 0!important;
}
.mod_pagenav ul{
 position:relative;
 text-align:center;
}

.mod_pagenav ul li.linearNum ul li{
	display:inline-block;
	border:1px solid #e5e5e5;
	margin:0 5px 0 5px;
}
.mod_pagenav ul li.linearNum ul li.active,
.mod_pagenav ul li.linearNum ul li a:focus{
	background-color:#f2f2f2;
	font-weight:bold;
}
.mod_pagenav ul li a{
	text-align:center;
	display:block;
  width:25px;
  padding:2px 0 3px 0;
  text-decoration:none!important;
}

.mod_pagenav ul li.linearPrev a,
.mod_pagenav ul li.linearNext a{
 width:auto;
}
.mod_pagenav ul li.linearPrev{
 position:absolute;
 top:0;
 left:0px;
 z-index:9999;
}
.mod_pagenav ul li.linearNext{
 position:absolute;
 top:0;
 right:0px;
 z-index:9999;
}

投稿 jQueryで簡単にページ送りを自動で表示します。は CodingMania に最初に表示されました。

jqueryでxmlを読み込んでコンテンツを表示します。

yotigory — Wed, 04 Jun 2014 05:07:30 +0000

JSを読み込みます

[xmldata.js]JavaScript

$(function(){
	
function fresh(){
	var dlbody = $("#news");
	$.ajax({
    type: 'GET',
		url: 'list.xml',
		dataType: 'xml',
		success: function(xml){
			var newslist = $(xml);
			newslist.find('item').each(function(i){
        i = i + 1;
        if(i == 6) {
            return false;
        }
				var newsitem = $(this);
				var newsitem_title = newsitem.find('title').text();
				var newsitem_date = newsitem.find('date').text();
				var newsitem_link = newsitem.find('link').text();
				var dt = $('').text(newsitem_date);
				//var ddlink = $('').text(newsitem_link);
				var dd = '
'+newsitem_title+'';

				dlbody.append(dt);
				dlbody.append(dd);
			});
		}
	});
}

fresh();

});

HTMl

CSS

/* mod_news
-----------------------------------------*/
.mod_news{
  margin:50px 0 0 0;
}
.mod_news dl{
  position:relative;
  overflow:hidden;
}
.mod_news dt{
 float:left;
 width:130px;
 padding:15px 0 0 0;
}
.mod_news dd{
 border-bottom:dotted 1px #CCCCCC;
 padding:15px 0 10px 130px;
 line-height:1.3;
}

投稿 jqueryでxmlを読み込んでコンテンツを表示します。は CodingMania に最初に表示されました。

サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。

yotigory — Tue, 06 May 2014 15:13:39 +0000

JSを読み込みます

[swapimage.js]JavaScript

$(function(){
 $(".mod_thumbnail").each(function(){
  var set = $(this);
  var btn = set.find(".thumbnaillist li img");
  var image = set.find(".mainimglist img");
	// hover時
	$(btn).hover(function(){
    var imagesrc=$(this).attr("class");
		$(image).attr("src","img/"+imagesrc+".jpg").fadeIn();
		$(image).attr("alt",$(this).attr("title"));
	});
});
});

HTMl

CSS

/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
	margin:10px 0 0 0;
}
.thumbnaillist ul{
}
.thumbnaillist li{
	width:60px;
	height:auto;
	float:left;
	background:none;
	padding:0 10px 0px 0;
	margin:0 0 10px 0;
}
.thumbnaillist li img{
	width:60px;
	height:auto;
}
.thumbnaillist li a{
	display:block;
}
.thumbnaillist li a:link    {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover   {opacity:0.8;}
.thumbnaillist li a:active  {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}


/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
	width:700px;
	height:350px;
	margin:0 0 0 0;
}
.mainimglist img{
}

/* 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;
  /**/
}

投稿サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。は CodingMania に最初に表示されました。

CSSでリストの間にだけ線を引く。

yotigory — Fri, 27 Jul 2012 05:02:41 +0000

HTMl

【縦バージョン】

【横バージョン】

CSS

/* mod_style01
-----------------------------------------*/
.mod_style01{
  width:300px; 
}
 
.mod_style01 ul{  
zoom: 1;  
overflow: hidden;  
}  
.mod_style01 ul li{  
margin-top: -1px;  
padding: 5px;  
border-top: 1px solid #666666;  
}  

/* mod_style02
-----------------------------------------*/
.mod_style02 ul {
  /*float: right;*/
  zoom: 1;
  overflow: hidden;
}
.mod_style02 ul li {
  display: inline;
  margin: 0 0 0 -1px;
  padding: 0 6px 0 6px;
  border-left: solid 1px #666;
}

投稿 CSSでリストの間にだけ線を引く。は CodingMania に最初に表示されました。

CSSのtext-indentを使って字下げします

yotigory — Sun, 25 Mar 2012 11:46:35 +0000

HTMl


※文章が続きます。
※文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 
改行しました。
※文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。 文章が続きます。

CSS

.ex_listindent1 li{
	text-indent:-1em;
	padding:0 0 0 1em;
}

投稿 CSSのtext-indentを使って字下げしますは CodingMania に最初に表示されました。

クリックするとクラス名を変更、書き換えします。

yotigory — Thu, 19 Jan 2012 13:46:14 +0000

JSを読み込みます

[check.js]JavaScript

//チェック
$(function(){
	$(".mod_checklist ul li").click(function(){
		if($(this).attr("class")=="check"){
		$(this).removeClass("check").addClass("checked");}else{
		$(this).removeClass("checked").addClass("check");}
		});
});

HTMl



睡眠時間は8時間とった
タバコをすう
毎日お酒を飲む
朝ごはんを食べてきた
ストレスを感じる
仕事がすき♪

CSS

/* ．mod_checklist 
-----------------------------------------*/
.mod_checklist ul li{
	width:200px;
		/* リストマーカー画像切れ防止。最低高さを確保 */
	min-height:20px;
	height:auto!important;
	height:20px;
	padding:0 0 0 25px;
	margin:5px 0 0 0;
	cursor:pointer;
}
.mod_checklist ul li.check{
	background:transparent url('img/maru.gif') no-repeat left 0.1em scroll;
}
.mod_checklist ul li.checked{
	background:transparent url('img/batu.gif') no-repeat left 0.1em scroll;
}

投稿クリックするとクラス名を変更、書き換えします。は CodingMania に最初に表示されました。

ページを横渡りできるページ繰り

yotigory — Tue, 28 Jun 2011 11:41:07 +0000

HTMl



« 前のページ
1
2
3
4
5
6
7
次ページへ »

CSS

.mod_pagelist ol{
	width:500px; /* 横幅設定 */
	position:relative;
	text-align:center;
	background-color:#EEF; /* 背景色 */
}
.mod_pagelist ol li{
	padding:0;
	margin:0 1px 0 1px;
	display:inline;
	
}
.mod_pagelist ol li span,
.mod_pagelist ol li a{
	display:inline-block;
	padding:3px 8px 3px 8px;
	border: 1px solid #ccc;
	background-color:#FFF;
}
.mod_pagelist ol li.prev{
	padding:0;
	position:absolute;
	top:0;
	left:0;
}
.mod_pagelist ol li.next{
	padding:0;
	position:absolute;
	top:0;
	right:0;
}

.mod_pagelist ol li a:link    {color:#000;}
.mod_pagelist ol li a:visited {color:#000;}
.mod_pagelist ol li a:hover   {color:#000; text-decoration:none; background-color:#EEE;}
.mod_pagelist ol li a:active  {color:#000; text-decoration:none; background-color:#EEE;}

投稿ページを横渡りできるページ繰りは 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 に最初に表示されました。

箇条書きリストを入れ子にしてCSSで階層を表示

yotigory — Sun, 29 May 2011 04:15:22 +0000

HTMl

 
 
1階層の文章が入ります。
  2階層の文章が入ります。 
  2階層の文章が入ります。 
  2階層の文章が入ります。 
  2階層の文章が入ります。
    3階層の文章が入ります。 
    3階層の文章が入ります。 
    3階層の文章が入ります。 
    3階層の文章が入ります。
      4階層の文章が入ります。 
      4階層の文章が入ります。 
      4階層の文章が入ります。 
      4階層の文章が入ります。
        5階層の文章が入ります。
          6階層の文章が入ります。
            
 
        
 
      
 
    
 
  
 
 
1階層の文章が入ります。

CSS

.mod_List0002 ul li{
	/* リストマーカー画像切れ防止。最低高さを確保 */
	min-height:12px;
	height:auto!important;
	height:12px;
	line-height:1;
	margin:0;
	padding:5px 0 0 15px;
	background:transparent url('img/marker.gif') no-repeat left 0.5em scroll;
}
/* 2階層以降 */
.mod_List0002 ul li ul li{
	background:transparent url('img/marker_middle.gif') no-repeat left -0.2em scroll;
	margin-left:5px;
}
/* リスト最終行 */
.mod_List0002 ul li ul li:last-child {
	background:transparent url('img/marker_last.gif') no-repeat left -0.2em scroll;
}

投稿箇条書きリストを入れ子にしてCSSで階層を表示は CodingMania に最初に表示されました。

リスト アーカイブ - CodingMania

フォームにある現在地を示すステップナビゲーション

HTMl

CSS

jQueryで簡単にページ送りを自動で表示します。

JSを読み込みます

[pagenav.js]JavaScript

HTMl

▼HTMLソース

CSS

jqueryでxmlを読み込んでコンテンツを表示します。

JSを読み込みます

[xmldata.js]JavaScript

HTMl

CSS

サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。

JSを読み込みます

[swapimage.js]JavaScript

HTMl

CSS

CSSでリストの間にだけ線を引く。

HTMl

CSS

CSSのtext-indentを使って字下げします

HTMl

CSS

クリックするとクラス名を変更、書き換えします。

JSを読み込みます

[check.js]JavaScript

HTMl

CSS

ページを横渡りできるページ繰り

HTMl

CSS

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

JSを読み込みます

[slidepanel.js]JavaScript

HTMl

CSS

箇条書きリストを入れ子にしてCSSで階層を表示

HTMl

CSS

リストアーカイブ - CodingMania