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">
<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
});
});
}
});
$(function() { if ($(window).width() <= 768) {
let $prevClicked = null;
const $featurecnte = $('#featurecnte');
$('#backend li h2, #frontend li h2').on('click', function() {
const $h2 = $(this);
const $li = $h2.closest('li');
const $container = $li.closest('ul');
const bgStyle = $li.attr('style');
const featureInner = $li.find('.feature').html();
// 同じh2をクリックしたら閉じる
if ($prevClicked && $prevClicked[0] === this) {
$featurecnte.stop(true, true).slideUp(300);
$prevClicked = null;
return;
}
// 前のクリックとは別の場合：更新処理
$prevClicked = $h2;
// スライド表示：まず中身と背景だけ更新してDOMに配置
$featurecnte
.stop(true, true)
.hide() // 必ずhideしてから
.attr('style', bgStyle)
.html('<div class="feature">' + featureInner + '</div>')
.insertAfter($container);
// DOMに挿入されたあとにslideDown（これが重要）
$featurecnte.slideDown(300);
});
}});
</script>
<link rel="stylesheet" href="css/top-ver2.css" />
<!--%inline="/temp-inline-analytics.html"-->Google Analytics<!--/%inline-->
</head>
<body>
<main>
<div id="cover"><div class="wrap">
<div class="chara">
<div>
<img class="spike" src="img/ver2-cover-spike.png">
<img class="rocks" src="img/ver2-cover-rocks.png">
</div>
<img class="catch" src="img/ver2-cover-catch.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="content">
<!--$box-->
<!--@outline-->
<div id="info" class="wrap">
<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">*</label></span>'-->
<ul class="more">
<!--//-->
<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-->
<!--@feature-->
<ul id="<!--id/-->" class="wrap">
<!--@featurecnte 検索@id='feature.Line'-->
<li style="background-image: url('<!--back/-->');">
<!--head--><h2><img src="#" alt=name></h2><!--/head-->
<div class="feature">
<!--text--><p>機能特徴説明・・・</p><!--/text-->
<!--@featurelink 検索@name='featurecnte.Line'-->
<!--検索@switch='1'-->
<!--追加@tget='_*'-->
<!--追加@icon='<span class="icon icon-*"></span>'-->
<!--追加@label='<span class="label">*</label></span>'-->
<ul class="more">
<!--//-->
<li><a href="<!--href/-->" target="<!--tget/-->"><!--icon/--><!--label/--></a></li>
<!--//-->
</ul>
<!--/@featurelink-->
</div>
</li>
<!--/@featurecnte-->
</ul>
<!--/@feature-->
<!--/$box-->
<div id="featurecnte"></div>
<!--%アクション="/WEB-PUB/actions/webPubTemp.jsp" temp="section-banner.jsp"--><!--"pubAct.jsp"--><!--/%アクション-->
<div id="products" class="wrap">
<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><!--/content-->
</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>