dl
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>モックアップ</title>

	<meta name="description" content="r4demo">
	<meta name="keywords" content="r4_demo">
	<meta name="copyright" content="r4_demo ">
	<!--
	<link href="./img/common/favicon.ico" rel="shortcut icon">
	-->
	<link href="./css/reset.css" media="all" rel="stylesheet">
	<link href="./css/common.css" media="all" rel="stylesheet">
	<link href="./css/font-awesome/font-awesome.min.css" media="all" rel="stylesheet">

	<!-- slick -->
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

	<script src="./js/jquery.common.js"></script>
</head>                
<body class="bgcolGry">
	<!-- ヘッダ -->
	<header class="w100p flex bgcolWht">
		<div class="bgcol01 flexGrow2"></div>
		<div class="wCommon flex flex-wrap flex-around flex-Vmiddle">
			<div class="w30p pdUBpat02">
				<h1><a href="./"><img src="./img/common/logo.png" alt="logo"></a></h1>
			</div>
			<nav id="hnav" class="w60p pdUBpat02">
				<ul class="flex flex-around">
					<li class=""><a href="./">hnav</a></li>
					<li class=""><a href="./">hnav</a></li>
					<li class=""><a href="./">hnav</a></li>
					<li class=""><a href="./">hnav</a></li>
				</ul>
			</nav>
			<div class="flexGrow1"><img class="wCommon" src="" height="300px" alt="siteTtl"></div>
		</div>
		<div class="bgcol02 flexGrow2"></div>
	</header>

	<!-- メインコンテンツ -->
	<div id="wrap" class="wCommon contCt bgcolWht">


		<article class="pdCommon1m">
			<h2 class="mgBottom2em">コンテンツ名</h2>
			<div class="flex flex-around flex-Vmiddle w100p">
				<div class="js-slick w40p slider">
					<div class="slide"><span class="dummy textCt">1</span></div><!-- 1枚目 -->
					<div class="slide"><span class="dummy textCt">2</span></div><!-- 2枚目 -->
					<div class="slide"><span class="dummy textCt">3</span></div><!-- 3枚目 -->
					<div class="slide"><span class="dummy textCt">4</span></div><!-- 4枚目 -->
					<div class="slide"><span class="dummy textCt">5</span></div><!-- 5枚目 -->
				</div>				
				<div class="w50p textCt">テキストですテキストですこれはテキストです</div>				
			</div>
		</article>


		<article class="pdCommon1m">
			<h2 class="mgBottom2em">コンテンツ名</h2>
			<div class="flex flex-around flex-Vmiddle w100p">
				<div class="js-slick w40p slider">
					<div class="slide"><span class="dummy textCt">1</span></div><!-- 1枚目 -->
					<div class="slide"><span class="dummy textCt">2</span></div><!-- 2枚目 -->
					<div class="slide"><span class="dummy textCt">3</span></div><!-- 3枚目 -->
					<div class="slide"><span class="dummy textCt">4</span></div><!-- 4枚目 -->
					<div class="slide"><span class="dummy textCt">5</span></div><!-- 5枚目 -->
				</div>				
				<div class="w50p textCt">テキストですテキストですこれはテキストです</div>				
			</div>
		</article>


		<article class="pdCommon1m">
			<h2 class="mgBottom2em">コンテンツ名</h2>
			<div class="flex flex-around flex-Vmiddle w100p">
				<div class="js-slick w40p slider">
					<div class="slide"><span class="dummy textCt">1</span></div><!-- 1枚目 -->
					<div class="slide"><span class="dummy textCt">2</span></div><!-- 2枚目 -->
					<div class="slide"><span class="dummy textCt">3</span></div><!-- 3枚目 -->
					<div class="slide"><span class="dummy textCt">4</span></div><!-- 4枚目 -->
					<div class="slide"><span class="dummy textCt">5</span></div><!-- 5枚目 -->
				</div>				
				<div class="w50p textCt">テキストですテキストですこれはテキストです</div>				
			</div>
		</article>

	</div>
	<footer>
		<div id="footer" class="contCt wCommon bgcolWht flex flex-around">
			<div class="w30p"><img class="" src="./img/common/logo.png" alt="test"></div>
			<div class="w60p">
				<div class="textRight">Copyright © xxxxx xxxxx. All Rights Reserved.<br>
				©2022 xxxxxxxxxx.
				</div>
			</div>
			<div id="pageup">
				<a class="gotop bgcol01 colWht pdUBpat01" href="#">↑ ページ上部に戻る</a>
			</div>
		</div>
	</footer>
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->


</body>
</html>




/*----------------------------------------------*/
/*					基本設定						*/
/*----------------------------------------------*/

/*基本コンテンツ幅*/
.wCommon{
	width: 1080px;
}
/*header*/
.headerHeight{
	height: 300px;
}

/*.wAuto{
	width: auto;
	-webkit-box-flex: 1;
}*/





/*----------------------------------------------*/
/*					Aタグ						*/
/*----------------------------------------------*/

a[href$="pdf"]:after,
a[href$="doc"]:after,
a[href$="docx"]:after,
a[href$="xls"]:after,
a[href$="xlsx"]:after,
a[href$="ppt"]:after,
a[href$="pptx"]:after,
a[href^="http"]:after,
a[href^="mailto:"]:after {
	width: 1em;
	margin: 0 .25em;
	font-family: FontAwesome;
	text-align: center;
	display: inline-block;
}

