20200907のHTMLに関する記事は9件です。

投稿日：2020-09-07T23:06:35+09:00

【初心者でもわかる】cssだけでスライドショー風の横スクロールできるカルーセルの作り方

どうも7noteです。CSSだけで作れるカルーセルの作り方

カルーセルといえば、東京にあるとしまえんが最近閉園になりました。
わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。

このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。
なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以下のようなデザインのことを、まるで回転しているかの様に見えることからカルーセルと呼びます。

スライドショーにしようと思うとjavascriptなども使わないといけなかったりしますが、今回のカルーセルはCSSだけでできるので簡単。さっそく作り方を解説。

作り方
index.html
<ul>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
</ul>
style.css
ul {
  overflow-x: auto;       /* 横幅が画面からはみ出たら横スクロールさせる */
  white-space: nowrap;
}
ul li {
  display: inline-block;  /* 要素を横並びにする */
  width: 130px;
}
ul li p {
  text-align: center;
}
基本的にはスマホ用になります。
PCの場合だと横スクロールバーが出てしまいますが、スマホなら指で横にスライドさせることができます。
このカルーセルなら、要素がはみ出ていても、スマホの画面全体がスクロールされるのではなく、カルーセルになっている個所のみが横スクロールされるのが特徴です。

まとめ

画像付きの情報を載せたり、テーブル（表など）をスクロールで見れるようにさせたりする時に使えます。
数行書くだけなので簡単に実装できるところがポイントですね。

もっとこだわった動きを入れたい場合はjavascriptを使ってスライドショーを導入するといい感じになるかも！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T20:40:07+09:00

Yハロトレ16日目

HTML

文字参照

<h2>&#9632;ブログカテゴリー</h2>

<li><a href="#">&#9654; 山と森林</a></li>
background-position
/*nav aで「background」は書かれているのでくどい*/
nav a:hover{
background: url(../img/nav_bg.jpg) repeat-x left bottom;
}
Photoshop

ポートフォリオ

300px/250px
468px/60px
468px/170px
ポートフォリオにバナーを載せる際にこの3つをPDFで並べたらいい感じになります。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T19:52:19+09:00

Webカメラで顔認識させてみた

WebGazer.jsという、Webカメラを使って視線の追跡機能を実装できる面白そうなものを見つけたので試してみました。

ただこの視線の追跡機能、私も試してみたのですがうまく精度が出なかったので途中で断念しました。。

なので顔認識させるところまでのやり方を書いていこうと思います！

手順

まずこちらのURLから、webgazer.jsファイルをダウンロードします。

あとは適当なエディタを開いてプロジェクトを作成し、
index.htmlファイルを作成します。

そしてhead内でscriptタグを使ってwebgazer.jsを読み込みます。
index.html
<script src="webgazer.js" type="text/javascript"></script>
あとはbody内にscriptダグで下記コードを追加します。
index.html
<script>
  webgazer.setGazeListener(function (data, elapsedTime) {
    if (data == null) {
      return;
    }
    var xprediction = data.x;
    var yprediction = data.y;
    console.log(elapsedTime);
  }).begin();
</script>
もうこれだけでいけます。

実際に試してみましょう。
ブラウザからサーバにアクセスするとカメラの使用許可を求められるので、許可を選択しましょう！

するとこんな感じで顔認識してくれます！
すごい！楽しい！

ここからさらに視線追跡機能も試してみて、
動くには動いたのですが、私の環境だといまいち精度が出なかったので断念しました。。

興味のある方は是非上手くいくか試してみてください！

実装方法などについてはこちらをご参照ください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T19:52:19+09:00

WebGazer.jsを使って、Webカメラで顔認識してみた

WebGazer.jsという、Webカメラを使って視線の追跡機能を実装できる面白そうなものを見つけたので試してみました。

ただこの視線の追跡機能、私も試してみたのですがうまく精度が出なかったので途中で断念しました。。

なので顔認識させるところまでのやり方を書いていこうと思います！

手順

まずこちらのURLから、webgazer.jsファイルをダウンロードします。

適当なエディタを開いてプロジェクトを作成し、index.htmlファイルを作成します。
先ほどダウンロードしたwebgazer.jsファイルも同じプロジェクト内に入れておきます。

