【HTML/CSS】 和のテーブルデザイン Japanese Table Design

和のテーブルデザイン レイアウト(HTML/CSS)

日本の美しい伝統色を紹介されている「伝統色のいろは(-Traditional colors of Japan-)」さんの日本の色を使ってテーブルのCSSデザインを作ってみました。

伝統色のいろはさんでは時代ごとに色の説明が解説されています。色の説明を見ているとなんだか昔の日本の生活の様子はどうな感じだったろうかと思いを馳せて気持ちがほっこりとしました。

I made Japanese table design with “IROHA -Traditional colors of Japan-“.  You can see Japanese color’s details on IROHA’s page. I think you can imagine how japanese people lived the old time.

WordPressでのテーブル・表の作り方はこちらの記事をご覧ください。

日本の伝統色で作るテーブルデザイン

 

古代の色テーブル(Ancient times)

ヘッダーカラー:緑青(ろくしょう)
ボディ・フッター見出しカラー:白練(しろねり)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点
HTML

 

CSS

 

奈良の色テーブル(Nara period | AD 710 to 794)

ヘッダーカラー:紅の八塩(くれないのやしお)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 奈良の色(伝統色のいろは)

HTML

 

CSS

 

平安の色テーブル(Heian period | AD 794 to 1185)

ヘッダーカラー:浅紫(あさむらさき)
ボディ・フッター見出しカラー(奇数行):桜色(さくらいろ)
ボディ・フッター見出しカラー(偶数行):聴色(ゆるしいろ)
データカラー(偶数行):卯の花色(うのはないろ)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 平安の色(伝統色のいろは)

HTML

 

CSS

 

鎌倉の色テーブル(Kamakura period | AD 1185 to 1333)

ヘッダーカラー:勝色(かついろ)
ボディ・フッター見出しカラー:胡粉色(ごふんいろ)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 鎌倉の色(伝統色のいろは)

HTML

 

CSS

 

安土桃山の色テーブル(Azuchi-Momoyama period | AD 1573 to 1603)

ヘッダーカラー:群青色(ぐんじょういろ)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 安土桃山の色(伝統色のいろは)

HTML

 

CSS

 

江戸の色テーブル(Edo period | AD 1603 to 1868)

ヘッダーカラー:紺鼠(こんねず)
ボディ・フッター見出しカラー:小町鼠(こまちねず)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 江戸の色(伝統色のいろは)

HTML

 

CSS

 

明治の色テーブル(Meiji period | AD 1868 to 1912)

ヘッダーカラー:薔薇色(ばらいろ)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 明治の色(伝統色のいろは)

HTML

 

CSS

 

近代の色テーブル(modern period)

ヘッダーカラー:若葉色(わかばいろ)

一言選ぶならコレ見た目はGood
項目商品1商品2
見た目90点100点
ニオイ100点50点
100点50点
価格100点50点

→ 近代の色(伝統色のいろは)

HTML

 

CSS

 

▼可愛いテーブルデザインも作りました▼

 

コメント