a[href$="pdf"]:after {
	content: "\f1c1";
	color: #e1462a;
}

a[href$="doc"]:after,
a[href$="docx"]:after {
	content: "\f1c2";
	color: #00178f;
}
a[href$="xls"]:after,
a[href$="xlsx"]:after {
	content: "\f1c3";
	color: #007133;
}
a[href$="ppt"]:after,
a[href$="pptx"]:after {
	content: "\f1c4";
	color: #dd5800;
}

a[href^="http"]:after {
	content: "\f08e";
	color: #999;
}

a[href^="mailto:"]:after {
	content: "\f003";
	color: #666;
}

a.no-icon:after {
	display: none !important;
}


a {
	color: #333;
	text-decoration: none;
}

a:hover,
a:active,
a:focus {
	color: #ccc;
}

a:link,
a:visited,
a:active,
a:hover {
	outline: none;
}



/*----------------------------------------------*/
/*						配置						*/
/*----------------------------------------------*/
.pos_rel{ position: relative; }
.pos_abs{ position: absolute; }



/*----------------------------------------------*/
/*					flexbox						*/
/*----------------------------------------------*/

.flex{
	display: flex;
}
.flex-wrap{
	flex-wrap: wrap;
}
/*左右振り分け*/
.flex-around{
	justify-content: space-around;
}
/*均等配置*/
.flex-between{
	justify-content: space-between;
}

/*均等配置*/
.flex-center{
	justify-content: center;
}

/*上下中央*/
.flex-Vmiddle{
	align-items: center;
}

/*flexboxでの横幅*/
/*親要素に合わせて伸縮*/
.flexGrow1{
	flex: 1;
	/*flex-grow: 1;*/
}
.flexGrow2{
	flex: 2;
	/*flex-grow: 2;*/
}

/*天地中央にするには組み合せ*/

.contCt{
	margin: 0 auto;
}



#pageup {
    position: fixed;
    bottom: 0;
    right: 2em;
}

/*----------------------------------------------*/
/*					汎用						*/
/*----------------------------------------------*/


/*マージン*/
.mgBottom1em{	margin-bottom: 1em;		}
.mgBottom2em{	margin-bottom: 2em;		}
.mgBottom3em{	margin-bottom: 3em;		}
.mgBottom4em{	margin-bottom: 4em;		}



/*パディング*/
/*all*/
.pdCommon1m{	padding: 1em;		}
.pdCommon2m{	padding: 2em;		}
.pdCommon3m{	padding: 3em;		}

/*下部のみ*/
.pdBottom1em{	padding-bottom: 1em;	}
.pdBottom2em{	padding-bottom: 2em;	}
.pdBottom3em{	padding-bottom: 3em;	}
.pdBottom4em{	padding-bottom: 4em;	}
/*上下ほしい*/
.pdUBpat01	{	padding: 1em 1em;	}
.pdUBpat02	{	padding: 2em 1em;	}
.pdUBpat03	{	padding: 3em 1em;	}
.pdUBpat04	{	padding: 4em 1em;	}




/*幅設定*/
.w05p {		width: 5%;		}
.w10p {		width: 10%;		}
.w20p {		width: 20%;		}
.w30p {		width: 30%;		}
.w40p {		width: 40%;		}
.w50p {		width: 50%;		}
.w60p {		width: 60%;		}
.w70p {		width: 70%;		}
.w80p {		width: 80%;		}
.w90p {		width: 90%;		}
.w100p {	width: 100%;	}





/*背景色*/
.bgcolBlk	{	background-color: #000;	}
.bgcolWht	{	background-color: #FFF;	}
.bgcolGry	{	background-color: #eee;	}


/*その他背景色*/
.bgcol01		{	background-color: #a0a0a0;	}
.bgcol02		{	background-color: red;	}
.bgcol03		{	background-color: #aaa;	}
.bgcol04		{	background-color: #111;	}



/*色設定*/
.colBlk	{	color: #000;	}
.colWht	{	color: #FFF;	}
/*その他*/
.col01	{	color: #000;	}
.col02	{	color: #000;	}
.col03	{	color: #000;	}
.col04	{	color: #000;	}


/*ボーダー*/
.bdCommon01{
	border: solid 1px #ccc;
}

/*topへ*/

.gotop{
	border-bottom: solid 3px #a0a0a0;
	background-color: #a0a0a0;
	opacity: 85%;
}


/*----------------------------------------------*/
/*					汎用						*/
/*----------------------------------------------*/

/*フォントサイズ設定*/
.ftsizeSmall	{	font-size: 0.75em;	}
.ftsizeMididum	{	font-size: 1.25em;	}
.ftsizeLerge	{	font-size: 1.45em;	}
.ftsizexLerge	{	font-size: 1.75em;	}

/*テキスト制御*/
.textCt {	text-align: center;	}
.textLeft{	text-align: left;	}
.textRight{	text-align: right;	}



/*demo*/
.dummy{
	height: 250px;
	background-color: aqua;
	display: block;
}
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

コメントを残す

メールアドレスが公開されることはありません。