そしてhead内でscriptタグを使ってwebgazer.jsを読み込みます。
index.html
<script src="webgazer.js" type="text/javascript"></script>
あとはbody内にscriptダグで下記コードを追加します。
index.html
<script>
  webgazer.setGazeListener(function (data, elapsedTime) {
    if (data == null) {
      return;
    }
    var xprediction = data.x;
    var yprediction = data.y;
    console.log(elapsedTime);
  }).begin();
</script>
もうこれだけでいけます。

実際に試してみましょう。
ブラウザからサーバにアクセスするとカメラの使用許可を求められるので、許可を選択しましょう！

するとこんな感じで顔認識してくれます！
すごい！楽しい！

ここからさらに視線追跡機能も試してみて、
動くには動いたのですが、私の環境だといまいち精度が出なかったので断念しました。。

興味のある方は是非上手くいくか試してみてください！

実装方法などについてはこちらをご参照ください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T16:54:50+09:00

p5.js で様々なパターンを描画してみた

1. はじめに

p5.jsとは、ProcessingをJavaScriptに移植したもので、
ビジュアルコーディングに特化したJavaScriptライブラリです。

p5.js 公式サイト
https://p5js.org/

今回は p5.jsを使用して、様々な模様を描いてみます。

2. 準備

まず最初に、p5.jsを使用するための準備をします。

2-1. p5.js 取得

p5.jsを使用するにあたって、htmlファイルに p5.jsを読み込ませる必要があります。

以下リンク先からp5.jsをダウンロードして読み込ませるか、CDNのリンクを貼り付けるか、どちらかの方法で、p5.jsを使用することができます。

p5.js： Download
https://p5js.org/download/

以下の画面で、p5.jsをローカルにダウンロードする場合は[p5.js]を、CDNのリンクを取得する場合は[CDN]をクリックします。

今回はCDNリンクを使用して、p5.jsを読み込ませます。

※ 以下リンク先のテンプレートを使用することもできます。

CodePen： p5.jsテンプレート
https://codepen.io/p5js/pen/wreBKy

2-2. htmlファイル作成

以下のような内容の htmlファイル（index.html)を作成します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Creative Coding</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>
</body>
</html>
p5.jsを使用するにあたって、
前の手順[2-1. p5.js 取得]で取得したp5.jsと sketch.js を読み込ませます。
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="./js/sketch.js"></script>
p5.jsの読み込みにはCDNリンク(https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js) を使用します。

sketch.jsは、後の手順[2-3.jsファイル作成] で配置します。

2-3. jsファイル作成

描画処理を記述するjsファイル sketch.js を作成します。

下記に sketch.js の雛形を示します。
sketch.js
function setup(){
  // 描画領域のセットアップ
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background(0);           //背景色: 黒
}

function draw(){
  // 描画
}
jsファイルは大まかに、setup関数 と draw関数の2つで構成されます。

関数説明

setup() 最初に1回実行される。主に描画領域のセットアップに使用される。

draw() setup関数の後、繰り返し実行される。

今回は、p5.jsを使用して模様を作成するために、
setup関数に描画領域を設定し、
draw関数に模様を描画する処理を記述します。

・ setup関数

まずsetup関数にて、
createCanvas関数で描画領域（キャンバス要素）を作成します。

また、画面に描画領域をわかりやすく表示するため、
background関数で描画領域の背景色を設定します。

関数説明

createCanvas() キャンバス要素を作成する。サイズはピクセル単位で設定する。

background() キャンバスの背景に使用される色を設定する。デフォルトの背景は透明。

・ draw関数

draw関数には、後ほど様々な模様を描く処理を記述します。

・ブラウザ表示

index.htmlをWebブラウザで開くと、以下のような画面が表示されます。

setup関数で設定した通り、サイズ:800px × 500px、背景色:黒の描画領域が表示されます。

3. コーディング

3-1. ボーダー

p5.jsを使用して、ボーダー柄を描きます。

3-1-1. サンプル

See the Pen p5.js_Stripe1-1 by Haruka Ogawa (@haruka0121) on CodePen.

3-1-2. 解説

以下に、ボーダー柄を描くための sketch.jsの内容を示します。
sketch.js
function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}

