<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>TableView</title>
	<link href="css/common.css" media="all" rel="stylesheet">
</head>
<body>
<div class="wrapper">

	<div class="header vw100">ヘッダ</div>

	<div class="main vw100 flex">
		<!-- 大項目1 -->
		<div class="tableView flex flex_wrap text_ct">
			<div class="vw50 bg01 ft_col_wht"><p class="bd_right tablePd">〇〇〇・〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom">〇〇〇〇〇〇</p></div>

		</div>
		<!-- 大項目2 -->
		<div class="tableView flex flex_wrap text_ct">
			<div class="vw50 bg01 tablePd ft_col_wht">〇〇〇〇〇</div>
			<div class="vw25"><p class="tablePd bd_bottom">〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇〇〇〇〇〇</p></div>
			<div class="vw25"><p class="tablePd bd_bottom textOverflow" title="〇〇〇〇〇〇(〇〇〇〇〇〇)">〇〇〇〇〇(〇〇〇〇〇〇〇)</p></div>
			<div class="vw25"><p class="tablePd bd_left bd_bottom bd_right">〇〇〇(〇〇〇〇〇)</p></div>

		</div>
	</div>

	<div class="footer">フッターのはず</div>
</div>
</body>
</html>






/*簡易的にリセット*/
*{
	padding: 0;
	margin: 0;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		簡易設定
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.main
{
	width: 1080px;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		boxレイアウト制御
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*基本レイアウト制御*/
.flex{
	display: flex;
	align-content: flex-start;
}
.flex_wrap{
	flex-wrap: wrap;
}

/*幅制御*/
.vw100{	width: 100vw; }
.vw50{	width: 50vw; }
.vw25{	width: 25vw; }


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		コンテンツの構造制御
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*疑似tableセルの基本padding設定*/
.tablePd{
	padding: 1em 0;
}

/*コンテンツセンタリング*/
.cont_ct{
	margin: 0 auto;
}
/*テキストセンタリング*/
.text_ct{
	text-align: center;
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		装飾周り
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*背景色*/
.bg01{
	background: #00bcd4;
}

.ft_col_wht{
	color: #FFF;
}


/*ボーダー*/
.bd_bottom {
    border-bottom: solid 0.1em #999;
}
.bd_top {
    border-top: solid 0.1em #999;
}
.bd_left {
    border-left: solid 0.1em #999;
}
.bd_right {
    border-right: solid 0.1em #999;
}


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		メディアクエリ周り
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*スマホでは縦並び*/
@media only screen and (max-width: 767px) {
	.main.flex{
		flex-direction: column;
	}
	.vw50{	width: 100%;	}
	.vw25{	width: 50%;		}
}


/*全体を見渡せていないので暫定処理*/
@media only screen and (min-width: 767px) and (max-width: 1080px) {
	p.textOverflow{
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
<!-- 追記 220207 -->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hariu_test</title>
	<style type="text/css">


			/*簡易的にリセット*/
			*{
				padding: 0;
				margin: 0;
			}

			/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
					簡易設定
			ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
			.main
			{
				width: 900px;
				padding: 4em;
			}
			/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
					boxレイアウト制御
			ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

			/*基本レイアウト制御*/
			.flex{
				display: flex;
				align-content: flex-start;
			}
			.flex_wrap{
				flex-wrap: wrap;
			}

			/*幅制御*/
			.col1{	width: 26%;	}
			.col2{	width: 70%;	}
			/*どうしても正方形がいい場合はメディアクエリで直打ち対応が無難*/

			/*-------------------------------------
				汎用ボーダー横並び用(flexbox) 下部と右
				左と上部は別設定
			-------------------------------------*/
			.bd_common{
			    border-bottom: solid 5px #ddd;
			    border-right: solid 5px #ddd;			
			}
			.bd_top{
			    border-top: solid 5px #ddd;
			}
			.bd_left{
			    border-left: solid 5px #ddd;	
			}

			/*-------------------------------------
				フォント周り
			-------------------------------------*/
			.ft_size01{
				font-size: 1.7em;
			}
			.ft_size02{
				font-size: 1.5em;
			}
			.text_ct{
				text-align: center;
			}
			.fw500{
				font-weight: 500;
			}
			.fw800{
				font-weight: 800;
			}
			/*-------------------------------------
				ボックスの配置処理
			-------------------------------------*/

			/*スマホでは縦並び*/
			@media only screen and (max-width: 767px) {
				.main{
					width: 100vw;
					padding: 0;
					margin: 0;
				}
				.main.flex{
					flex-direction: column;
				}
				.col1{	width: 100%;	}
				.col2{	width: 100%;	}
				/*縦並びなのでボーダーも変更*/
				.bd_common{
			    border-left: solid 1px #ddd;
			    border-bottom: solid 1px #ddd;
			    border-right: solid 1px #ddd;
				}
				.bd_top{
				    border-top: solid 1px #ddd;
				}

			}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="main cont_ct flex">
		<!-- 大項目1 -->
		<div class="tableView flex flex_wrap">
			<div class="col1 bd_common bd_top bd_left ft_size02 text_ct">テーマ1</div>
			<div class="col2 bd_common bd_top ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

			<div class="col1 bd_common bd_left ft_size02 text_ct">テーマ2</div>
			<div class="col2 bd_common ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

			<div class="col1 bd_common bd_left ft_size02 text_ct">テーマ3</div>
			<div class="col2 bd_common ft_size01 fw800">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

		</div>

	</div>
</div>

</body>
</html>



















コメントを残す

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