コピペで使える和風の表【CSS】※随時更新

CSS コピペ

基本理念などで使える和風の表

表示見本

基本理念

01
◯◯◯◯◯◯◯◯◯◯◯◯◯
02
◯◯◯◯◯◯◯◯◯◯◯◯◯
03
◯◯◯◯◯◯◯◯◯◯◯◯◯
04
◯◯◯◯◯◯◯◯◯◯◯◯◯
05
◯◯◯◯◯◯◯◯◯◯◯◯◯
06
◯◯◯◯◯◯◯◯◯◯◯◯◯

HTML

<code><div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">基本理念</span></p>
<div class="container-greeting-b">
	<div class="box-g-a">01</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">02</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">03</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">04</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">05</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-a">06</div>
	<div class="box-g-b">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
</div></code>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.container-greeting-b{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: row;
	background-color:#FFF;
	border-bottom: 1px solid #604c3e;
	margin:0 1em;
	align-items:center;
}
.box-g-a{
	margin:1em;
	font-size: 1.5em;
}
.box-g-b{
	
}
.box-g-c{
	padding: 1em 2em;
	min-width: 8em;
}
.box-g-d{
	padding: .3em .5em;
	min-width: 8em;
	border-top: 4px double #604c3e;
	border-bottom: 4px double #604c3e;
}
.box-g-e{
	padding: 1em 2em;
	min-width: 8em;
}

法人概要などで使える和風の表

表示見本

法人概要

法人名
株式会社〇〇◯◯
所在地
〒〇〇〇-〇〇〇◯　〇〇〇〇〇〇〇〇〇〇〇〇
電話番号
〇〇-〇〇〇〇-〇〇〇〇
FAX番号
〇〇-〇〇〇〇-〇〇〇〇
経営事業
◯◯◯◯◯◯◯◯◯◯◯◯◯
敷地面積
◯◯◯◯◯◯◯◯◯◯◯◯◯
建物面積
◯◯◯◯◯◯◯◯◯◯◯◯◯

HTML

<div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">法人概要</span></p>
<div class="container-greeting-b">
	<div class="box-g-c">法人名</div>
	<div class="box-g-c">株式会社〇〇◯◯</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">所在地</div>
	<div class="box-g-c">〒〇〇〇-〇〇〇◯　〇〇〇〇〇〇〇〇〇〇〇〇</div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">電話番号</div>
	<div class="box-g-c"><a href="tel:00000000">〇〇-〇〇〇〇-〇〇〇〇</a></div>
</div>
<div class="container-greeting-b">
	<div class="box-g-c">FAX番号</div>
	<div class="box-g-c">〇〇-〇〇〇〇-〇〇〇〇</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">経営事業</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">敷地面積</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
	<div class="container-greeting-b">
	<div class="box-g-c">建物面積</div>
	<div class="box-g-c">◯◯◯◯◯◯◯◯◯◯◯◯◯</div>
</div>
</div>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.container-greeting-b{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: row;
	background-color:#FFF;
	border-bottom: 1px solid #604c3e;
	margin:0 1em;
	align-items:center;
}
.box-g-c{
	padding: 1em 2em;
	min-width: 8em;
}

情報公開・定款一覧などで使える和風の表

表示見本

情報公開

定款ダミー
定款（最終改正）
定款ダミー
定款（最終改正）
定款ダミー
定款（最終改正）

HTML

<div class="container-greeting-a">
<p style="text-align: center;"><span class="veu_leadTxt">情報公開</span></p>

	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
	<div class="box-g-d">定款ダミー</div>
	<div class="box-g-e">定款（最終改正）</div>
</div>

CSS

.container-greeting-a{
    display: -webkit-flex; /* Safari */
    display: flex;
	flex-direction: column;
	background-color:#FFF;
	max-width:700px;
	padding: 1em;
	margin: 0 auto;
}
.box-g-e{
	padding: 1em 2em;
	min-width: 8em;
}

この記事を書いた人

山崎 大祐

大阪出身。千葉県松戸市在住。2児の父です。WordPressの構築を60サイト超えました。営業経験を生かしたSEMを得意としております。（企画／デザイン／構築／運営）
すきなもの「赤色・キューブ・コンクリート」

詳細はこちら 記事一覧