元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】イベント

SVG

イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。 イベントとは イベント属性 イベントハンドラ まとめ イ…

ブログ開設1年目の振り返り

ブログを開設してから1年経つので、振り返りました。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログ開設の理由 ブログ開設時のルール 苦労していること 記事にまとめる作業 インプット対象探し 裏テーマ ブログを数値で振り返る 課題・後…

【SVG】スクリプトの基礎

SVG

スクリプトを書くと何かしらの処理が実行できます。まず、スクリプトの記述とスクリプトを別ファイルにして読み込む方法について書きます。スクリプトからSVGを操作できるようになるのが目標です。 SVGファイル内にスクリプトを記述する スクリプトファイル…

【SVG】CSSの記述

SVG

色や線などの属性をスタイルと呼びます。SVGのスタイルは、CSSとして記述することができます。スタイルの記述は、SVG文書から分離して別ファイルにすることができます。スタイルの記述と別ファイルの読み込みについて見ていきます。 CSSファイルの読み込み S…

【JS中級者向け参考書】「[改訂新版]JavaScript本格入門~モダンスタイルによる基礎から現場での応用まで」の感想

JavaScriptの入門書はたくさんありますが、より詳しい内容となるとなかなか見つからないでいました。色々なサイトを参考に、中級者向けの参考書を探したところ「JavaScript本格入門」に辿り着きました。今回は、その感想です。 本の要約 学んだこと 構文のさ…

JavaScriptでアニメーションする方法

この記事では、クラスの追加・削除をすることでアニメーションする方法について書きます。イベントと組み合わせて、インタラクティブなものを作ります。簡単にではありますが、JavaScriptを利用したアニメーションの導入としてご覧ください。 JavaScriptでク…

【SVG】アニメーション3(パスに沿った移動)

SVG

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateMotion要素」について見ていきます。animateMotion要素は、パスに沿って図形をアニメーションさせるものです。 animateMotion要素 パスの向きに応じた角度の変化 まとめ a…

【SVG】アニメーション2(座標系の変換)

SVG

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateTransform要素」について見ていきます。animateTransform要素は、座標系を変化させることによってアニメーションさせるものです。 animateTransform要素 移動のアニメーシ…

【SVG】アニメーション1(属性値の変化)

SVG

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animate要素」について見ていきます。animate要素は、要素の属性値を変化させてアニメーションさせるものです。例えば、色や不透明度を変更してアニメーションさせます。 animate…

【SVG】線の形状

SVG

線の端点と接続点の形状を指定する属性があります。線の端の処理をどのようにするのかを指定できます。合わせて破線の指定の仕方を見ていきます。線の細部の扱いまで細かく指定できます。小さいことかもしれませんが、見た目の印象が変わります。 端点の形状…

【SVG】座標系の変換:transform

SVG

要素が持つtransform属性に対して、変換を指定します。変換には「移動」「拡大・縮小」「回転」「剪断」があります。それぞれ、指定の仕方を見ていきます。 translation:移動 scale:拡大・縮小 rotate:回転 skew:剪断(せんだん) 変換の順序 まとめ translati…

【Tweakpane】Tweakpaneの記事まとめ

当ブログで紹介したTweakpaneの記事を一覧にまとめました。 Tweakpaneの記事まとめ Tweakpaneとは Tweakpaneの記事まとめ Tweakpaneの導入 パラメータの調整 値の範囲の制限:min,max,step,options 色の調整 チェックボックスの追加(真偽値を扱う) グルーピン…

【SVG】テキスト

SVG

SVGは、テキストを描画することもできます。図形とは違うテキスト特有の属性があり、それを使って装飾します。また、パスに沿ってテキストを配置することもできます。 text:テキストの記述と属性 テキストの装飾 tspan:テキストの一部分に対するスタイルの適…

【SVG】パス

SVG

SVGは、図形だけではなくパスも描画できます。パスを使ってより複雑な形状を描画することができます。パスは、コマンドを記述してパスデータを手動で作成します。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。 path:パスを描画す…

【SVG】基本形状の描画

SVG

基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。 基本形状の種類 rect:長方形の記述と属性 circle:円の記述と…

【SVG】SVGの基礎

SVG

