CodingMania

WordPress のYouTube埋め込みの iframe をレスポンシブ対応する

yotigory — Sun, 10 Oct 2021 06:49:40 +0000

JSを読み込みます

if ( is_single() ) {
wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js',  array('jquery'), false, true );
}

jQuery[js_youtube.js]

jQuery(document).ready(function () {
	$(function () {
		$('iframe').each(function () {
			let frame = $(this);
			let div = document.createElement('div');
			div.className = 'youtube';
			if ((frame.is('[src*="youtube"]'))) {
				$(this).wrap(div);
			}
		});
	});
});

CSS

/* youtube
-----------------------------------------*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

投稿 WordPress のYouTube埋め込みの iframe をレスポンシブ対応するは 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 に最初に表示されました。

ドロップダウンメニュー[レスポンシブ対応]

yotigory — Thu, 01 Mar 2018 04:28:09 +0000

JSを読み込みます

JavaScript[main.js]

$(window).on('load orientationchange', function() {
  setTimeout(function() {
    var w = window.innerWidth;
    var point = 1000;
    if (w > point) {
      //それ以外のときの処理
      $("body").addClass("pc").removeClass("spn");
      $(".Nav > ul").removeClass("open close").css("display", "block");
      $(".Nav .navbtn a").removeClass("open close").html("メニューを閉じる");
    } else {
      //画面サイズが1000px未満のときの処理
      $("body").addClass("spn").removeClass("pc");
      $(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
      $(".Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
    }
  }, 100);
});

//resize
$(window).resize(function() {
  var windowWidth = window.innerWidth;
  var point = 1000;
  var timer = false;
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    var ww = $(window).width();
    if (windowWidth != ww) {
      if (windowWidth > point) {
        $("body").addClass("pc").removeClass("spn");
        $(".Nav > ul").removeClass("open close").css("display", "block");
        $(".Nav > ul > li").css("display","inline-block");
        $(".Nav .navbtn a").removeClass("open close").html("メニューを閉じる");
        $(".Nav ul li.parent a").removeClass("open").addClass("close");
        $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      } else { //画面サイズが1000px未満のときの処理
        $("body").addClass("spn").removeClass("pc");
        $(".Nav > ul").addClass("close").removeClass("open").css("display", "none");
        $(".Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
        $(".Nav ul li.parent a").removeClass("open").addClass("close");
        $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      }
    } else {}
  }, 50);
});

//nav dropdown
$(function() {
  $(".Nav ul li.parent a").each(function() {
    var submenu = $(this).next("ul.submenu");
    var samelevel = $(this).parent().siblings().find("ul.submenu");
    var samelevelbtn = $(this).parent().siblings().find("a");
    $(this).addClass("close");
    $(submenu).addClass("close");
    $(this).on('click', function() {
      if ($(this).hasClass("open")) {
        $(this).removeClass("open").addClass("close");
        $(submenu).slideUp("fast").removeClass("open").addClass("close");
      } else {
        $(samelevel).slideUp("fast").removeClass("open").addClass("close");
        $(samelevelbtn).removeClass("open").addClass("close");
        $(submenu).slideDown("fast").removeClass("close").addClass("open");
        $(this).removeClass("close").addClass("open");
      }
      //return false;
    });
  });

  $(document).click(function(event) {
    if (!$(event.target).closest(".Nav").length) {
      $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      $(".Nav ul li.parent a").removeClass("open").addClass("close");
      //alert('changeイベントが発生しました。');
    }
  });
});

//SP nav
$(function() {
  $(".Nav .navbtn a").click(function() {
    if ($(".Nav > ul").css("display") == "none") {
      $(".Nav > ul").addClass("open").removeClass("close").slideDown("fast");
      $(".Nav > ul > li").css("display","block");
      $(this).removeClass("close").addClass("open").html("メニューを閉じる");
    } else {
      $(".Nav > ul").addClass("close").removeClass("open").slideUp("fast");
      $(".Nav ul li.parent").removeClass("open").addClass("close");
      $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
      $(this).addClass("close").removeClass("open").html("メニューを開く");
    }
  });
});

//SP アンカーリンク
$(function() {
  $("ul.submenu a[href^='#']").click(function(event) {
    //alert('changeイベントが発生しました。');
    $(".Nav ul.submenu").slideUp("fast").removeClass("open").addClass("close");
    $(".Nav ul li.parent a").removeClass("open").addClass("close");
    $(".spn .Nav > ul").addClass("close").removeClass("open").slideUp("fast");
    $(".spn .Nav .navbtn a").addClass("close").removeClass("open").html("メニューを開く");
    //$(this).removeClass("close").addClass("open").html("メニューを閉じる");
  });
});

HTMl


メニューを開く

  TOP
  メニューその１
  ドロップダウンメニューその1

  Yahoo
  アンカーリンク
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  ドロップダウンメニューその2

  ドロップダウン2
  ドロップダウン2
  更にドロップダウン2

  ドロップダウン3
  ドロップダウン3
  ドロップダウン3


  ドロップダウン2


  メニューその2
  メニューその3

CSS

/* Nav
-----------------------------------------*/
.Nav {
  margin-top: 60px;
  border-top: solid 1px #F5F4F0;
  border-bottom: solid 1px #F5F4F0;
}
@media screen and (max-width: 1000px) {
  .Nav {
    position: relative;
  border-top:none;
  }
}
.Nav .navbtn {
  display: none;
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn {
    display: block;
    position: absolute;
    top: -50px;
    right: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #000;
  }
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
   transition: .2s;
  }
  .Nav .navbtn a.open::before {
    top:19px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
    transition: .2s;
  }
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  }
}
@media screen and (max-width: 1000px) {
  .Nav .navbtn a.open {
  }
}

