世界遺産
- 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) }