リンクバナー作成、リンクページの雛形が完成した。

backnumber.html

@@ -0,0 +1,69 @@
+<div class="sub-title">
+  <img id="backnumber_title" src="./image/title/backnumber.png">
+</div>
+
+<article id="page-backnumber">
+  <p id="description">過去の高専祭サイトのリンクです。</p>
+  <div id="backnumber-contents">
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2008_kousen_fes.png">
+      </a>
+      <p>2008年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2009_kousen_fes.png.jpg">
+      </a>
+      <p>2009年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2010_kosen_fes.png">
+      </a>
+      <p>2010年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2011_kosen_fes.png">
+      </a>
+      <p>2011年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2012_kousen_fes.png">
+      </a>
+      <p>2012年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2013_kousen_fes.png">
+      </a>
+      <p>2013年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2014_kosen_fes.png">
+      </a>
+      <p>2014年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2015_kousen_fes.png">
+      </a>
+      <p>2015年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2016_kousen_fes.png">
+      </a>
+      <p>2016年</p>
+    </div>
+    <div class="link">
+      <a href="#">
+        <img src="./image/backnumber_banner/2017_kousen_fes.png">
+      </a>
+      <p>2017年</p>
+    </div>
+  </div>
+</article>

css/backnumber.css

@@ -0,0 +1,38 @@
+#backnumber_title {
+  margin: 5%;
+  width: 70%;
+  max-width: 400px;
+  max-height: 71px;
+}
+
+#page-backnumber {
+  margin: 0 5% 5% 5%;
+  height: 90%;
+  min-height: 600px;
+  background-color: white;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+}
+
+#description {
+  padding-top: 5%;
+}
+
+#backnumber-contents {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+}
+.link {
+  margin: 2% 0;
+  text-align: center;
+}
+.link a img {
+  background-color: #577342;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+}
+.link p {
+  margin: 0;
+  font-size: small;
+}