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

HTML/CSS

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

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

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

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

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

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

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

第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);
}

 

おさかなの今後の課題

・navタグを使用して囲ってみる(意味のあるタグ)

・metaタグでスマホに対応する

・href属性を付ける

・transitionを使って、アニメーションを付けてみる

感想・まとめ

今回は「256times」について、書いていきました…!

いかがだったでしょうか?

第4回目も「ページネーション」という奥が深いマークアップで、かなり勉強になりました…!(すごくたのしかった…!)

ドットインストールのみなさん!今回もありがとうございました。✨
次回の開催は「1/28(火)21:00~」ということで、興味のある人はぜひ参加してみてください…!(おさかなも参加します…!)

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました