OSDN Git Service

WebテンプレートをHTML5に対応させる / Web template corresponds HTML5.
authorDeskull <desull@users.sourceforge.jp>
Sat, 17 Mar 2018 08:05:41 +0000 (17:05 +0900)
committerDeskull <desull@users.sourceforge.jp>
Sat, 17 Mar 2018 08:05:41 +0000 (17:05 +0900)
src/hengband.css [new file with mode: 0644]
src/image/hengband_title.png [new file with mode: 0644]
src/image/tama.gif [new file with mode: 0644]
src/template.html

diff --git a/src/hengband.css b/src/hengband.css
new file mode 100644 (file)
index 0000000..1d48741
--- /dev/null
@@ -0,0 +1,223 @@
+\r
+a:link                 { color: #99BB99;}\r
+a:visited      { color: #99AA99;}\r
+a:active       { color: #DDF0DD;}\r
+a:hover                { color: #DDF0DD;}\r
+\r
+body {\r
+       min-height: 100vh;\r
+\r
+       color: #D0D0D0;\r
+       background-color: #300900;\r
+       display: flex;\r
+       flex-direction: column;\r
+       justify-content: space-between;\r
+       align-content: center;\r
+\r
+       padding: 0px;\r
+       border: 0px;\r
+       margin: 0px;\r
+       font-family:"メイリオ","Meiryo",Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;\r
+       font-size: 1.0rem;\r
+       line-height: 1.2rem;\r
+}\r
+\r
+#wrapper{\r
+       background-color: #000000;\r
+       min-width: 400px;\r
+       max-width: 800px;\r
+       text-align: left;\r
+       position: relative;\r
+       padding: 0px 0px 0px 0px;\r
+       border: 0px;\r
+       margin: 0 auto;\r
+}\r
+\r
+/* ヘッダ/フッタ ////////////////////////////////////////////////// */\r
+\r
+header{\r
+       background-color : #000000;\r
+       display: flex;\r
+       flex-direction: column;\r
+}\r
+\r
+footer\r
+{\r
+       background-color: #000000;\r
+       padding: 10px 10px;\r
+\r
+       display: flex;\r
+       flex-direction: row;\r
+       justify-content: space-around;\r
+}\r
+\r
+footer > section\r
+{\r
+       font-size: 70%;\r
+       line-height: 100%;\r
+}\r
+\r
+\r
+/* タイトル系統 ////////////////////////////////////////////////// */\r
+\r
+section#title\r
+{\r
+       width: 80vw;\r
+       margin-right : auto;\r
+       margin-left  : auto;\r
+\r
+       display: flex;\r
+       justify-content: space-between;\r
+       align-content: center;\r
+       align-items: end;\r
+}\r
+\r
+img#hengTitle\r
+{\r
+       width: 25vw;\r
+       height: auto;\r
+}\r
+\r
+img.tama4\r
+{\r
+       width: 8vw;\r
+}\r
+\r
+img.tama3\r
+{\r
+       width: 5vw;\r
+}\r
+\r
+img.tama2\r
+{\r
+       width: 2vw;\r
+}\r
+\r
+img.tama1\r
+{\r
+       width: 1vw;\r
+}\r
+\r
+\r
+\r
+/* メインメニュー系統 ////////////////////////////////////////////////// */\r
+\r
+section#mainMenu\r
+{\r
+       width: 100vw;\r
+       margin-right : auto;\r
+       margin-left  : auto;\r
+       background-color: #000000;\r
+\r
+       justify-content: center;\r
+       align-content: center;\r
+       display: flex;\r
+}\r
+\r
+section#mainMenu > a {\r
+       position: relative;\r
+       display: inline-block;\r
+       padding: 0.25em 0.5em;\r
+       text-decoration: none;\r
+       background: #302010;\r
+       color: #FFFFFF;\r
+       border-radius: 0.3vw;\r
+       box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);\r
+       font-weight: bold;\r
+       border: solid 2px #d27d00;/*線色*/\r
+}\r
+\r
+section#mainMenu > span {\r
+       position: relative;\r
+       display: inline-block;\r
+       padding: 0.25em 0.5em;\r
+       text-decoration: none;\r
+       color: #908080;\r
+       background: #442200;\r
+       border-radius: 0.3vw;\r
+       box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);\r
+       font-weight: bold;\r
+       border: solid 2px #d27d00;/*線色*/\r
+}\r
+\r
+section#mainMenu > a:hover\r
+{\r
+       background: #A06535;\r
+       box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);\r
+}\r
+\r
+.content\r
+{\r
+       padding: 10px;\r
+       margin:  10px 30px;\r
+}\r
+\r
+.update{\r
+       text-align: center;\r
+       padding: 6px;\r
+       margin:  30px 5px;\r
+}\r
+\r
+\r
+ul{\r
+       padding: 0px;\r
+       border:  0px;\r
+       margin:  0px 15px 0px 15px;\r
+}\r
+\r
+li{\r
+       padding: 0px;\r
+}\r
+\r
+.image {\r
+       text-align: center;\r
+       padding: 10px;\r
+}\r
+\r
+H2{\r
+       padding: 10px 10px 6px 10px;\r
+       border: 3px #554433 solid;\r
+       background-color: #000000;\r
+}\r
+\r
+H3{\r
+       padding: 5px 5px;\r
+       margin:  0px 5px;\r
+       border: 1px #554433 solid;\r
+       background-color: #000000;\r
+}\r
+\r
+H4{\r
+       padding: 5px 5px;\r
+       margin:  2px 2px;\r
+       background-color: #000000;\r
+}\r
+\r
+.strong\r
+{\r
+       font-weight: bold;\r
+}\r
+\r
+/* common footer */\r
+\r
+.footer_banner\r
+{\r
+       float: right;\r
+}\r
+\r
+\r
+.topimage\r
+{\r
+       border: 3px #554433 solid;\r
+       text-align: center;\r
+}\r
+\r
+pre {\r
+       white-space: -moz-pre-wrap; /* Mozilla */\r
+       white-space: -pre-wrap;     /* Opera 4-6 */\r
+       white-space: -o-pre-wrap;   /* Opera 7 */\r
+       white-space: pre-wrap;      /* CSS3 */\r
+       word-wrap: break-word;      /* IE 5.5+ */\r
+}\r
+\r
+\r
diff --git a/src/image/hengband_title.png b/src/image/hengband_title.png
new file mode 100644 (file)
index 0000000..8bec707
Binary files /dev/null and b/src/image/hengband_title.png differ
diff --git a/src/image/tama.gif b/src/image/tama.gif
new file mode 100644 (file)
index 0000000..bec6537
Binary files /dev/null and b/src/image/tama.gif differ
index ac2755d..bba0763 100644 (file)
@@ -1,95 +1,61 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 
-<HTML>
-
-       <HEAD>
-               <LINK rev=made href="mailto:hengband-dev@lists.sourceforge.jp">
-               <META http-equiv="Content-Type" content="text/html;charset=EUC-JP">
+<html lang="jp">
+       <head>
+               <meta charset="utf-8"/>
+               <link rev=made href="mailto:hengband-dev@lists.sourceforge.jp">
                <link rel="stylesheet" type="text/css" href="hengband.css">
