CSSサンプル雛形

グラデーションボタン


＜HTML＞
<div id="contact-btm">
<ul>
	<li><a href="https://arks2017.com/">ホームページへ戻る <i class="fas fa-angle-right"></i></a></li>
	<li><a href="#yoyaku">今すぐ予約する <i class="fas fa-angle-right"></i></a></li>
</ul>
</div>


＜CSS＞
/*--------------------------------------------------------

TOPメニューボタン

--------------------------------------------------------*/
@media screen and (max-width: 481px)  {
#contact-btm{display:none;}
} 
#contact-btm{
	background:rgba(0, 0, 0, 0.6);
	background:-moz-rgba(0, 0, 0, 0.6);
	background:-webkit-rgba(0, 0, 0, 0.6);
	position:fixed;
	top:0;
	width:100%;
	padding:10px;
	z-index:1000;
}
#contact-btm ul{
	list-style:none;
	text-align:center;
}

#contact-btm li{
	width:300px;
	margin-left:auto;
	margin-right:auto;
	font-size:1.2em;
	padding:15px 5px;
	border-radius:6px;
	display:inline-block;
}
#contact-btm a{
	text-decoration:none;
	display:block;
}
#contact-btm li:nth-of-type(1){background: linear-gradient(-135deg, #45e5ad, #019d9a); margin-right:5px;}
#contact-btm li:nth-of-type(2){background: linear-gradient(-135deg, #ffc600, #ff9600); margin-left:5px;}


#contact-btm a:link{color:#FFFFFF;}
#contact-btm a:visited{color:#FFFFFF;}
#contact-btm a:hover{color:#272727;}
#contact-btm a:active{color:#FFFFFF;}

▲このページのTOPに戻る▲

サンプル１


/*++++++++++++++++++++++++++++++++++++++++++
　　目的別コース
++++++++++++++++++++++++++++++++++++++++++++*/
.houhou-box{
	display: -webkit-flex;
	display: flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content: space-between;
}

.houhou-box .style{
	width : -webkit-calc(100% / 3 - 5px) ;
	width : calc(100% / 3 - 5px) ;
	border:solid 1px #f9f0e7;
	margin:0px 5px 20px 0px;
	padding-top:150px;
}
.houhou-box .style p{text-align:center;}
.houhou-box .style:nth-child(3n){
	margin-right:0px;
}
.houhou-box .style:nth-child(1){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg1.jpg);}
.houhou-box .style:nth-child(2){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg2.jpg);}
.houhou-box .style:nth-child(3){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg3.jpg);}
.houhou-box .style:nth-child(4){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg4.jpg);}
.houhou-box .style:nth-child(5){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg5.jpg);}
.houhou-box .style:nth-child(6){background-image:url(https://miin.site/wp/wp-content/themes/miin-tama/img/houhou-bg6.jpg);}

.houhou-box .style{
	background-repeat:no-repeat;
	height:380px;
}


.houhou-box .style ul{margin-left:25px; padding-right:5px;}

▲このページのTOPに戻る▲

サンプル３

データダウンロード


＜HTML＞
<div class="ticket_box">
<img class="aligncenter" src="/wp-content/themes/vw-hair-salon-child/img/ticket1.jpg" />
<img class="aligncenter" src="/wp-content/themes/vw-hair-salon-child/img/ticket2.jpg" />
</div>


＜CSS＞
.ticket_box{
	background-image:url(https://hairmake-riveal.com/wp-content/themes/vw-hair-salon-child/img/ticket-bg.jpg);
	background-size:cover;
	padding-top:60px;
	padding-bottom:60px;
}
.ticket_box img{box-shadow:0px 0px 10px #555555;}

▲このページのTOPに戻る▲

追従するコンテンツ

CSSだけで実現出来る。div要素内に以下のコードを追加するだけ（CSS内に）


＜HTML＞
<div id="side">
	<p>あおういんばおいえんばえｒんばえり</p>
</div>


＜CSS＞
/*動くメールフォーム*/
#side{
	position: absolute;
	top: 420px;
	left: 1230px;
	width: 180px;
	height: 400px;
	background-color:#a0a0a0;
  
	border-bottom-right-radius:15px;
	border-top-right-radius:15px;
  
	background:linear-gradient(#a0a0a0,#646464);
	background:-moz-linear-gradient(top,#a0a0a0,#646464);
	background:-webkit-gradient(linear,left top,left bottom,from(#a0a0a0),to(#646464));
	-pie-background:linear-gradient(#a0a0a0,#646464);
	
	padding-top:10px;
}


＜JavaScript＞
$(function(){
    var side = $("#side");
    // #sideのオブジェクトをsideへ
    var main = $("article");
    // #mainのオブジェクトをmainへ
    var min_move = main.offset().top;
    // #side が動ける最初の地点（main要素のtopの位置）
    var max_move = main.offset().top + main.height() - side.height() - 2*parseInt(side.css("top") );
    // max_move は トップから #side が動ける最終地点までの長さ → #main 要素の内側の高さ内
    // max_move ←（ #mainボックスのトップの位置の値　＋　#mainボックスの高さ　ー　#sideの高さ　ー　サイドのトップ値✕２）
    var margin_bottom = max_move - min_move    ;
    // side要素の一番下にいる時のmargin-top値の計算
     
    // スクロールした時に以下の処理        
    $(window).bind("scroll", function() {
             
        var wst =  $(window).scrollTop();
        // スクロール値が wst に入る
             
        // スクロール値が main 要素の高さ内にいる時以下
        if( wst > min_move && wst < max_move ){
            var margin_top = wst - min_move ;
            // スクロールした値から min_move（#mainのtopの表示位置）を引いたのを margin_top へ
            side.animate({"margin-top": margin_top},{duration:600,queue:false});
            // サイド CSSの margin-top の値を、変数の margin_top にする
                 
        // スクロールした値が min_move（main要素の高さより小さい）以下の場合はCSSのマージントップ値を0にする
        }else if( wst < min_move ){
            side.animate({"margin-top":0},{duration:600,queue:false});
         
        // スクロールした値が max_move （main要素の高さより大きい）以上の場合以下
        }else if( wst > max_move ){
            side.animate({"margin-top":margin_bottom},{duration:600,queue:false});
        }
    }); 
});

なぜか＜/article＞を削除しないと動かないので注意！

▲このページのTOPに戻る▲

－CSSサンプル雛形－

グラデーションボタン

サンプル１

サンプル３

追従するコンテンツ