世界遺産

- World Heritage Site -

注意:遺産の名称、地名等、公式のものではありません

SuperSQL質問文・CSS

使用したSuperSQL質問文は以下の全12個である

●type.ssql(分類別の見出しのページ)
GENERATE HTML{
'分類別リスト'@{class='subtitle'}! 
{[{'○', null((asc)t.id), link(t.name, 'ftype.ssql', t.id)}@{font-size=24}]!}@{class='box', line-height=1.8}! 
' '@{height=50}!  a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM type t;
●ftype.ssql(分類ごとのページ)
FOREACH t.id
GENERATE HTML{
t.name@{class='subtitle'}! 
{t.description! {'全', n.count, '件'}}@{class='box', font-size=24}! 
{'●地域ごとに探す'@{font-size=24}! 
{[link((asc)r.name@{width=200}, 'ftyperegion.ssql', t.id, r.id)],2!}@{class='small-box'}! 
{'●一覧'@{font-size=24}! 
{[{link((asc)h.name@{width=800},'fheritage.ssql', h.id), 
    [c.name]!@{width=400}}!line(0.5, '393939')]!}@{class='small-box'}}@{class='small-box'}}@{class='box'}! 
link('[分類別リストに戻る]', 'type.ssql',t.id)! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM type t, heritage h, region r, numpertype n, country c, belong b
WHERE t.id=h.type AND h.region=r.id AND n.id=t.id AND b.heritage=h.id AND b.country=c.id;
●ftyperegion.ssql(分類ごとのページの中の地域ごとのページ)
FOREACH t.id, r.id
GENERATE HTML{
{r.name, 'の', t.name}@{class='subtitle'}! 
{[{link((asc)h.name@{width=800},'fheritage.ssql', h.id), [c.name]!@{width=400}}!line(0.5, '393939')]!}@{class='box'}! 
' '@{height=50}! link('[分類別リストに戻る]', 'type.ssql', t.id)! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM region r, type t, heritage h, country c, belong b
WHERE r.id=h.region AND t.id=h.type AND c.id=b.country AND h.id=b.heritage;
●region.ssql(地域別の見出しのページ)
GENERATE HTML{
'地域別リスト'@{class='subtitle'}! 
{[{'○', link((asc1)r.name, 'fregion.ssql', r.id)}@{font-size=24}]!}@{class='box', line-height=1.8}! 
' '@{height=50}! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM region r;
●fregion.ssql(地域ごとのページ)
FOREACH r.id
GENERATE HTML {
r.name@{class='subtitle'}! 
{[{'●', link((asc1)c.name@{font-size=26}, 'fcountry.ssql', c.id)!
     {[null((asc2)t.id), t.name@{valign='top', width=150}, 
        [link(h.name@{width=800}, 'fheritage.ssql', h.id), (asc3)h.year]!]!}@{class='small-box'}}! line(0.5, '393939')]!}@{class='box'}! 
' '@{height=50}! link('[地域別リストに戻る]', 'region.ssql', r.id)! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM heritage h, type t, belong b, country c, region r
WHERE h.region=r.id AND h.id=b.heritage AND c.id=b.country AND h.type=t.id;
●country.ssql(保有国別の見出しのページ)
GENERATE HTML{
'保有国別リスト'@{class='subtitle'}! 
{[link((asc)c.name@{width=400, height=55}, 
'fcountry.ssql', c.id)],3!8%}@{class='select-box'}! 
' '@{height=50}! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM country c;
●fcountry.ssql(保有国ごとのページ)
FOREACH c.id
GENERATE HTML{
c.name@{class='subtitle'}! {{{'地域: ', r.name}! {'首都: ', c.capital}! {'保有世界遺産数: ', n.num}! {'保有文化遺産数: ', n.cultural_num}! 
{'保有自然遺産数: ', n.natural_num}! {'保有複合遺産数: ', n.complex_num}}@{valign='top', width=380}, 
image(c.img, '')@{height=300}}@{class='box'}! 
{'● 世界遺産一覧'@{font-size=28}! 
{[null((asc1)t.id), t.name@{valign='top', width=150}, [link(h.name@{width=800}, 'fheritage.ssql', h.id), (asc2)h.year]!]!}@{class='small-box'}}@{class='box'}! 
' '@{height=40}! link('[保有国別リストに戻る]', 'country.ssql', c.id)! a('[TOPに戻る]', 'index.html') 
}@{cssfile='heritage.css', id='wrapper'}
FROM heritage h, country c, region r, belong b, numpercountry n, type t
WHERE r.id=h.region AND c.id=b.country AND h.id=b.heritage AND c.id=n.id AND h.type=t.id;
●feature.ssql(特徴別の見出しのページ)
GENERATE HTML{
'特徴別リスト'@{class='subtitle'}! 
{[{'○', link(f.name@{font-size=24}, 'ffeature.ssql', f.id)}]!}@{class='box', line-height=1.8}! 
' '@{height=50}! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM feature f;
●ffeature.ssql(特徴ごとのページ)
FOREACH f.id
GENERATE HTML{
f.name@{class='subtitle'}! 
{[{link((asc)h.name@{width=500}, 'fheritage.ssql', h.id), image(h.img, './img')@{height=200}}! line(0.5, '393939')@{width=900}]!}@{class='box'}! 
' '@{height=50}! link('[特徴別リストに戻る]', 'feature.ssql', f.id)! 
a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM heritage h, feature f, classified cl
WHERE h.id=cl.heritage AND f.id=cl.feature;
●year.ssql(登録年別の見出しのページ)
GENERATE HTML{
'登録年別リスト'@{class='subtitle'}! 
{[link((asc)h.year@{width=150, height=55, font-size=24}, 'fyear.ssql', h.year)],5!}@{class='box'}! 
' '@{height=50}!  a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM heritage h;
●fyear.ssql(登録年ごとのページ)
FOREACH h.year
GENERATE HTML{
{h.year,'年登録'}@{class='subtitle'}! 
{[{'●', link((asc1)c.name, 'fcountry.ssql', c.id)}@{font-size=26}! 
{[null((asc2)t.id),t.name@{width=150, valign='top'}, 
      [link(h.name@{width=900}, 'fheritage.ssql', h.id)]!]!}@{class='small-box'}! line(0.5, '393939')]!}@{class='box'}! 
' '@{height=50}! link('[登録年別リストに戻る]', 'year.ssql', h.year)! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM heritage h, type t, country c, belong b
WHERE h.type=t.id AND h.id=b.heritage AND c.id=b.country;
●fheritage.ssql(遺産ごとのページ)
FOREACH h.id
GENERATE HTML{
h.name@{class='subtitle'}! 
{{{'分類: ', t.name}! {'保有国: '@{valign='top'}, [c.name]!}! 
  {'所在地域: ', r.name}! {'登録年: ', h.year}! {'特徴: ', f.name}}@{valign='top', width=400}, 
image(h.img,'')@{height=300}}@{class='box'}! 
' '@{height=50}! link({'[分類に戻る]'},'ftype.ssql', t.id)! link('[地域に戻る]', 'fregion.ssql', r.id)! link('[保有国に戻る]', 'fcountry.ssql', c.id)! link('[登録年に戻る]', 'fyear.ssql', h.year)! a('[TOPに戻る]', 'index.html')
}@{cssfile='heritage.css', id='wrapper'}
FROM (((((heritage h join type t on h.type=t.id) 
   join region r on h.region=r.id) 
    join belong b on h.id=b.heritage) 
     join country c on b.country=c.id) 
      left outer join classified cl on h.id=cl.heritage) 
       left outer join feature f on cl.feature=f.id;



作成したCSSは以下の通りである

●heritage.css(コメントで簡単な説明を書いた)
/* 全体のスタイル */
html{
  scroll-behavior: smooth;
}

body{
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #fffcef;
  color: #393939;
  font-family: "游ゴシック", "ヒラギノ角ゴシック", "メイリオ", sans-serif;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: 1.5px;
  margin: 0;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

li{
  display: inline-block;
}

p{
  margin: 0;
}

pre{
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 20px;
}

a{
  text-decoration: none;
  color: #4f886d;
  transition-duration: 0.2s;
}

a:hover{
  color: #ff7f5b;
}

h3{
 display: inline-block;
 font-size: 36px;
 margin-top: 70px;
 margin-bottom: 50px;
 color: #FFFCEF;
 background-color: #393939;
 padding: 3px 12px;
 font-weight: 400;
}

/* SuperSQL質問文から生成したHTMLのためのスタイル */
#wrapper{
  margin: 60px;
}

.subtitle{
  display: inline-block;
  font-size: 38px;
  font-weight: 400;
  color: #fffcef;
  background-color: #393939;
}

.box{
	margin-top: 60px;
}

.small-box{
  margin-top: 30px;
  margin-bottom: 30px;
}

.select-box{
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 20px;
  margin-right: 20px;
}

/* index.htmlのヘッダーのスタイル */
#header{
  top: 0;
  right: 0;
  left: 0;
  position: fixed;
  margin-bottom: 20px;
  min-height: 60px;
  background-color: rgba(57,57,57,0.8);
  color: #FFFCEF;
  z-index: 7;
}

.header-contents{
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  box-sizing: border-box;
}

.header-tab{
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  vertical-align: middle;
  list-style: none;
  font-size: 0;
  position: relative;
  text-align: center;
}

.header-tab a{
  color: #FFFCEF;
  font-size: 16px;
  font-weight: 400;
  margin: 15px 10px;
  padding: 5px 10px;
  display: block;
}

.header-tab a:hover{
  background-color: rgba(255,127,91,0.8);
}

/* index.htmlのデーターベースの対象名のセクションのスタイル */
#top{
  height: 100vh;
  background: url("./img/bg1.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center bottom;
  position: relative;
}

#top::before{
  background-color: rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.title{
  text-align: center;
  color: #FFFCEF;
  position: absolute;
  width: 500px;
  height: 200px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-shadow:2px 2px 30px #393939;
}

.title h1{
  font-size: 80px;
  margin: 0 auto;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.title h2{
  font-size: 30px;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* index.htmlの見出しへのリンクのセクションのスタイル */
#link{
  color: #393939;
  text-align: center;
  padding-bottom: 60px;
}

#link p{
  margin-bottom: 30px;
}

#link a{
  display: block;
  width: 130px;
  text-align: center;
  background-color: #7bb197;
  border-radius: 30px;
  padding: 3px 12px;
  font-size: 24px;
  color: #FFFCEF;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 15px;
  margin-right: 15px;
}

#link a:hover{
  background-color: #FF7F5B;
}

/* index.htmlの第3課題からの設計変更のセクションのスタイル */
#design{
  background: url("./img/bg2.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center center;
  position: relative;
  text-align: center;
  padding-bottom: 70px;
}

#design::before{
  background-color: rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

.white-h3{
  color: #393939;
  background-color: #FFFCEF;
  box-shadow: 2px 2px 30px #393939;
}

.text-box{
  background-color: rgba(57, 57, 57, 0.9);
  color: #fffcef;
  width: 65%;
  margin: auto;
  padding: 30px 40px;
  text-align: left;
}


/* index.htmlのSuperSQL質問文・CSSのセクションのスタイル */
#sql{
  text-align: center;
  padding-bottom: 60px;
}

#sql p{
    padding-bottom: 30px;
}

#sql pre{
  padding: 20px;
  border: 1px solid #4f886d;
}

.question{
  text-align: left;
  width: 70%;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* index.htmlの意見・感想のセクションのスタイル */
#opinion{
  background: url("./img/bg3.jpg") no-repeat fixed;
  background-size: cover;
  background-position: center top;
  position: relative;
  text-align: center;
  padding-bottom: 70px;
}

#opinion::before{
  background-color: rgba(255,255,255,0.3);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

/* index.htmlのフッターのセクションのスタイル*/
#footer{
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
  background-color: rgba(57,57,57,0.8)
}