admin | メサイア・ワークス

ブラウザに100*100pxの四角を表示して、クリックする度に色がランダムに変わるサンプル。こうやってJS/CSSを組み合わせるとフロントエンド感ある。

2020年5月19日に admin が投稿

ブラウザに100*100pxの四角を表示して、クリックする度に色がランダムに変わるサンプル。こうやってJS/CSSを組み合わせるとフロントエンド感ある。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js test</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: skyblue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="color" id="color">skyblue</div>
  <div class="box" id="target"></div>
  <script>
    'use script';
    function changeColor(){
      // #000000-#ffffffをランダムで出力
      var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);
      // 文字列と色で表示する。
      document.getElementById('color').textContent= randomColor;
      document.getElementById('target').style.background = randomColor;
      //document.getElementById('target').style.borderRadius = '50%';
    }
    // 最初にランダムな色を設定
    window.addEventListener('load', changeColor, false);
    // クリックされた時もランダムな色を設定
    document.getElementById('target').addEventListener('click', () => {changeColor(); });

  </script>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

.box{

width: 100px;

height: 100px;

background-color: skyblue;

cursor: pointer;

}

</style>

</head>

<body>

<div class="color" id="color">skyblue</div>

'use script';

function changeColor(){

// #000000-#ffffffをランダムで出力

var randomColor = "#" + ('000000' + Math.floor(Math.random() * (2**24)).toString(16)).slice(-6);

// 文字列と色で表示する。

document.getElementById('color').textContent= randomColor;

document.getElementById('target').style.background = randomColor;

//document.getElementById('target').style.borderRadius = '50%';

}

// 最初にランダムな色を設定

window.addEventListener('load', changeColor, false);

// クリックされた時もランダムな色を設定

document.getElementById('target').addEventListener('click', () => {changeColor(); });

</script>

</body>

</html>

ドットインストールの自動再生用chrome拡張を作った。「楽をするための苦労は勝手にする！」ってのが、プログラマという人種だよな〜。

2020年5月15日に admin が投稿

ドットインストールの自動再生用chrome拡張を作った。「楽をするための苦労は勝手にする！」ってのが、プログラマという人種だよな〜。ドットインストールの動画が２〜３分しかないのに毎回再生ボタンを押させるので、自動再生は続きを読むドットインストールの自動再生用chrome拡張を作った。「楽をするための苦労は勝手にする！」ってのが、プログラマという人種だよな〜。→

css3のflexboxを使うと、ヘッダ・フッタ・３カラムが簡単に実装出来る。ドットインストールの有料動画(一ヶ月1080円)が分かりやすかったので課金！

2020年5月14日に admin が投稿

css3のflexboxを使うと、ヘッダ・フッタ・３カラムが簡単に実装出来る。ドットインストールの有料動画(一ヶ月1080円)が分かりやすかったので課金！ https://dotinstall.com/lessons/b 続きを読む css3のflexboxを使うと、ヘッダ・フッタ・３カラムが簡単に実装出来る。ドットインストールの有料動画(一ヶ月1080円)が分かりやすかったので課金！→

vsnote(vscodeのメモ拡張)+nextcloud(dropbox代用)で、1ウィンドウで完結するようにしてみた。

2020年5月12日に admin が投稿

vsnote(vscodeのメモ拡張)+nextcloud(dropbox代用)で、1ウィンドウで完結するようにしてみた。リモートでMBA13インチを使っていると、小さい画面でウィンドウ切り替えが面倒なので、メモをvs 続きを読む vsnote(vscodeのメモ拡張)+nextcloud(dropbox代用)で、1ウィンドウで完結するようにしてみた。→

macでscss環境構築(rubyセットアップ)が意外と面倒だった…。

2020年5月12日に admin が投稿

macでscss環境構築(rubyセットアップ)が意外と面倒だった…。ドットインストールでscssについて学んでみた。 https://dotinstall.com/lessons/basic_sass scssって、続きを読む macでscss環境構築(rubyセットアップ)が意外と面倒だった…。→