-               <TITLE>ÊѶòÈÚÅÜ ¸ø¼°WEB</TITLE>
-       </HEAD>
-
-       <BODY>
-
-               <div id="wrapper">
-
-                       <div id="header">
-
-                               <table class="title">
-                                       <tr>
-                                               <td>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                               </td>
-
-                                               <td rowspan="2">
-                                                       <img src="hengband_title.png" alt="ÊѶòÈÚÅÜ Hengband">
-                                               </td>
-
-                                               <td>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                               </td>
-
-                                       </tr>
-                                       <tr>
-                                               <td>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                               </td>
-
-                                               <td>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                                       <img src="tama.gif" alt="tama" width=33 height=47>
-                                               </td>
-
-                                       </tr>
-
-                               </table class="title">
-
-                       </div>
-
-                       <div class="main_menu_bar">
-                               <table class="main_menu_bar">
-                                       <tr>
-                                               <td class="main_menu"><a href="index.html">¥È¥Ã¥×</a></td>
-                                               <td class="main_menu"><a href="download.html">¥À¥¦¥ó¥í¡¼¥É</a></td>
-                                               <td class="main_menu"><a href="score.html">¥¹¥³¥¢</a></td>
-                                               <td class="main_menu"><a href="lists.html">¥³¥ß¥å¥Ë¥Æ¥£</a></td>
-                                       </tr>
-                                       <tr>
-                                               <td class="main_menu"><a href="history.html">¥Ð¡¼¥¸¥ç¥óÍúÎò</a></td>
-                                               <td class="main_menu"><a href="link.html">´ØÏ¢¥ê¥ó¥¯</a></td>
-                                               <td class="main_menu"><a href="jlicense.txt">Ãøºî¸¢É½µ­</a></td>
-                                               <td class="main_menu"><a href="en/index.html">English page</a></td>
-                                       </tr>
-                               </table>
-                       </div>
-<!--- Templete Header --->
-
-
-
+               <title>変愚蛮怒 公式WEB</title>
+       </head>
+
+       <body>
+
+               <header>
+
+                       <section id="title">
+                               <img class="tama1" src="image/tama.gif" alt="tama">
+                               <img class="tama2" src="image/tama.gif" alt="tama">
+                               <img class="tama3" src="image/tama.gif" alt="tama">
+                               <img class="tama4" src="image/tama.gif" alt="tama">
+                               <img id="hengTitle" src="image/hengband_title.png" alt="変愚蛮怒 Hengband">
+                               <img class="tama4" src="image/tama.gif" alt="tama">
+                               <img class="tama3" src="image/tama.gif" alt="tama">
+                               <img class="tama2" src="image/tama.gif" alt="tama">
+                               <img class="tama1" src="image/tama.gif" alt="tama">
+                       </section>
+
+                       <section id="mainMenu">
+                               <a href="index.html">トップ</a>
+                               <a href="download.html">ダウンロード</a>
+                               <a href="score.html">スコア</a>
+                               <a href="lists.html">コミュニティ</a>
+                               <a href="history.html">バージョン履歴</a>
+                               <a href="link.html">関連リンク</a>
+                               <a href="jlicense.txt">著作権表記</a>
+                               <span>English(ComingSoon)</span>
+                       </section>
+
+               </header>
+
+               <div id="main">
+               </div>
 
