【ドットインストール】第4回！256times参加レポート！【学習メモ】 |

みなさんこんにちは！おさかなです！

今回は「第4回256times」について、書いていこうと思います！

「256times」って何？という方はコチラをチェック！

今回もドットインストールが用意している、「プレイグラウンド」という環境でコーディングしていきました…！

プレイグラウンドの利用はコチラ！
※ドットインストールのアカウントを取得しておく必要があります…！

それでは、レッツゴー！！！！！

想定読者
・ドットインストールで学習中の方
・256timesって何？という方
・ソースコードを添削してほしい方

第4回の課題は？
実際に参加した感想
レビューコードまとめ
おさかなの今後の課題
感想・まとめ

第4回の課題は？

課題の詳細についてはコチラ！

第4回の課題は「ページネーション」でした…！

今回もいつも通りの流れです…！

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始
・22:00 番組終了

「生放送見逃した！」って方も、「アーカイブ」が残っているので「コチラ」から見ることができます…！(よかった…！)

実際に参加した感想

今回は調べながら、なんとかいい感じにマークアップすることができました…！

それでもnavタグを使用していたり、transitionを使用してアニメーションを付けたり、様々なアレンジを加えている方がたくさんいて、本当に勉強になりました…！

コードの正解は1つではないけれど、出来る限りキレイで読みやすいコードを書くことを心掛けていきたいなと思いました…！

次回もたのしみです…！

おさかなのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li class="left">&laquo;</li>
    <li>1</li>
    <li class="select">2</li>
    <li>3</li>
    <li>&hellip;</li>
    <li>9</li>
    <li class="right">&raquo;</li>
  </ul>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

ul {
  list-style: none;
  display: flex;
  color: blue;
  width: 500px;
}
li {
  flex-basis: 50px;
   border: 1px solid #ccc;
   padding: 20px;
   text-align: center;
   font-size: 20px;
}
li:hover {
  cursor: pointer;
  color: lightblue;
}
.left {
  border-radius: 10px 0 0 10px;
}
.right {
  border-radius: 0 10px 10px 0;
}
.select {
  font-weight: bold;
}

実は最初は「border-radius」の「部分指定」が上手くできていなくて、こんな感じ↓だったのですが、最終的にはキレイな感じになりました…！

レビューコードまとめ

レビューコード1

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページネーション</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <ul>
      <li><a href="">&lt;&lt;</a></li>
      <li class="current"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">...</a></li>
      <li><a href="">9</a></li>
      <li><a href="">&gt;&gt;</a></li>
    </ul>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 350px;
  margin: 50px auto;
}

ul {
  list-style: none;
  display: flex;
  /*justify-content: space-between;*/
  border: solid 1px #ccc;
  border-radius: 4px;
}

ul li {
  width: 50px;
  /*border-right: 1px solid #ccc;*/
}

ul li + li {
  border-left: 1px solid #ccc;
}

/*ul li:last-child {*/
/*  border-right: none;*/
/*}*/

ul li:hover {
  opacity: 0.5;
}

ul li a {
  display: block;
  text-decoration: none;
  color: blue;
  font-size: 18px;
  text-align: center;
}

ul li.current {
  font-weight: bold;
  background: blue;
  color: white;
}

ul li.current > a {
  color: white;
}

レビューコード2

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <script src="https://kit.fontawesome.com/ea70e301b1.js"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="pagination">
    <a href="" class="prev page-number">
      <i class="fas fa-angle-double-left"></i>
    </a>
    <a href="" class="page-number"><span>1</span></a>
    <a class="page-number"><span>2</span></a>
    <a class="page-number"><span>3</span></a>
    <span>…</span>
    <a class="page-number"><span>9</span></a>
    <a class="page-number">
      <i class="fas fa-angle-double-right"></i>
    </a>
  </div>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

body {
  padding-top: 200px;
}

.pagination{
  font-size:18px;
  padding:1em;
  text-align:center;
  /*margin-top:200px;*/
}
.page-number{
  padding:1em;
  border: 1px solid #333;
  
}
a {
  text-decoration: none;
}
a:hover{
  background:#333;
  color:white;
}

レビューコード3

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="pagination">
    <a href="#">&lt; &gt; &laquo; &raquo;</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">>></a>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS

.pagination {
  display: inline-flex;
  background: #fafafa;
  padding: 5px;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #aaa;
}

.pagination a {
  /*padding-right: 7px;*/
  /*padding-left: 7px;*/
  padding: 0 7px;
  /*color: #33aaff;*/
  color: #3af;
  /*cursor: pointer;*/
  text-decoration: none;
  /*transition-duration: 0.5s;*/
  transition: 0.5s transform;
  
}

.pagination a:hover {
  color: #001169;
  /*color: red;*/
  transform: translateY(-5px);
}