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

テクノロジー
2020.01.15
スポンサーリンク

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

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

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

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

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

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

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

第3回の課題は？

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

第3回の課題は「画像付きリスト」でした…！

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

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始、時間が余ったらプログラミング学習相談
・22:00 番組終了
「生放送見逃した！」って方も、「アーカイブ」が残っているので「コチラ」から見ることができます…！(よかった…！)

進化していたところ！

「新年1発目」ということで、昨年よりも動画のロゴがきれいになっていました…！
(かっこいい…！)
ロゴの作成者はcocoponさんという方だそうです！
そしてなんと…！作業中にはバックミュージックが！！🎵
音楽は夕食ホットさんという方が作成されたそうです！
カウントダウンも表示されていて、気分が高まりました…！

実際に参加した感想

課題に関しては、今回はあまりちゃんとできなかったので、悔しかったのですがしっかりと復習して、もっとレベルアップしていけたらいいなと思いました…！

昨年よりも、作業中に音楽が流れていたり、時間が表示されていたりして、イベント感がすごくあって、楽しかったです…！
ドットインストールの方のこだわりを感じました！(さすがです！✨)
参加する度に、進化しているので次回もたのしみです…！

おさかなのソースコード(後ほど公開予定！)

HTML 

CSS

レビューコードまとめ

レビューコード1

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>2020/01/14</title>
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul class="items">
    <li class="item">
      <div class="list-image-box">
        <img class="list-image" src="https://dotinstall.com/img/256times/logo.png">
      </div>
      <div class="list-text-box">
        <h1 class="list-title">今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定</h1>
        <p class="list-text">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        <p class="list-text">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
        <p class="list-text">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
      <div class="list-buttons">
        <i class="fas fa-heart"></i>
      </div>
    </li>
    
    <li class="item">
      <div class="list-image-box">
        <img class="list-image" src="https://dotinstall.com/img/256times/logo.png">
      </div>
      <div class="list-text-box">
        <h1 class="list-title">今日の予定</h1>
        <p class="list-text">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
      <div class="list-buttons">
        <i class="fas fa-heart"></i>
      </div>
    </li>
    
    <li class="item">
      <div class="list-image-box">
        <img class="list-image" src="https://dotinstall.com/img/256times/logo.png">
      </div>
      <div class="list-text-box">
        <h1 class="list-title">今日の予定</h1>
        <p class="list-text">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
      </div>
      <div class="list-buttons">
        <i class="fas fa-heart"></i>
      </div>
    </li>
  </ul>
  <script src="js/main.js"></script>
</body>
</html>

 

CSS

.items {
  margin: 0 20px;
  padding: 0;
  list-style: none;
}

.item {
  display: flex;
  padding: 20px 0;
  position: relative;
  /*background: pink;*/
  /*margin-bottom: 16px;*/
}

/*.item:not(:first-of-type) {*/
/*  border-top: 1px solid silver;*/
/*}*/

.item + .item {
  border-top: 1px solid silver;
}

.list-image-box {
  width: 100px;
  /*width: 20%;*/
  /*min-width: 60px;*/
  /*max-width: 60px;*/
}

.list-image {
  /*max-width: 100%;*/
  width: 80px;
}

.list-text-box {
  margin-left: 30px;
}

.list-title {
  font-size: 16px;
  /*margin: 0;*/
  /*margin-bottom: 10px;*/
  margin: 0 0 10px;
}

.list-text {
  font-size: 14px;
  margin: 0 0 7px;
  line-height: 1.6;
}

.list-buttons {
  position: absolute;
  top: 20px;
  right: 0;
  color: pink;
  transtion: transform 0.5s;
}

.list-buttons:hover {
  transform: scale(1.2);
  cursor: pointer;
}

 

レビューコード2

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="section">
    <img src="https://dotinstall.com/img/256times/logo.png">
    <section>
      <h1>今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定今日の予定</h1>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
    </section>
  </div>
  <div class="section">
    <img src="https://dotinstall.com/img/256times/logo.png">
    <section>
      <h1>今日の予定</h1>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
    </section>
  </div>

  <div class="section">
    <img src="https://dotinstall.com/img/256times/logo.png">
    <section>
      <h1>今日の予定</h1>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
    </section>
  </div>

  <div class="section">
    <img src="https://dotinstall.com/img/256times/logo.png">
    <section>
      <h1>今日の予定</h1>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
    </section>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

 

CSS

.section {
  display: flex;
  border-bottom: 2px solid lightgray;
  /*height: 160px;*/
  /*overflow-y: hidden;*/
  padding: 10px;
}
.section > img {
  height: 100px;
  /*padding: 20px;*/
  margin: 40px;
}
.section > div {
  /*flex-grow: 1;*/
  flex: 1;
}
.section h1 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.section p {
  /*margin-top: 10px;*/
}

@media screen and (max-width: 480px) {
  .section {
    flex-direction: column;
    align-items: center;
    height: 350px;
  }
  .section > img {
    width: 100px;
    /*padding: 20px;*/
    /*margin: 40px;*/
  }
}

 

レビューコード3

HTML 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">

</head>
<body>

  <section>
    <div class="container">
      <div class="image">
        <img src="https://dotinstall.com/img/256times/logo.png" class="icon">
      </div>
      <div class="text">
        <div class="container">
          <h1>今日の予定</h1>
          <i class="material-icons">favorite</i>
        </div>

        <p>
          こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
        </p>
      </div>
    </div>
  </section>
  <section>
    <div class="container add-favorite">
      <div class="image">
        <image src="https://dotinstall.com/img/256times/logo.png" id="logo"></image>
      </div>
      <div class="text">
        <h1>今日の予定</h1>
        <p>
          こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
        </p>
      </div>
    </div>
  </section>

  <section>
    <div class="container">
      <div class="image">
        <img src="https://dotinstall.com/img/256times/logo.png" id="logo">
    </div>
    <div class="text">
      <h1>今日の予定</h1>
      <p>
        こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
      </p>
    </div>
  </div>
</section>

<script src="js/main.js"></script>
</body>
</html>

 

CSS

body {
  margin: 0 32px;
}

.container {
  /*background: pink;*/
  display: flex;
}

.image {
  padding: 32px;
}

.icon {
  width: 100px;
}

.text {
  padding: 32px;
}

section + section {
  border-top: 1px lightgray solid;
}

h1 {
  margin: 0;
}

.material-icons {
  color: pink;
  display: block;
  margin-left: auto;
}

 

おさかなの今後の課題

・flexbox使いこなす

・borderの一番下だけを消す方法(いろいろなパターンできるように)

・marginの相殺を避けるために、marginをつける方向を固定する

・テキストの中身が増えた時に、要素の幅が変わらないようにする

・「マテリアルアイコン」を使用してみる！

 

感想・まとめ

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

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

第3回目は令和2年になってから1発目ということで、パワーアップしていてとてもすごかったです…！

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

 

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

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

おさかなでした！

 

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

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

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