【毎朝1時間】プログラミング初心者のオヤジが、Web制作とセールスライティングを学んで、案件をゲットするまでのブログ

コーディングの知識がほとんどないオヤジが独学で仕事をゲットするまでの日記です。目標は、売れるLPを企画からデザイン、コーディングまでできるオヤジです。

#ドットインストール 「javascriptでおみくじをつくろう」まとめ

html

とくに問題はありません。

css

ボタンのかたちを作ります。


#btn{
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  box-shadow: 0 10px  0 #d1483e;
  user-select: none;
}

#btn:hover{
  opacity: 0.9;
}

#btn:active{
  box-shadow: 0 5px 0 #d1483e;
  /* 押すことでbtnの影を短くする */
  margin-top: 35px;
  /* 押すことで下にずらしたようにみせる */
}

box-shadow

ドットインストールの講座で一度学習したのですが、もう一度復習。

http://www.htmq.com/css3/box-shadow.shtml

影を定義する指定内容は、以下のように解釈されます。

  • 1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
  • 2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
  • 3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
  • 4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
  • 色の値を指定すると、影がその色になります。(上記サイトから引用)

いろいろ数値を変えてみるのですが、「ぼかし距離」と「広がり距離」の違いがよくわからないですね。もうちょっと研究してみる。

user-select

https://developer.mozilla.org/ja/docs/Web/CSS/user-select

javascript


'user strict'
{

【一つ目】
const hatena = document.getElementById('btn');
← id btnからtext抜いて、hatenaという名前をつける

// hatena.addEventListener('click',() =>{
←hatenaに「clickをしたら…」というイベントをつける
//   const lucky = ['good','soso','bad'];
←この3つを表示させる。luckyと名付ける
//   hatena.textContent = lucky[Math.floor(Math.random() * lucky.length)];  
←hatenaをluckyの3つからランダムに選んで上書きする
// });


【二つ目】
hatena.addEventListener('click',() =>{
←hatenaに「clickをしたら…」というイベントをつける
  const n = Math.random();
←ランダムの数値にnという名前をつける
  if(n < 0.2 ){
    hatena.textContent = 'good';
←nが0.2未満だったら、goodと表示
  }else if(n < 0.7){
    hatena.textContent = 'soso';
←nが0.2から0.7の間だったらsosoと表示
  }else{
    hatena.textContent = 'bad';

←それ以外だったらbadと表示
  }
});

}