Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

CSSでSWOT図を描く

CSS&HtmlでSWOT図を描いてみました。table要素で9マスの表を作り幅を変えたり色をつけたりしているだけです。Htmlのほうはできるだけシンプルにし、table要素に「.swot」を追加するだけで以下のようなSWOT図になります。

css_swot図

ソースコード

<style>

table.swot{
	width : 600px;
	height: 600px;
	border-collapse: separate;
	border-spacing:8px;
	/* border: 1px solid; */
}
.swot caption{
	font-size: 1.8em;
}
.swot td{
	/* text-align: left; */
	border: 1px solid;
	padding: 4px;
	vertical-align: top;
}
.swot td p{
	margin: 0;
	color:red;
}
.swot td p:first-letter{
	font-size: 2em;
}
/* 1行目 */
.swot tr:nth-child(1){
	text-align: center;
	height: 1em;
}
.swot tr:nth-child(1) td{
	vertical-align: middle;
}
/* 1列目 */
.swot td:nth-child(1){
  	text-align: center;
	align-items: center;
	vertical-align: middle;
	width: 1em;
	padding: 10px;
}

/* cell1_1 */
.swot tr:nth-child(1) td:nth-child(1){
	border: none;
}
/* cell1_2 */
.swot tr:nth-child(1) td:nth-child(2){
	background: #3fc1c9;
}
/* cell1_3 */
.swot tr:nth-child(1) td:nth-child(3){
	background: #ffaec8;
}
/* cell2_1 */
.swot tr:nth-child(2) td:nth-child(1){
	background: dimgray;
	color: #fff;
}
/* cell2_2 */
.swot tr:nth-child(2) td:nth-child(2){
	background: #c3d7d8;
	opacity: 0.6;
}
/* cell2_3 */
.swot tr:nth-child(2) td:nth-child(3){
	background: #F7CDDF;
	opacity: 0.6;
}
/* cell3_1 */
.swot tr:nth-child(3) td:nth-child(1){
	background: dodgerblue;
	color: white;
}
/* cell3_2 */
.swot tr:nth-child(3) td:nth-child(2){
	background: #E6E8FB;
	opacity: 0.6;
}
/* cell3_3 */
.swot tr:nth-child(3) td:nth-child(3){
	background: #FBE6EF;
	opacity: 0.6;
}



</style>

<table class="swot">
	<caption>Title</caption>
	<tbody>
	<tr>
		<td></td>
		<td>ポジティブ(+)</td>
		<td>ネガティブ(-)</td>
	</tr>
	<tr>
		<td>内的要因</td>
		<td>
			<p>S:強み</p>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</td>
		<td>
			<p>W:弱み</p>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>

		</td>
	</tr>
	<tr>
		<td>外的要因</td>
		
		<td>
			<p>O:機会</p>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</td>
		<td>
			<p>T:恐れ</p>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</td>
	</tr>
	</tbody>
</table>

参考リンク