@media screen and (max-width: 1000px) {
  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    background-color: #FFF;
  }
  .Nav .navbtn a.open span::after {
    display: none;
  }
}
.Nav ul.close {
  display: none;
  border-top: solid 1px #F5F4F0;
}
.Nav > ul {
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (max-width: 1000px) {
  .Nav > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #FFF;
  }
}
.Nav > ul > li {
  position: relative;
  font-size: 15px;
  display: inline-block;
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li {
    display: block;
    border-bottom: solid 1px #dddddd;
  }
}
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 19px 15px;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  z-index: 2;
}
.Nav > ul > li.parent > a {
  padding-right:25px;
}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
@media screen and (max-width: 1000px) {
.Nav > ul > li.parent.open > a::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li.parent.open {
    border-bottom: none;
  }
}
  .Nav > ul > li.parent.open > a{
    color: #FFF;
  }
  .Nav > ul > li.parent.open > a::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li.parent.open > a {
    color: #FFF;
  }
}

.Nav > ul > li a:hover {
  color: #fff;
}
.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.Nav > ul > li a:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 2階層 */
.Nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 53px;
  left: 0;
  width: auto;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9;
}

@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul {
    background-color: #fbfbfb;
    position: static;
  }
}

.Nav > ul > li > ul li {
  white-space: nowrap;
}

.Nav > ul > li > ul li a {
  position: relative;
  padding: 12px 27px 12px 27px;
}
@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul li a {
    border-bottom: solid 1px #dddddd;
    background-color: #EEE;
  }
}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #00a0e9;
    border-right: solid 2px #00a0e9;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.Nav > ul > li > ul li a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1000px) {
  .Nav > ul > li > ul li a:hover {
    background-color: #FFF;
  }
}

.Nav > ul > li > ul li ul li a {
  padding-left: 42px;
}
.Nav > ul > li > ul li ul li a::before {
    left: 20px;
}

投稿ドロップダウンメニュー[レスポンシブ対応] は CodingMania に最初に表示されました。

