【ドットインストール】第2回！「256times」に参加した感想！【学習メモ】

テクノロジー

2021.01.24 2019.12.18

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

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

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

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

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

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

第2回の課題は？
実際に参加した感想
おさかなの今後の課題
感想・まとめ

第2回の課題は？

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

今回も前回と同じような流れで進められました！

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始、時間が余ったらプログラミング学習相談
・22:00 番組終了

実際に参加した感想

今回もすごく楽しかった…！✨

自分のソースコードを公開することに慣れてきましたが、まだまだ課題がたくさんあるので、しっかりと復習していきます…！

ボタン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>
<button type="submit"><span>+</span>BUTTON</button>
  <script src="js/main.js"></script>
</body>
</html>

CSS

button {
  width: 100px;
  height: 50px;
  color: white;
  background: #247CC0;
  font-size: 15px;
  border-radius: 5px;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #DCDCDC;
  outline: 0;
  font-weight: bold;
}
button:hover {
  cursor: pointer;
  background: rgba(36,124,192, 0.5);
  transition: 0.3s;
}

おさかなのソースコード2 (:active疑似クラス)挑戦.ver

(ボタンを押すとへこむようにスタイリングしました…！)

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<button type="button"><span>+</span>BUTTON</button>
  <script src="js/main.js"></script>
</body>
</html>

CSS

button {
  width: 100px;
  height: 50px;
  color: white;
  background: #247CC0;
  font-size: 15px;
  border-radius: 5px;
  border-style: none;
  box-shadow: 2px 2px 3px 1px #DCDCDC;
  outline: 0;
  font-weight: bold;
  border-bottom: solid 4px #627295;
}
button:hover {
  cursor: pointer;
  background: rgba(36,124,192, 0.5);
  transition: 0.3s;
}
button:active {
  margin-top: 3px;
  border-bottom: none;
  transition: 0.3s;
}