フロントエンド | メサイア・ワークス

ブラウザに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>

webpackで、画像もcssも1つのJSファイルにまとめてみた。

2020年5月12日に admin が投稿

webpackで、画像もcssも1つのJSファイルにまとめてみた。前回の続き webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる続きを読む webpackで、画像もcssも1つのJSファイルにまとめてみた。→

webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。

2020年5月11日に admin が投稿

webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。前回の続き webpack4(複数のjs/css/imgファイルを1ファイル続きを読む webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。→

webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。

2020年5月11日に admin が投稿

webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。参考URL https://ics.media/en 続きを読む webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。→

gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。

2020年5月11日に admin が投稿

gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。参考URL https://agrius.net/entry/coding-with-pug/ ブラウ続きを読む gulpとbrowser-syncを使って、pugファイルを修正したら、自動的にブラウザリロードするようにしてみた。→