2022-04-14から1日間の記事一覧

4月14日作業データ（パーティクルその2）

webサイト制作

4-14 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>particles.jsその2</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

srcsetを使って画像を切り替える

webサイト制作 HTML

4-14 img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイス…

background-attachmentを使ってパララックス風のサイトを作成する

CSS応用

4-14 cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例 frankiessportsbar.com 記述としては背景画像を固定したい要素に background-at…

Canvasでパーティクルを表現する

ポートフォリオの制作 webデザイン

4-14 Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実…