HTMLフレームワーク・HTML WRITER
HTMLはそのままに、コメントアウトタイプタグの追加で、
データベースと連動したページが作成できます。
<!--%init-->
<!--%action="/WEB-PUB/actions/initPageKit.jsp"--><!--/%action-->
<!--/%init-->
<!--%head-->
<!--%action="pagePankuzu.jsp" level="1" name="ホーム" join=""--><!--/%action-->
<!--/%head-->
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--$box-->
<!--@outline-->
<title><!--title/--></title>
<meta name="description" content="<!--description/-->">
<!--/@outline-->
<!--/$box-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="item-csf.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="item-jsf.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/icon.css" />
<link rel="stylesheet" href="css/outline.css" />
<link rel="stylesheet" href="css/bager-menu.css" />
<link rel="shortcut icon" href="img/favicon.ico">
<!--SLIDER{-->
<link href="js/slick/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick/slick.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/slick/slick.min.js"></script>
<script>
$(function(){
var w = $(window).width();
if (w > 768) {
$('.slider').each(function(){
$(this).slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
arrows: false
});
});
} else {
$('.slider').each(function(){
$(this).slick({
autoplay: true,
autoplaySpeed: 4800,
dots: false,
arrows: false
});
});
}
});
</script>
<!--}SLIDER-->
<link rel="stylesheet" href="css/top-ver2.css" />
<!--%inline="/temp-inline-analytics.html"-->Google Analytics<!--/%inline-->
</head>
<body>
<main>
<div class="cover"><div class="wrap">
<div class="chara"><img src="img/ver2-cover-chara.png"></div>
<div class="spikey">
<!--$box-->
<!--@spikey-->
<!--置換@dumy=' '-->
<ul class="slider">
<!--//-->
<li class="">
<div class="awrap">
<!--img--><div><img src="img/cover.jpg"></div><!--/img-->
<!--dumy--><a href=href target="_self"></a><!--/dumy-->
</div>
<div class="cwrap">
<!--head--><h3 class="head h5"><span>見出し</span></h3><!--/head-->
<!--body--><p class="body tx-body">説明文</p><!--/body-->
<!--capt--><p class="capt tx-capt">キャプション</p><!--/capt-->
</div>
</li>
<!--//-->
</ul>
<!--/@spikey-->
<!--/$box-->
</div>
</div></div>
<div class="wrap">
<!--$box-->
<!--@outline-->
<div id="info">
<div class="head">
<!--headimg-->
<h1><img src="#" alt=head></h1>
<!--/headimg-->
<!--@overview-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul>
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@overview-->
</div>
<!--body-->
<div class="body">
<p>
ヘッドレスCMSの柔軟性と・・・
</p>
</div>
<!--/body-->
</div>
<!--/@outline-->
<!--/$box-->
<!--$box-->
<!--@backend-->
<div class="backend">
<ul>
<!--//-->
<li style="background-image: url('<!--back/-->');">
<!--head--><h2><img src="#" alt=name></h2><!--/head-->
<!--text--><p>機能特徴説明・・・</p><!--/text-->
<!--@backendlink 検索@name='backend.Line'-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul class="more">
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@backendlink-->
</li>
<!--//-->
</ul>
</div>
<!--/@backend-->
<!--/$box-->
<!--$box-->
<!--@frontend-->
<ul class="frontend">
<!--//-->
<li style="background-image: url('<!--back/-->');">
<!--head--><h2><img src="#" alt=name></h2><!--/head-->
<!--text--><p>機能特徴説明・・・</p><!--/text-->
<!--@frontendlink 検索@name='frontend.Line'-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul class="more">
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@frontendlink-->
</li>
<!--//-->
</ul>
<!--/@frontend-->
<!--/$box-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-banner.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<div class="products">
<h1><img src="img/logo-products.png"></h1>
<h2>スパイキー・ウェブプロダクト</h2>
<ul>
<!--$box-->
<!--%action="ifPram.jsp?ptn=products"-->
<!--@products--><!--検索@genre='product'--><!--検索@switch="1"-->
<li style="background-image:url(<!--pict/-->); background-size: cover;">
<a href="<!--href/-->" target="_blank">
<!--name--><h3>サイト名</h3><!--/name-->
<!--cmnt--><p>サイト説明</p><!--/cmnt-->
</a>
</li>
<!--/@products-->
<!--/%action-->
<!--@products--><!--検索@genre='webserv'--><!--検索@switch="1"-->
<li style="background-image:url(<!--pict/-->); background-size: cover;">
<a href="<!--href/-->" target="_blank">
<!--name--><h3>サイト名</h3><!--/name-->
<!--cmnt--><p>サイト説明</p><!--/cmnt-->
</a>
</li>
<!--/@products-->
<!--/$box-->
</ul>
</div>
</div>
</main>
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-mailtoplate.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-news.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%inline="/inline-footer.html"-->フッター<!--/%inline-->
</body>
</html>
<!--%action="/WEB-PUB/actions/initPageKit.jsp"--><!--/%action-->
<!--/%init-->
<!--%head-->
<!--%action="pagePankuzu.jsp" level="1" name="ホーム" join=""--><!--/%action-->
<!--/%head-->
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--$box-->
<!--@outline-->
<title><!--title/--></title>
<meta name="description" content="<!--description/-->">
<!--/@outline-->
<!--/$box-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="item-csf.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="item-jsf.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/font.css" />
<link rel="stylesheet" href="css/icon.css" />
<link rel="stylesheet" href="css/outline.css" />
<link rel="stylesheet" href="css/bager-menu.css" />
<link rel="shortcut icon" href="img/favicon.ico">
<!--SLIDER{-->
<link href="js/slick/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick/slick.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/slick/slick.min.js"></script>
<script>
$(function(){
var w = $(window).width();
if (w > 768) {
$('.slider').each(function(){
$(this).slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
arrows: false
});
});
} else {
$('.slider').each(function(){
$(this).slick({
autoplay: true,
autoplaySpeed: 4800,
dots: false,
arrows: false
});
});
}
});
</script>
<!--}SLIDER-->
<link rel="stylesheet" href="css/top-ver2.css" />
<!--%inline="/temp-inline-analytics.html"-->Google Analytics<!--/%inline-->
</head>
<body>
<main>
<div class="cover"><div class="wrap">
<div class="chara"><img src="img/ver2-cover-chara.png"></div>
<div class="spikey">
<!--$box-->
<!--@spikey-->
<!--置換@dumy=' '-->
<ul class="slider">
<!--//-->
<li class="">
<div class="awrap">
<!--img--><div><img src="img/cover.jpg"></div><!--/img-->
<!--dumy--><a href=href target="_self"></a><!--/dumy-->
</div>
<div class="cwrap">
<!--head--><h3 class="head h5"><span>見出し</span></h3><!--/head-->
<!--body--><p class="body tx-body">説明文</p><!--/body-->
<!--capt--><p class="capt tx-capt">キャプション</p><!--/capt-->
</div>
</li>
<!--//-->
</ul>
<!--/@spikey-->
<!--/$box-->
</div>
</div></div>
<div class="wrap">
<!--$box-->
<!--@outline-->
<div id="info">
<div class="head">
<!--headimg-->
<h1><img src="#" alt=head></h1>
<!--/headimg-->
<!--@overview-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul>
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@overview-->
</div>
<!--body-->
<div class="body">
<p>
ヘッドレスCMSの柔軟性と・・・
</p>
</div>
<!--/body-->
</div>
<!--/@outline-->
<!--/$box-->
<!--$box-->
<!--@backend-->
<div class="backend">
<ul>
<!--//-->
<li style="background-image: url('<!--back/-->');">
<!--head--><h2><img src="#" alt=name></h2><!--/head-->
<!--text--><p>機能特徴説明・・・</p><!--/text-->
<!--@backendlink 検索@name='backend.Line'-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul class="more">
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@backendlink-->
</li>
<!--//-->
</ul>
</div>
<!--/@backend-->
<!--/$box-->
<!--$box-->
<!--@frontend-->
<ul class="frontend">
<!--//-->
<li style="background-image: url('<!--back/-->');">
<!--head--><h2><img src="#" alt=name></h2><!--/head-->
<!--text--><p>機能特徴説明・・・</p><!--/text-->
<!--@frontendlink 検索@name='frontend.Line'-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</span>'-->
<ul class="more">
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@frontendlink-->
</li>
<!--//-->
</ul>
<!--/@frontend-->
<!--/$box-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-banner.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<div class="products">
<h1><img src="img/logo-products.png"></h1>
<h2>スパイキー・ウェブプロダクト</h2>
<ul>
<!--$box-->
<!--%action="ifPram.jsp?ptn=products"-->
<!--@products--><!--検索@genre='product'--><!--検索@switch="1"-->
<li style="background-image:url(<!--pict/-->); background-size: cover;">
<a href="<!--href/-->" target="_blank">
<!--name--><h3>サイト名</h3><!--/name-->
<!--cmnt--><p>サイト説明</p><!--/cmnt-->
</a>
</li>
<!--/@products-->
<!--/%action-->
<!--@products--><!--検索@genre='webserv'--><!--検索@switch="1"-->
<li style="background-image:url(<!--pict/-->); background-size: cover;">
<a href="<!--href/-->" target="_blank">
<!--name--><h3>サイト名</h3><!--/name-->
<!--cmnt--><p>サイト説明</p><!--/cmnt-->
</a>
</li>
<!--/@products-->
<!--/$box-->
</ul>
</div>
</div>
</main>
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-mailtoplate.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-news.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<!--%inline="/inline-footer.html"-->フッター<!--/%inline-->
</body>
</html>