function draw(){ 
  let border_width = 30;  //ボーダーの間隔
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width); //ストローク幅: ボーダーの間隔（stripe_width)
    stroke('#66CDAA');          //ストローク色: グリーン
    line(0, i, width, i);
  }
}
・ setup関数内記述

setup()には、サイズ 800px × 500px、背景色黒の描画領域を設定します。
function setup() {
  createCanvas(800, 500); //サイズ: 800px × 500px
  background(0);          //背景色: 黒
}
・ draw関数内記述

draw()には、ボーダー柄を描くための処理を記述します。
function draw(){ 
  let border_width = 30;
  for(let i=0; i<height; i+=border_width*2){
    strokeWeight(border_width);
    stroke('#66CDAA');
    line(0, i, width, i);
  }
}
ループ処理を使って、線を一定間隔で描画することで、ボーダー柄を作ります。

使用した関数は、以下の通りです。

関数説明

strokeWeight() 図形のストローク幅を設定する。

stroke() 図形のストロークに使用する色を設定する。

line() 線（2点間の直接パス）を描画する。

strokeWeight()

strokeWeight()でストロークの幅を設定することができます。
strokeWeight()の構文は以下の通りです。
strokeWeight(weight)
weightはストロークの太さで、ピクセル単位で指定します。

[参考]
p5.js Reference： strokeWeight()
https://p5js.org/reference/#/p5/strokeWeight

stroke()

stroke()でストロークの色を設定することができます。
stroke()の構文は以下の通りです。
stroke(value)
valueはストロークの色で、ここではカラーコードで指定します。

[参考]
p5.js Reference： stroke()
https://p5js.org/reference/#/p5/stroke

line()

line()で始点・終点を指定し、線を描画することができます。
line()の構文は以下の通りです。
line(x1, y1, x2, y2)
x1, y1は始点のx, y座標、x2, y2は終点のx, y座標を指定します。

[参考]
p5.js Reference： line()
https://p5js.org/reference/#/p5/line

3-2. ストライプ

p5.jsを使用して、ストライプ柄を描きます。

3-2-1. サンプル

See the Pen p5.js_Stripe2 by Haruka Ogawa (@haruka0121) on CodePen.

3-2-2. 解説

以下に、ストライプ柄を描くための sketch.jsの内容を示します。
skech.js
function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}

function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke(); //ストローク無効化
    fill(250);  //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}
・ setup関数内記述

setup()には、サイズ 800px × 500px、背景色青（#6666FF）の描画領域を設定します。
function setup() {
  createCanvas(800, 500);  //サイズ: 800px × 500px
  background('#6666FF');   //背景色: ブルー（#6666FF）
}
・ draw関数内記述

draw()には、ストライプ柄を描くための処理を記述します。
function draw(){
  let stripe_width = 3;  //ストライプの間隔
  for(let i=0; i<width; i+=stripe_width*5){
    noStroke();  //ストローク無効化
    fill(250);   //図形の塗り潰し: 白
    rect(i, 0, stripe_width, height);
  }
}
ループ処理を使って、長方形を一定間隔で描画することで、ストライプ柄を作ります。

使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

rect() 長方形を描画する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。
noStroke()の構文は以下の通りです。
noStroke()
[参考]
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。
fill()の構文は以下の通りです。
fill(value)
[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

rect()

rect()で長方形を描画することができます。
rect()の構文は以下の通りです。
rect(x, y, w, [h])
x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-3. 市松模様

p5.jsを使用して、市松模様を描きます。

3-3-1. サンプル

See the Pen p5.js_Checkered pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-3-2. 解説

以下に、市松模様を描くための sketch.jsの内容を示します。
sketch.js
function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}