横からスライドインするレスポンシブ対応メニュー

yotigory — Wed, 06 Sep 2017 08:43:52 +0000

JSを読み込みます

[main.js]JavaScript

$(function(){

//メニュー
//SET
if($(".Header__btn").css("display") == "block") {
    windowWidth = $(window).width();
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
}
//risize
var setwidth = $(window).width();
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    var ww = $(window).width();
    windowWidth = $(window).width();
    if(windowWidth == setwidth){
    }else if(windowWidth<640){
    $(".Header__btn p").addClass("close").removeClass("open");
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
    }else{
    $(".Globalnav").css({"margin":"0 auto", "width":950});
    };
    }, 50);
});

//orientationchange
$(function(){
var timer = false;
    //$(window).on("orientationchange", function() {
    $(window).on("orientationchange", function() {
    if(timer !== false){
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
    //window.onorientationchange = function(){
    windowWidth = $(window).width();
    //alert(windowWidth);
    if(windowWidth<640){
    $(".Header__btn p").addClass("close").removeClass("open");
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").css({"margin-left":windowWidth, "width":windowWidth,"display":"block"});
    }else{
    $(".Globalnav").css({"margin":"0 auto", "width":950});
    }
    }, 1);
    });
});

//click
  $(".Header__btn p").click(function() {
if($(this).hasClass("open")) {
    $(this).addClass("close").removeClass("open");
    //var windowWidth = $(window).width();
    $(".Header__btn p img").attr("src","common/img/icon_menu.png");
    $(".Globalnav").animate({"marginLeft":windowWidth+"px"},500);
    //alert(windowWidth);
} else {
    $(this).addClass("open").removeClass("close");
    $(".Header__btn p img").attr("src","common/img/icon_menu-close.png");
    $(".Globalnav").animate({"marginLeft":"0px"},500);
}

});

});

HTMl



メニューを開く



TOPページ
メニューその1
メニューその2
メニューその3
メニューその4
メニューその5

CSS

/* Header
-----------------------------------------*/
@media screen and (max-width: 640px) {
.Header{
  position: relative;
  height: 50px;
}
}
.Header__btn{
  display: none;
}
@media screen and (max-width: 640px) {
.Header__btn{
  position: absolute;
  top:0px;
  right: 0px;
  display: block;
  background-color: #489fdf;
}
.Header__btn p a{
  display: block;
    width: 50px;
    height: 50px;
}
  .Header__btn p a:after {
    position: absolute;
    display: block;
    content: " \f0c9";
    font-family: FontAwesome;
    width: 50px;
    height: 50px;
    top: 14px;
    left:0;
    right: 0;
    font-size: 22px;
    color: #FFF;
    text-align: center;
  }
  .Header__btn p.open a:after {
    content: " \f00d";
  }
.Header__btn span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

}
/* Globalnav
-----------------------------------------*/
@media screen and (max-width: 640px) {
  body {
    overflow: hidden;
  }
}
.Globalnav {
  margin: 0 auto;
  width: 950px;
}

@media screen and (max-width: 640px) {
  .Globalnav {
    width: auto;
  }
}

@media screen and (max-width: 640px) {
  .Globalnav {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    margin-left: 320px;
    width: 320px;
    z-index: 9999;
    background-color: #489fdf;
  }
}

.Globalnav ul {
  display: table;
  width: 100%;
}

@media screen and (max-width: 640px) {
  .Globalnav ul {
    display:block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
  }
}

.Globalnav ul li {
  display: table-cell;
}
@media screen and (max-width: 640px) {
  .Globalnav ul li {
   display: block;
    margin: 0;
    border-bottom: solid 1px #FFF;
  }
  .Globalnav ul li:last-child{
    border-bottom: none;
  }
}