SVGの基礎として「ひな型ファイル」「座標系」「色の指定」「グループ」「リンク」についてご紹介します。まずは、ひな型となるファイルを作成します。次に、座標系や色の指定などの基本を理解します。そして、グループとリンクについて知っていきます。 SVG…

【SVG】SVGについて

SVG

画像形式のひとつである「SVG」について書きます。SVGは、Webで使える画像形式です。使いどころは限られてしまうかもしれませんが、技術のひとつとして触れていきたいと思います。アニメーションを指定できるので、どのような表現ができるのか探っていきたい…

【p5.js】p5.jsの全体像と入門記事のまとめ、今後の展望

p5.jsの全体像について書きました。合わせて当ブログで紹介した入門記事をまとめました。今後の展望として、p5.jsを勉強した後に何を勉強したら良いのかを挙げてみました。参考程度にどうぞ。 p5.jsの全体像 p5.jsの入門記事のまとめ 今後の展望 p5.jsの全体…

【p5.js】画像の読み込みと表示:preload(),loadImage(),image()

p5.jsは、画像を表示することができます。画像などのデータは、予めpreload()内で読み込みます。その後、setup()やdraw()内で処理します。preload()内では、画像の他に音楽や動画、モデリングデータ、JSONデータなどを読み込めます。 画像の読み込みと表示:p…

主要なAdobe製品の紹介

数多くあるAdobe製品の中から主要なものについて、簡単にご紹介します。中には似たものもあるので、その違いについても書きます。私自身は、PhotoshopとIllustrator、Dreamweaverの3つしか使ったことがありません。他のアプリケーションにも興味があるので、…

【p5.js】カメラの軌道制御とデバッグモード:orbitControl(),debugMode()

「カメラの軌道制御」と「デバッグモード」の方法について書きます。カメラを操作できるようになると様々な方向から3D空間を見ることができます。モデルを配置して、様々な方向から見てみると面白いです。デバッグモードは、開発中に表示位置や方向を確認す…

【p5.js】円を追いかける円のアニメーション

円を追いかける円のアニメーションについて書きます。まずは、小さなプログラムから作っていきます。次に円の数を増やして、配列の扱い方を見ていきます。おまけとして、プログラムをオブジェクト指向的な書き方に書き換えてみます。 作成手順 マウスを追い…

【Tweakpane】値の書き出し:exportPreset(),JSON.stringify()

GUIで操作した値を書き出す方法をご紹介します。値を書き出しておくと、後で必要になったときに便利です。また、書き出した値を扱いやすいように、JSON形式に変換しておきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を…

【Tweakpane】ボタンの追加:addButton(),refresh()

ボタンを追加し、クリックで値を変更できるようにしていきます。ボタンの追加とボタンがクリックされたときの処理を書きます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 ボタンの追加:addButton() ま…

【Tweakpane】グルーピング:addFolder()

入力項目がたくさん増えると分かりにくくなります。そのため、入力項目をフォルダ毎に分けて、グループ分けします。視覚的に分かりやすくなるように、区切り線も使います。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考…

【Tweakpane】チェックボックスの追加(真偽値を扱う)

チェックボックスを追加して、立体の回転を操作していきます。チェックボックスの「オン」と「オフ」で、回転するしないを操作します。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 真偽値(true or false…

【Tweakpane】色の調整

色の値を「数値」と「カラーピッカー」で入力できるようにします。今回は、背景色を変更することで、色の調整方法を見ていきます。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考にしています。 色の調整 まとめ 参考サイ…

【Tweakpane】値の範囲の制限:min,max,step,options

入力値の範囲を制限する方法を書きます。前回は、数値の入力のみでした。今回からは、それ以外の入力(スライダー、プルダウンメニュー)について書きます。値の範囲の制限と合わせて確認してください。なお、この記事はドットインストールというプログラミン…

【Tweakpane】パラメータの調整

パラメータを調整できるように入力フォームを作ります。数値を入力して値を指定できるようになります。これができると、インタラクティブに値を変更できるようになります。なお、この記事はドットインストールというプログラミング学習サービスの内容を参考…

【Tweakpane】Tweakpaneの導入

パラメータ調整用のライブラリであるTweakpanをp5.jsと組み合わせて使います。パラメータの値の変更が、即座に反映されるので、作業の効率化になります。今回は、Tweakpaneの導入までの内容を記します。なお、この記事はドットインストールというプログラミ…