+               <footer>
 
+                       <section>
+                               各ページへのリンクは御自由にどうぞ。/ Link Free.<br>
+                               2018 Hengband Dev Team. <a href="mailto:hengband-dev@lists.sourceforge.jp">hengband-dev@lists.sourceforge.jp</a><br>
+                       </section>
 
-<!--- Templete Footer --->
-                       <div class="footer">
-                               <a href="http://sourceforge.jp/" class="footer_banner"><img src="http://sourceforge.jp/sflogo.php?group_id=541" width="96" height="31" border="0" alt="SourceForge.jp"></a>
-                               ¥Ú¡¼¥¸¤Ø¤Î¥ê¥ó¥¯¤Ï¸æ¼«Í³¤Ë¤É¤¦¤¾¡£/Link Free. 2012 Hengband Dev Team.<br>
-                               <a href="mailto:hengband-dev@lists.sourceforge.jp">hengband-dev@lists.sourceforge.jp</a><br>
-                       </div>
+                       <section>
+                               Powered by <a href="http://sourceforge.jp/" class="footer_banner">
+                               <img src="http://sourceforge.jp/sflogo.php?group_id=541" border="0" alt="SourceForge.jp">
+                               </a>
+                       </section>
 
-               </div>
+               </footer>
 
-       </BODY>
+       </body>
 
-</HTML>
+</html>