.Globalnav ul li a {
  display: block;
  text-align: center;
  padding: 20px 0;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 3px #FFF;
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a {
    position: relative;
    padding: 15px 0;
    font-size: 14px;
    border: none;
    color: #FFF;
    text-align: left;
  }
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a:after {
    position: absolute;
    content: " \f105";
    font-family: FontAwesome;
    width: 20px;
    height: 7px;
    top: 50%;
    margin-top: -10px;
    right: 0;
  }
}

.Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
  border-bottom: solid 3px #489fdf;
  color: #489fdf;
}

@media screen and (max-width: 640px) {
  .Globalnav ul li a:hover, .Globalnav ul li a:focus, .Globalnav ul li.current a {
    border-bottom: none;
    color: #FFF;
  }
}

投稿横からスライドインするレスポンシブ対応メニューは CodingMania に最初に表示されました。

入力された日付を比べてメッセージを表示

yotigory — Wed, 15 Mar 2017 08:34:23 +0000

JSを読み込みます

[main.js]JavaScript

//日付のチェック
$(function(){
  $("#limitcheck").click(function(){
    var startday = parseInt($("#checkday").val());
    var startyear = parseInt($("#checkyear").val());
    var startmonth = parseInt($("#checkmonth").val());
    var endyear = parseInt($("#endyear").val());
    var endmonth = parseInt($("#endmonth").val());
    var endday = parseInt($("#endday").val());
    if ((jQuery.isNumeric(startday)==false)||(jQuery.isNumeric(startyear)==false)||(jQuery.isNumeric(startmonth)==false)||(jQuery.isNumeric(endyear)==false)||(jQuery.isNumeric(endmonth)==false)||(jQuery.isNumeric(endday)==false)){
      alert("日付をすべて入力してください。");
    } else {
      //var fromyear=endyear+5;
      //var tomonth = startmonth-1;
      to = new Date(startyear,startmonth,startday,0,0,0).getTime();
      from = new Date(endyear,endmonth,endday,0,0,0).getTime();
      //alert(to);
      //alert(from);
      if(to
HTMl



日付：【1】
 年

 月

 日




日付：【2】

 年

 月

 日











CSS
.Form dl{
  margin: 0 0 2px 0;
  display: block;
  box-sizing:border-box;
  line-height: 1.5;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl{
}
}
.Form dl dt{
  display: block;
  padding: 10px;
  font-size: 14px;
  background-color:#EEE;
  box-sizing:border-box;
  font-weight: bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dt{
}
}
.Form dl dd{
  display: block;
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 14px;
  box-sizing:border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dd{
  margin-bottom: 30px;
}
}

.Form select{
  width: 150px;
  margin: 0 3px 0 0;
  padding: 5px;
  box-sizing:border-box;
  border: solid 1px #999;
  border-radius: 4px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form select{
  width: 70%;
  margin-bottom: 20px;
}
.Form dd select:last-child{
  margin-bottom: 0px;
}
}

/* Form__checkbtn */
.Form__checkbtn button{
  margin: 0 auto;
  display: block;
  box-sizing:border-box;
  padding: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  border:solid 1px #737373;
  box-shadow: 2px 2px 0 #CCC;
  cursor: pointer;
  text-align: center;
  width: 300px;
  font-weight: bold;
  font-size: 16px;
}

投稿 入力された日付を比べてメッセージを表示 は CodingMania に最初に表示されました。

アクセシビリティを考慮したラジオボタン

yotigory — Fri, 09 Dec 2016 04:40:54 +0000

HTMl



どちらの食べ物が好きですか？


りんご 
バナナ







もし自宅のリフォームを考えた場合、とりあえず自分でいろんなメーカーのショウルームをまわったりWebで情報を収集したりしてある程度決めてからリフォーム会社に相談しますか？

自分で情報を収集する前にリフォーム会社に相談する。

自分でWebで情報を集めて調べるが、メーカーのショウルームまでは行かず、リフォーム会社に相談する。

自分でWebで情報をあつめて、メーカーのショウルームにも行き、ある程度決めてからリフォーム会社に相談する。

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form input{
  margin:0 5px 5px 0;
}

.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  margin: 10px;
}
.Form legend{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
  line-height: 1.5;
}
.Form__radio{
  margin: 10px;
}
.Form__radio label{
  margin-top: 10px;
}

投稿アクセシビリティを考慮したラジオボタンは CodingMania に最初に表示されました。

指定のラジオボタンをチェックすると、さらに追加で項目を表示します

yotigory — Thu, 17 Nov 2016 08:25:38 +0000

JSを読み込みます

[main.js]JavaScript

//選択されたら表示
$(function(){
$(".Form__radio dd").each(function() {
//命令
  var Set = $(this);
  var selectlabel = $(this).find("label.select");
  var closelabel = $(this).find("label.close");
  var selectitem = $(this).find("label.select input");
  var morearea = $(this).find(".Inputmore");
  var moreinput = $(this).find(".Inputmore input");
  var moreinputselect = $(this).find(".Inputmore select");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");

    $([selectlabel[0] , closelabel[0]]).click(function(){
     if($(selectitem).prop('checked')){
     $(morearea).slideDown();
                }else{
      $(moreinput).attr("checked", false);
      $(morearea).slideUp();
      $(moreinputselect).val("選択");
        }
 });
});
});

HTMl




自分の部屋に窓はありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のカーテンを使っていますか？








自分の部屋にソファはありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のソファですか？

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form>dl{
  margin: 0 0 40px 0;
}
.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  padding: 10px;
}
.Inputmore {
  margin: 10px 0 0 0;
}

投稿指定のラジオボタンをチェックすると、さらに追加で項目を表示しますは CodingMania に最初に表示されました。

ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます

yotigory — Thu, 21 Jul 2016 02:28:41 +0000

JSを読み込みます

[main.js]JavaScript

(function($) {

function setimage(){
(function($) {

function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;

$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});

if (win_ratio > 1.5){　//画像の比率が大きかったら
  $(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
  var winwidth = $(".Opening").width();
  var imgheight = winwidth*0.66;
  var winheight = $(".Opening").height();
  var imgtopmargin = (imgheight-winheight)/2;
  $(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){　//画像の比率が小さかったら
  var imgwidth = ((height/800))*1200;
  var winwidth = $(".Opening").width();
  var imgmargin = (winwidth-imgwidth)/2;
  $(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}

  //slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        setimage();
    }, 200);
});

})(jQuery);

HTMl

CSS

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening__text{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto;
}

投稿ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えますは CodingMania に最初に表示されました。

画面をscrollすると表示されて「閉じるボタン」で非表示になるバナー

yotigory — Fri, 15 Jul 2016 03:54:48 +0000

JSとfont-awesomeを読み込みます

[main.js]JavaScript

(function($) {

$(function () {
    var display = function () {
    if ($(this).scrollTop() > 150) { //scroll量
            $(".Bnr").fadeIn();
        } else {
            $(".Bnr").fadeOut();
        }
    };
    $(window).on("scroll", display);
    //click
    $(".Bnr p.close a").click(function(){
    $(".Bnr").fadeOut();
    $(window).off("scroll", display);
    });
});

})(jQuery);

HTMl





ココにバナーとかコンテンツをいれます。


閉じる

CSS

/* Bnr
-----------------------------------------*/
.Bnr{
  position: relative;
  margin: 0 auto;
  width: 1200px;
  display: none;
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,sans-serif !important;
}
.Bnr .Bnr__img{
  position: fixed;
  bottom: 0;

  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  z-index: 88;
}
.Bnr__img__inner{
  width: 1200px;
  height: 80px;
  box-sizing:border-box;
  padding: 10px;
  background-color: #fafafa;
}
.Bnr .Bnr__img__inner a{
  display: block;
}
.Bnr .Bnr__img p.close{
  position: absolute;
  right: 10px;
  top:10px;
}
.Bnr .Bnr__img p.close a{
  display: block;
  width: 20px;
  height: 25px;
  text-align: center;
}
.Bnr .Bnr__img p.close a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Bnr .Bnr__img p.close a i{
  font-size: 20px;
  z-index: 888;
  color: #222;
}

投稿画面をscrollすると表示されて「閉じるボタン」で非表示になるバナーは CodingMania に最初に表示されました。

レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02

yotigory — Mon, 09 May 2016 06:17:15 +0000

JSを読み込みます

[main.js]JavaScript

jQuery(function($){

//sp Menu
$(".Menubtn .open").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .close").css("display","block");
});
$(".Menubtn .close").click(function() {
    $(".Sidenav").animate({
        width: 'toggle'
    }, 300);
    $(this).css("display","none");
    $(".Menubtn .open").css("display","block");
});

//IOS
//visible
$(function() {
var windowWidth = $(window).width();
var x = 740;
$(window).resize(function(){
var ww = $(window).width();
if(windowWidth != ww) {
if(ww >= x) {
$(".Sidenav").css("display","block");
$(".Menubtn ul li").css("display","none");
} else {
$(".Sidenav").css("display","none");
$(".Menubtn ul li.close").css("display","none");
$(".Menubtn ul li.open").css("display","block");
}
windowWidth = ww;
}
});
});
 
  });

HTMl



  開く
  閉まる





第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        現在地第五階層
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル
  

第三階層タイトル
第三階層下層あり
  
    第四階層下層あり
      
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
        第五階層タイトル
      
    
    第四階層タイトル
    第四階層タイトル
    第四階層タイトル

CSS

/* Menubtn 
-----------------------------------------*/
.Menubtn ul li{
  display: none;
}
@media screen and (max-width: 740px) {
.Menubtn{
  display: block;
}
.Menubtn ul li a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Menubtn ul li a{
  position: absolute;
  top:20px;
  right: 20px;
  color: #666;
  font-size: 28px;
  z-index: 99;
}
.Menubtn ul li.open{
  display: block;
}
}
/* Sidenav
-----------------------------------------*/
.Sidenav{
  float: left;
 width:200px;
}
@media screen and (max-width: 740px) {
.Sidenav{
  float: none;
 width:100%;
 position: absolute;
 top:0;
 right: 0;
 bottom: 0;
 background-color: #000;
 opacity: 0.9;
 display: none;
 box-sizing:border-box;
}
}

.Sidenav a:link    {color:#000; text-decoration:none;}
.Sidenav a:visited {color:#000; text-decoration:none;}
.Sidenav a:hover   {color:#000; text-decoration:none;}
.Sidenav a:active  {color:#000; text-decoration:none;}

@media screen and (max-width: 740px) {
.Sidenav a:link    {color:#FFF;}
.Sidenav a:visited {color:#FFF;}
.Sidenav a:hover   {color:#FFF;}
.Sidenav a:active  {color:#FFF;}
}
.Sidenav ul li a{
  display: block;
  line-height: 1.3;
  font-size:12px;
  padding:5px 5px 5px 10px;
}
.Sidenav ul li a:hover{
  background-color: #EEE;
}
@media screen and (max-width: 740px) {
.Sidenav ul li a:hover{
  background-color: transparent;
  color:#2196f3;
}
}
.Sidenav ul li a:before{
  margin:0 5px 0 0;
  content: " \f054";
   color:#2196f3;
  font-family: FontAwesome;
}

.Sidenav ul{
  padding:0 0 0 10px;
}
@media screen and (max-width: 740px) {
.Sidenav>ul{
  padding: 80px 10px 50px 10px;
}
}

投稿レスポンシブ対応：横幅が狭くなるとメニューを折りたたみます。Ver.02 は CodingMania に最初に表示されました。