Merge pull request #5 from ryamakuchi/chapter-6

Chapter 6

Author: ryamakuchi

Diff for: my-standard-layout/MEMO.md

@@ -217,3 +217,19 @@ white-space: nowrap;も指定する
 * マウスポインタの形を指定できる
 * 色々指定できたり、画像に変えたりもできる
 
+
+# Chapter-06
+
+## border-styleに指定できる線の種類
+* none ... (初期値)
+* hidden ... (非表示)
+* dashed ... (破線)
+* dotted ... (点線)
+* inset ... (彫り込んだボックス)
+* outset ... (浮き出たボックス)
+* groove ... (彫り込んだ線)
+* ridge ... (浮き出た線)
+    * noneとhiddenは同じく非表示だが、他の線と重なったとき、
+        * noneは他の線が優先される
+        * hiddenはhiddenの線が優先される
+

Diff for: my-standard-layout/src/css/style.css

@@ -386,6 +386,35 @@ a:link, a:visited, a:hover, a:active {
  * -------------------------------- */
 .footer {
   width: 100%;
-  height: 100px;
-  background-color: #ccc;
+  padding: 20px 0 30px;
+  background: #2d3d54 url('../images/bg-footer.gif');
+  color: #fff;
+}
+.horizontal-list {
+  width: 970px;
+  margin: 0 auto;
+  text-align: right;
+  font-size: 0;
+}
+.horizontal-list .horizontal-item {
+  display: inline-block;
+  padding: 0 15px;
+  letter-spacing: 1px;
+}
+.horizontal-list .horizontal-item + .horizontal-item {
+  border-left: 1px solid #bbb;
+}
+.horizontal-list .horizontal-item a {
+  border-bottom: 1px dashed #777;
+  color: #bbb;
+  font-size: 1.1rem;
+  transition: color 0.15s;
 }
+.horizontal-list .horizontal-item a:hover {
+  color: #ddd;
+}
+.copyright {
+  margin-top: 30px;
+  text-align: center;
+  letter-spacing: 1px;
+}

Diff for: my-standard-layout/src/index.html

@@ -217,8 +217,17 @@ <h2 class="hidden">SEARCH</h2>
         <p class="text">サイト内の文章を検索できます。</p>
       </form>
     </div>
+
   </div>
+
   <footer class="footer">
+    <ul class="horizontal-list">
+      <li class="horizontal-item"><a href="#">ABOUT ME</a></li>
+      <li class="horizontal-item"><a href="#">SITE MAP</a></li>
+      <li class="horizontal-item"><a href="#">SNS</a></li>
+      <li class="horizontal-item"><a href="#">CONTACT</a></li>
+    </ul>
+    <p class="copyright">Copyright © 2015 SAMPLE SITE</p>
   </footer>
 </body>
 </html>