<body>

<header>
	<nav>
		<a href="#">ロゴ</a>
		<ul>
			<li><a href="javascript:void(0)">メニュー1</a></li>
			<li><a href="javascript:void(0)">メニュー2</a></li>
			<li><a href="javascript:void(0)">メニュー3</a></li>
			<li><a href="javascript:void(0)">メニュー4</a></li>
		</ul>
	</nav>
	<hr>
</header>

<main>
<section class="content_body">
	<div class="submenu">
		<div>
			<h3>メニュー１</h3>
			<ul>
				<li><a href="#"><i class="fas fa-star"></i> サブメニュー</a></li>
				<li><a href="#"><i class="fas fa-star"></i> サブメニュー</a></li>
				<li><a href="#"><i class="fas fa-star"></i> サブメニュー</a></li>
			</ul>
		</div>
		<hr>
		<div>
			<a href="#">〇詳細設定</a>
		</div>
	</div>
	<div class="mainarea">
		<div>
			<header>
				<h2>タイトル</h2>
				<p>ここに機能の説明とかを書きます。</p>
			</header>
			<div>
				<a href="mvp_add.html" class="act"><strong>新規登録</strong></a>
			</div>
			<div>
				<form class="search-form">
					<section>
						<p>こうもくめい<input type="text"></p>
						<p>こうもくめい<input type="text"></p>
						<p>こうもくめい<input type="text"></p>
						<p>こうもくめい<input type="text"></p>
					</section>
					<section>
						<p class="col-2">こうもくめい<input type="text"></p>
						<p class="col-2">こうもくめい<input type="text"></p>
					</section>
					<button type="submit"><i class="fas fa-search"></i> 検索</button>
				</form>
			</div>
			<div class="pager">
				<a href="#"><i class="fas fa-caret-left"></i></a>
				<a href="#"><strong>1</strong></a>
				<a href="#"><i>1</i></a>
				<a href="#"><i>1</i></a>
				<a href="#"><i>1</i></a>
				<a href="#"><i>1</i></a>
				<a href="#"><i class="fas fa-caret-right"></i></a>
			</div>
			<div>
			<table class="data_list">
				<thead>
					<tr>
						<th>ID</th>
						<th>名前</th>
						<th>住所</th>
						<th>年齢</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>てっく　きわめ</td>
						<td>あいちけん</td>
						<td>25</td>
						<td>
							<a href="" class="act"><strong>編集</strong></a>
							<a href="" class="act"><strong>削除</strong></a>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
	</div>
</section>
</main>

<hr>

<footer>inglow inc tech</footer>

@charset "UTF-8";

body{
	padding:0;
}
body > header{
	max-width:100%;
	padding-top:0;
	padding-bottom:0;
}
body > header > nav{
	margin-bottom:0px;
}

body > header hr{
	margin:0;
}

body > main{
	max-width:100%;
}

.content_body{
	flex-wrap:nowrap;
}

button{
	padding:10px;
	min-width:4em;
}

.pager a i,
.pager a strong{
	line-height:1em;
}
.act i,
.act strong{
	padding:10px 10px;
}

.act i.fas{
	padding:0;
	margin-right:0.25em;
	border:none;
}



.submenu{
	width:29%;
	max-width:300px;
	margin-right:1%;
}

.submenu i{
	margin:0;
	padding:0;
	border:none;
}

.submenu div,
.submenu form{
}

.submenu div > h3{
	margin-bottom:0;
}
.submenu div > ul{
	margin-top:0;
}


.mainarea{
	flex: 1;
}

.mainarea div header{
	padding:0;
}
.mainarea header p{
	text-align:left;
}

.mainarea h2,
.mainarea h3{
	text-align:left;
}

.data_list,
.search-form{
	box-sizing:border-box;
}

.search-form section p{
	flex:1;
}
.search-form section p.col-2{
	flex:2;
}


.search-form hr{
	margin:0;
}

.data_list{
	width:100%;
}

External CSS

  1. https://inglow.jp/files/css/code-pen/mvp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.