function draw(){             
  const step = 30; //各ブロックの間隔

  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{　 // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}
・ setup関数内記述

setup()には、サイズ 800px × 500px、背景色黒の描画領域を設定します。
function setup() {
    createCanvas(800, 500); //サイズ: 800px × 500px
    background(0);          //背景色： 黒  
}
・ draw関数内記述

draw()には、市松模様描くための処理を記述します。
function draw(){             
  const step = 30; //各ブロックの間隔

  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){  // y の値が (step*2) で割り切れる時
      for (let x = step ; x <= width; x += step*2) {
        noStroke();              //ストローク無効化
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }else{  // y の値が (step*2) で割り切れない時
      for (let x = 0; x <= width; x += step*2) {
        noStroke();              //ストローク無効化 
        fill(255,0,0);           //図形塗り潰し: 赤
        rect(x, y, step, step);  //四角形描画
      }
    }
  }
}
ここでもループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔のあけ方を２パターン作り、
それぞれ交互に実行されるように条件文で制御します。

使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

rect() 長方形を描画する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。
noStroke()の構文は以下の通りです。
noStroke()
[参考]
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。
fill()の構文は以下の通りです。
fill(value)
[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

rect()

rect()で長方形を描画することができます。
rect()の構文は以下の通りです。
rect(x, y, w, [h])
x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-4. ギンガムチェック

p5.jsを使用して、ギンガムチェックを描きます。

3-4-1. サンプル

See the Pen p5.js_Gingham check by Haruka Ogawa (@haruka0121) on CodePen.

3-4-2. 解説

以下に、ギンガムチェックを描くための sketch.jsの内容を示します。
sketch.js
function setup() {
  createCanvas(800, 500); //サイズ
}

function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔

  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){
      for (let x = 0 ; x <= width; x += step) {
        if(x % (step*2) == 0){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}
・ setup関数内記述

setup()には、サイズ 800px × 500px の描画領域を設定します。
function setup() {
    createCanvas(800, 500); //サイズ
}
・ draw関数内記述

draw()には、ギンガムチェックを描くための処理を記述します。
function draw(){ 
  background(255);  //背景色：白
  noStroke();       //ストロークの描画 無効化

  const step = 15;　//チェック柄の間隔

  for (let y = 0; y <= height; y += step) {
    if(y % (step*2) == 0){
      for (let x = 0 ; x <= width; x += step) {
        if(x % (step*2) == 0){ 
          // 四角形(a) の描画
          fill('rgba(153,204,255,1)');     //図形の塗り潰し: 水色・不透明
          rect(x, y, step, step);          //四角形描画
        }else{ 
          // 四角形(b) の描画
          fill('rgba(153,204,255,0.65)');  //図形の塗り潰し: 水色・半透明
          rect(x, y, step, step);          //四角形描画
        }
      }
    }else{
      for (let x = 0; x <= width; x += step*2) {
        // 四角形(c) の描画
        fill('rgba(153,204,255,0.65)');    //図形の塗り潰し: 水色・半透明
        rect(x, y, step, step);            //四角形描画
      }
    }
  }
}
ここでは setup関数ではなく、draw関数内で背景色を設定（background関数）します。

ループ処理を使って、正方形を一定間隔を開けて描画します。
正方形の色は３色使用し、
条件文を使って、一定のルールでそれぞれ描画するように制御します。

使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

rect() 長方形を描画する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。
noStroke()の構文は以下の通りです。
noStroke()
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。
fill()の構文は以下の通りです。
fill(v1, v2, v3, [alpha])
v1・v2・v3はRGB値、
alphaは透明度
を指定します。

[参考]
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

rect()

rect()で長方形を描画することができます。
rect()の構文は以下の通りです。
rect(x, y, w, [h])
x,yは長方形のx,y 座標、
wは長方形の幅、
h （オプション）は長方形の高さ
を指定します。

[参考]
p5.js Reference： rect()
https://p5js.org/reference/#/p5/rect

3-5. ドット

p5.jsを使用して、ドット柄を描きます。

3-5-1. サンプル

See the Pen p5.js_Dot pattern by Haruka Ogawa (@haruka0121) on CodePen.

3-5-2. 解説

以下に、ドット柄を描くための sketch.jsの内容を示します。
sketch.js
function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}

function draw(){
    noStroke();       //ストローク無効化        

    const step = 50; 

    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}
・ setup関数内記述

setup()には、サイズ 800px × 500px、背景色レッド（'red'）の描画領域を設定します。
function setup() {
    createCanvas(800, 500); //サイズ
    background('red');      //背景色: レッド
}
・ draw関数内記述

draw()には、ドット柄を描くための処理を記述します。
function draw(){
    noStroke();       //ストローク無効化            

    const step = 50;

    for (let y = 0; y <= height; y += step) {
        if(y % (step*2) == 0){
            for (let x = step/2 ; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }else{
            for (let x = 0; x <= width; x += step) {
                const size = step/2;        //円のサイズ: step/2
                fill(255);                  //図形の塗り潰し: 白
                ellipse(x, y, size, size);  //楕円描画： 中心(x, y), 幅size, 高さsize
            }
        }
    }
}
ループ処理を使って、正方形を一定間隔を開けて描画します。
市松模様にするために、間隔の開け方を２パターン作り、
それぞれ交互に実行されるように条件文で制御します。

使用した関数は、以下の通りです。

関数説明

noStroke() ストロークの描画を無効にする。

fill() 図形を塗りつぶす色を設定する。

ellipse() 楕円を描画する。

noStroke()

noStroke()でストロークの描画を無効にすることができます。
noStroke()の構文は以下の通りです。
noStroke()
p5.js Reference： noStroke()
https://p5js.org/reference/#/p5/noStroke

fill()

fill()で図形を塗りつぶす色を設定することができます。
fill()の構文は以下の通りです。
fill(value)
p5.js Reference： fill()
https://p5js.org/reference/#/p5/fill

ellipse()

ellipse()で楕円を描画することができます。
ellipse()の構文は以下の通りです。
ellipse(x, y, w, [h])
x, yは楕円の中心のx, y座標、
wは楕円の幅、
h（オプション）は楕円の高さ
を指定します。

p5.js Reference： ellipse()
https://p5js.org/reference/#/p5/ellipse

4. おわりに

今回は、p5.jsを使用して様々な模様を描いてみました。

ここではボーダー柄はline()、ストライプ柄はrect()を使って描画していますが、
逆にボーダー柄をrect()、ストライプ柄をline()で描画することも可能ですし、
同じ模様でもパターンの作成方法はたくさんあると思います。

p5.js 公式サイトを見ると、線・四角形・円形以外にも様々な図形が描けるようですので、
組み合わせ次第でいろんなパターンが作成できると思います。

参考情報

p5.js 公式サイト
https://p5js.org/

p5.js overview
https://github.com/processing/p5.js/wiki/p5.js-overview

p5.js：Examples
https://p5js.org/examples/

ホームページ　作成、運営管理ガイド：カラーコード一覧表
http://www.netyasun.com/home/color.html

関数	説明
setup()	最初に1回実行される。主に描画領域のセットアップに使用される。
draw()	setup関数の後、繰り返し実行される。

関数	説明
createCanvas()	キャンバス要素を作成する。サイズはピクセル単位で設定する。
background()	キャンバスの背景に使用される色を設定する。デフォルトの背景は透明。

関数	説明
strokeWeight()	図形のストローク幅を設定する。
stroke()	図形のストロークに使用する色を設定する。
line()	線（2点間の直接パス）を描画する。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
rect()	長方形を描画する。

関数	説明
noStroke()	ストロークの描画を無効にする。
fill()	図形を塗りつぶす色を設定する。
ellipse()	楕円を描画する。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T07:29:13+09:00

DOMツリーが小さくなるとページの読込時間が短くなるって本当？

はじめに

DOMツリーを小さい（階層が浅いと言った方が正しい？）ことで、ページの読込時間が短縮されるのか検証します。

DOMツリーとは

例えば、以下のようなhtmlがあったとすると、
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Page Title</title>
      <link rel="stylesheet" href="./main.css">
    </head>
    <body>
      <div>
        <p>Message...</p>
      </div>
    </body>
</html>
1階層：html
2階層：head, body
3階層：meta, title, link, div
4階層：p
となります。

階層が浅いDOMツリーであればあるほどブラウザによるDOMの読込が早くなると言われています。

比較対象

どれくらい違うのか階層が深いページと浅いページを比較してみたいと思います。
階層が深いhtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mariana Trench</title>
</head>
<body>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p>
    // ：
    // divの中にpを5つ、さらにdivの中にpを5つ、、を1000回繰り返す
    // ：
    </div>
    </div>
    </div>
</body>
</html>
階層が浅いhtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Puddle</title>
</head>
<body>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
    // ：
    // divの中にpを5つ入れて閉じる、、を1000回繰り返す
    // ：
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
    <div><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p><p>Message..</p></div>
</body>
</html>
DOMツリーを比較するとこんな感じ・・

比較結果

DOMツリーの読込に要した時間は、DOMContentLoadedで表されます。
DOMContentLoadedは開発者ツールのNetworkで確認できます。

上が階層が深いhtml、下が階層が浅いhtml。
100ミリ秒程度の違いは体感的にごくわずかですが、階層の浅い方が読込時間が短いことがわかります。

通常のシステム開発の中で1000階層も深くすることはないと思いますが、
フロントエンドを担当する際はDOMツリーの構成を意識しておくと良いかもしれませんね。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T07:15:46+09:00

複数のファイルを並行に取得して読込速度を改善する

はじめに

<link rel="preload"> を使用することでブラウザに対して早期にファイル取得を促し、読込時間を短縮させることができます。

preload

preloadは、ブラウザのレンダリング機構が起動するよりも早く、ファイルの読込を開始させたい場合に使用します。

改善前

開発者ツールのNetworkからファイルを読み込むタイミングを確認します。

cssファイルが取得＆読み込まれた後に画像(webp)、Googleフォント(font)が取得されていることがわかります。
画像とフォントをcssファイルやjsファイルなどと並行して読み込むことができれば、ページの読込速度の改善が見込めそうです。

実装を見ると背景画像とフォントはcssファイルの中で読み込んでいます。
index.html
<link rel="stylesheet" href="./main.css">
main.css
@import url(https://fonts.googleapis.com/css?family=Roboto:900|Roboto+Mono:300,400,700); // Googleフォントの読込
background-image-container {
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top;
  background-image: url('./assets/images/space.webp') // 背景画像の読込
}
この場合、背景画像とフォントはcssファイルが完全にダウンロードされた後、上から順にcssが解析されていく途中で取得されることになります。

改善後

では、背景画像とフォントを並行して読み込ませるために、headタグ内に <link rel="preload"> を実装します。
index.html
<link rel="preload" href="./assets/images/space.webp" as="image">
<link rel="preload" href="https://fonts.gstatic.com/robotomono.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:900|Roboto+Mono:300,400,700">
<link rel="stylesheet" href="./main.css">
cssファイルとwebp、font の読込が並列になっていることがわかります。

結果、背景画像をいち早く画面に表示させ、文字にもいち早くフォントを当てることができます。

注意点

１つ注意点としては、オリジンを跨いでファイルを取得する場合は
crossorigin 属性を付与しておく必要があります。

通常、Webサーバには同一オリジンポリシーがあり、オリジンを跨いだアクセスは制限がかかります。
crossorigin 属性はオリジンを跨いだアクセスを許可する際に付与します。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T02:18:26+09:00

備忘録　VS CodeとHTMLとCSSの使い方リンク集

前提

HTMLやCSSを始める前にVS Codeをマスターするのが最優先

おすすめリンク

VS Code

VS Codeについてはこちらの動画でさっと勉強するのが良いかな

Visual Studio Code入門 #01：環境設定と、VSCodeの起動方法いろいろ

Emmetめちゃ大事！これないとHTMLとCSSいまだにかけないかも(というかやりたくない)笑

以下も結構まとまってる
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》

HTMLとCSSをEmmetで書いてみる！：Visual Studio Code

VS Codeのショートカットがまとまってる！コード書く前にこっちをやる！

【Mac版】 VisualStudioCode キーボードショートカット

拡張機能大事！これないと無理ゲー!

フロントエンジニア必須の拡張機能7選

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

デバッグできるようにならないとどこでNGかわからん(これはRubyとかJSのためだけど)。

Rails用で場違いですが。。VS Codeの使用方法として。。

Visual Studio CodeによるRubyのデバッグ

VS Codeの操作方法が一通りまとまってる

VSCode初心者のための、絶対覚えておきたい便利機能まとめ

HTML

このサイトみて主要なものをひたすらググってVS Codeで試す！

HTML5の主要タグ一覧

idとclassの違い

HTMLのdiv classとは？５分でわかる事例付き解説

idとnameの違い

input typeタグで、idとnameは同じ名前にしなければいけないの？

CSS

MarginとかPaddingとかの理解

これはChromeで検証ツールで試行錯誤するしかない！
見れば一髪！

CSSのwidthとheighの関係性がとても分かりやすかった。

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

CSSのdhisplayの概念がとても分かりやすくまとまっていた。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

画面分割の方法

CSS入門：「display: table」を使って要素を横に並べる方法

おわりに

自分で書きたくないのでメモとしてリンクを貼った。良いサイトがあれば追記していこうと思う。

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-07T01:28:07+09:00

Markdown記法、入門！

Qiitaで記事を投稿し始めて知った「Markdown」
ちょっと興味が湧いたのと、さらなる良記事が書けるようにとの願いを込めて、
今回はMarkdown記法について勉強していきます。

まずはじめに

「そもそもMarkdown記法とはなによ？」ってところなんですが一言で言い表すと、
「テキストをHTMLに変換するための記法」だそうです。

...うん。とにかくやってみよう！

公式サイトにアクセス

https://daringfireball.net/projects/markdown/

「Dingus」というリンクから実際に試せるみたいので、ここでMarkdown記法を試してみます！

リスト

「Convert」を押して変換

なんと！簡単な記述でHTMLのリストが書かれており、
プレビューを見てもちゃんとリストの形になっている！

す、すごいな...！

といった感じで、面倒なタグをいちいち入力しなくても簡単にわかりやすく覚えやすく書けるのがこの"Markdown記法"です。

それではドンドンやっていきましょう。

コード

コードの前後を「`」(バッククォート)を3つずつ書いて囲む



ちなみに、Qiitaではこんな感じになります
public class Excercise {
  public static void main(String[] args) throws Exception{
   for (int i = 1; i <= 9; i++) {
     System.out.println((3 * i) + " " );
   }
  }
 }
のっぺりとしたコードに比べて、ぐッと見やすくなりましたね。

※AtomエディターのMarkdownプレビュー機能が直感的でわかりやすいので、これ以降はAtomエディターを使っていきます。
Markdown記法は対応しているサービスで若干のローカルルールがあるので気を付けてください

見出し

「#」を付けると見出しになる

パラグラフ

HTMLで言うところのPタグ。間に空の行を入れてあげる。

改行

改行したい部分に半角スペースを2個以上つける

QiitaではEnterキーで改行できるので直感的でいいですね。

引用

文の先頭に「>」を入れる

Qiitaでも同じ記述でいけます。

区切り線

「-」「*」「_」を3つ以上を並べる

斜体

強調したい文字を「*」もしくは、「_」で囲む

太字

強調したい文字を「*」もしくは、「_」2つで囲む

斜体かつ太字

強調したい文字を「*」もしくは、「_」3つで囲む

箇条書き、いろいろ

注意点は記号のあとに必ず半角スペースを入れること

連番付きのリスト

数字、ピリオドのあとには必ず半角スペースを入れること

ネスト

上下の行を空行にし、4文字以上の字下げ(スペース)をしたあとに文字を入力すれば、そのリスト内の項目として認識される。

リンク

「<>」

<>にリンク先のURLを書くことでタップするとリンク先に飛べるようになる

「[]」「()」

[]内にテキスト、()内にリンク先のURLを書くことでテキストリンクになる

「""」

「"」で囲んだ内容がマウスオーバー時に説明として表示される

コードを見やすくするために

先頭に空白を4つ空ける

インラインの中にあるコードをわかりやすく見せるためには、コードの部分を「`」で囲む

画像の表示

「!」「[]」「()」
この文法、よく見るなぁ～って思ったら、Qiitaで記事を書くときに画像添付したら出てくるMarkdown記法ですね！また、書き方は多少違いますが、リンクとほぼほぼ同じような書き方なので、あまり迷うこともなかろうかと思います。
!(画像のパス、もしくはURL)

終わりに

たくさんの方の記事を読んたあとに、こうして自分でも記事を投稿し始めたわけなのですが、
「自分が見ていたような、読みやすくてちょっとシャレた感じに書くのはどうすればええんやー」って思って、調べ始めたのがMarkdown記法との出会いです。
すごい難しい記述をするわけではなく、記号を付け足したり、挟んだり、空白入れてみたりと、直感的にできるのが楽しいです。Markdown記法が使えれば、記事や質問をする時にすごく読みやすくなるので、これからも積極的に使っていこうと思います。

この記事を書くまでにもたくさんの記事を参考にさせていただいたので、下に「参考にした記事や教材」といった形で、リンクを貼らせていただければと思います。

ドットインストール

Markdown公式サイト

Maarkdown記法チートシート

Maarkdown記法サンプル集