「元Webデザイナー兼コーダーの備忘録」のブログにようこそ!!
このページは、サイトマップです。毎月月末頃に更新しています。
- HTML入門
- CSS入門
- JavaScript入門
- Vue.js
- Three.js
- p5.js
- Processing
- Tweakpane
- SVG
- mustache
- YAML
- Git・GitHub
- デザイン
- Atom
- 参考書&マンガ
- はてなブログカスタマイズ
- ブログ運営
- お金のこと
- 雑記
- その他
HTML入門
「HTML入門まとめ」では、知っておきたい基礎知識やつまずきそうなところに絞って記事にしています。ウェブサイト作りといったら、HTML、CSS、JavaScriptは関連します。それぞれの役割については、「HTML,CSS,JavaScriptの役割」をご覧ください。Pugについては、「Pugの学習メモ」をご覧ください。
» Pugの学習メモ
CSS入門
- CSSとは、CSSの書き方
- CSSを記述する場所
- セレクタの種類と書き方
- 優先度
- CSSでつまずくところ
- CSSでアニメーションする方法
- 色の指定方法
- aタグのCSSについて
- リストのCSSについて
- z-indexの使い方
- borderプロパティの使い方
- border-radiusプロパティの使い方
- box-sizingプロパティの使い方
- text-shadowプロパティの使い方
- box-shadowプロパティの使い方
- コメントの役割とコードの視認性
- overflowプロパティの使い方
- 【Sass】Sassを始める・試す
- Sass(SCSS)の学習メモ
JavaScript入門
- 【JavaScript入門】JavaScriptでできること
- 【JavaScript入門】JavaScriptの全体像について把握する
- JavaScriptでアニメーションする方法
- 【JS中級者向け参考書】「[改訂新版]JavaScript本格入門~モダンスタイルによる基礎から現場での応用まで」の感想
- 【JavaScript】必須パターン
- 【JavaScript】JSONデータの読み込み
- 【jQuery】Ajaxで外部データを取得する
- Ajaxで外部データを取得し、テンプレートに読み込む
- 【JavaScript】モジュールの書き方
- 【JavaScript】モジュールのimport/export(1)
- 【JavaScript】モジュールのimport/export(2)
- 【JavaScript】モジュールのimport/export(3)
Vue.js
- 【Vue.js】Vue.jsの導入
- 【Vue.js】条件付きレンダリング:v-ifとv-showで表示の制御
- 【Vue.js】リストレンダリング:v-for
- 【Vue.js】属性の書き換え:v-bind
- 【Vue.js】イベントハンドリング:v-on
- 【Vue.js】双方向バインディング:v-model
- 【Vue.js】コンポーネントでパーツを作る
- 【Vue.js】コンポーネントの基本:Vue.component()
- 【Vue.js】コンポーネントにデータを渡す:props
- 【Vue.js】コンポーネントのイベント:$emit(),$event
- 【Vue.js】コンポーネントでv-modelを使う
- 【Vue.js】Vue.jsの記事まとめ
Three.js
- 【Three.js入門】Three.jsの導入と基本
- 【Three.js入門】アニメーション:requestAnimationFrame()
- 【Three.js入門】ヘルパー:Helpers
- 【Three.js入門】色の指定:THREE.Color()
- 【Three.js入門】物体操作:position,scale,rotation
- 【Three.js入門】カメラの手動制御:OrbitControls
- 【Three.js入門】図形:Geometries
- 【Three.js入門】質感:Materials
- 【Three.js入門】影
- 【Three.js】Three.jsの記事まとめ
p5.js
- 【p5.js】p5.jsの導入
- 【p5.js】p5.jsの基本的な書き方
- 【p5.js】四角形をアニメーションさせる
- 【p5.js】色の指定
- 【p5.js】定義済み変数とrectMode()
- 【p5.js】楕円と直線:ellipse(),line()
- 【p5.js】塗りと線:fill(),stroke()
- 【p5.js】テキストの描画
- 【p5.js】図形の変形:push(),pop()
- 【p5.js】マウスの座標を取得してインタラクティブなものを作る:mouseX,mouseY
- 【p5.js】キー入力を取得してインタラクティブなものを作る:keyIsPressed,keyTyped(),keyIsPressed()
- 【p5.js】乱数で模様を描く:random()
- 【p5.js】三角関数:sin(),cos()
- 【p5.js】DOM:crerateSlider(),createButton()
- 【p5.js】p5.jsで作成したものを画像として保存する
- 【p5.js】canvasタグを任意の場所に表示させる
- 【p5.js】円を追いかける円のアニメーション
- 【p5.js】カメラの軌道制御とデバッグモード:orbitControl(),debugMode()
- 【p5.js】画像の読み込みと表示:preload(),loadImage(),image()
- 【p5.js】p5.jsの全体像と入門記事のまとめ、今後の展望
- 【p5.js】3Dモデルの表示:preload(),loadModel(),model()
Processing
- Processingのダウンロードとインストール:Linux編
- Processingにおけるランダムウォーク(random walk)
- Processing:9方向に移動するランダムウォーク(random walk)
- Processing:ランダムウォークの確率
- Processing:ランダムウォークの確率の操作
- Processingにおける正規分布(ガウス分布)
- Processing:パーリンノイズとパーリンノイズウォーク
- Processing:2次元ノイズ
- Processing:グレースケールで乱数を比較する
- Processing:PVectorと弾むボールのプログラム
- Processingにおけるベクトルの加法
- Processingにおけるベクトルの減法
- Processingにおけるベクトルのスカラー倍(実数倍)
- Processingにおけるベクトルの大きさ
- Processingにおけるベクトルの正規化
- Processing:PVectorと速度と加速度
- Processing:PVectorと加速度
- Processingで学ぶ静的メソッドとインスタンスメソッド
- Processing:PVectorと加速度(マウスに向かう加速)
- Processing:PVectorと加速度(マウスに向かう複数のボールの加速:配列)
- Processing:ニュートンの運動方程式
- Processing:ニュートンの運動方程式:複数のオブジェクトに作用する力
- Processing:重力と質量
- Processing:摩擦
- Processing:流体の抗力
- Processing:万有引力
- Processing:万有引力と複数のオブジェクトに作用する力
- Processing:万有引力と相互誘引
- Processing:回転運動の速度と加速度
- Processing:万有引力と回転運動:複数のオブジェクトに作用する力
- Processing:回転角の計算
- Processing:極座標とデカルト座標
- Processing:極座標とデカルト座標:振り子のようなものを作る
- Processingにおけるキー入力の例
Tweakpane
- 【Tweakpane】Tweakpaneの導入
- 【Tweakpane】パラメータの調整
- 【Tweakpane】値の範囲の制限:min,max,step,options
- 【Tweakpane】色の調整
- 【Tweakpane】チェックボックスの追加(真偽値を扱う)
- 【Tweakpane】グルーピング:addFolder()
- 【Tweakpane】ボタンの追加:addButton(),refresh()
- 【Tweakpane】値の書き出し:exportPreset(),JSON.stringify()
- 【Tweakpane】Tweakpaneの記事まとめ
SVG
- 【SVG】SVGについて
- 【SVG】SVGの基礎
- 【SVG】基本形状の描画
- 【SVG】パス
- 【SVG】テキスト
- 【SVG】座標系の変換:transform
- 【SVG】線の形状
- 【SVG】アニメーション1(属性値の変化)
- 【SVG】アニメーション2(座標系の変換)
- 【SVG】アニメーション3(パスに沿った移動)
- 【SVG】CSSの記述
- 【SVG】スクリプトの基礎
- 【SVG】イベント
- 【SVG】イベントオブジェクト
- 【SVG】イベントを介した属性値の取得・設定
- 【SVG】テキストオブジェクト
- 【SVG】特定の要素の取得
- 【SVG】要素の追加と削除
- 【SVG】テキスト要素の生成と追加
- 【SVG】イベントリスナによるイベント処理
- 【SVG】アニメーションの開始と終了の制御
- 【SVG】setInterval()を使ったアニメーション
- 【SVG】サンプルアニメーション:円
- 【SVG】SVGの表示・読み込み
- 【SVG】SVGの素材を作る・書き出す
- 【SVG】サンプルアニメーション:サークルのアニメーション
- 【SVG】クリッピング
- 【SVG】クリッピングとイベント
- 【SVG】グループにまとめる:g要素,symbol要素,use要素,defs要素
- 【SVG】path要素を分割して個別にスタイルを適用する
- 【SVG】素材の再利用:symbol
- 【SVG】JavaScriptを含むSVGをHTMLに読み込ませる
- 【SVG】SVG記事のまとめと今後の取り組み
mustache
- 【mustache入門:Ruby版】mustacheの導入
- 【mustache入門:Ruby版】データの埋め込み
- 【mustache入門:Ruby版】HTMLタグの埋め込み
- 【mustache入門:Ruby版】区切り記号の変更
- 【mustache入門:Ruby版】真偽値(セクション)
- 【mustache入門:Ruby版】複雑なデータ(セクション)
- 【mustache入門:Ruby版】テンプレートファイルの部品化(partials)
- 【mustache入門:JS版】mustacheの導入
- 【mustache入門:JS版】コードの整理
- 【mustache入門:JS版】データを別ファイル(JSONP)にして読み込む
- 【mustache】mustacheの記事まとめ
- 【mustache入門:JS版】mustache.jsの再入門
YAML
- YAML入門:YAML記法を試す
- YAML入門:スカラー
- YAML入門:シーケンス(配列)
- YAML入門:マッピング(ハッシュ)
- YAML入門:複雑なデータ
- YAML入門:改行を含むデータの扱い
- YAML入門:アンカーとエイリアス
- YAML入門:ハッシュのマージ
- YAML入門:一つのYAMLファイルに複数のデータセットを記述する
- YAML入門:YAML記法の確認:to_yaml
- YAML入門まとめ
Git・GitHub
デザイン
Atom
参考書&マンガ
当ブログで紹介した参考書とマンガのまとめは「参考書とマンガの読書記録」をご覧ください。また、2021年からの読書記録を年別で記録しています。
私事ではありますが、IT系の技術書をよく読みます。そこで、私なりにしている「IT系の技術書の選び方」もお伝えします。
はてなブログカスタマイズ
- グローバルメニューの追加
- 目次と見出しなど
- サイドバー、aboutページ、Not Foundページなど
- 各ページのクラス名
- レスポンシブ対応
- 関連記事
- サイドバー
- 高度なカスタマイズ
- はてなブログのaboutページの活用方法について考える
- はてなブログのアイコンフォントの使い方
- 更新日の表示
ブログ運営
「ブログの運営記録」では、当ブログの紹介、記事の作成法、サイト分析ツール、収益化、デザインカスタマイズ、ブログ運営の振り返りについてまとめています。
» ブログの運営記録
ブログ運営の振り返りは、以下の記事から読めます。
勉強の振り返りは、以下の記事から読めます。
お金のこと
- 【お金のこと】iDeCoとNISAのテレビ番組を見て思ったこと
- 【お金のこと】iDeCoと(つみたて)NISAの勉強
- SBI証券メインポイントの切り替え(Vポイント→Tポイント、Pontaポイント、dポイント)
- 【お金のこと】iDeCoとつみたてNISAを始めてみる
- 【お金のこと】FIREという考え方について
雑記
- Windowsパソコンの基本操作
- 現状のプログラミング学習法の紹介(アナログ・デジタル)
- プログラミング学習ノート作り
- 個人がネット上で情報発信する際に取り得る手段
- 画像ファイルの種類
- 画像ファイルの形式を知ることの利点
- 覚えておくと便利なショートカットキー
- ブラウザとウェブサイト制作の関係
- PC買い替え時にやること
- スマホ買い替え時にやること
- 【2021年】ハイスペックスマホを使わない理由
- 【プログラミング初心者の方へ】プログラミング学習に向けて
- パーティション分割
- 初めてプログラミングを勉強する方にJavaScriptをオススメします
- 【Windows】環境変数について調べました
- 【TVアニメ】ゴジラS.P<シンギュラポイント>で出てくるハッシュ関数(MD5)について
- Vue.jsを勉強し始めたら収拾がつかなくなりそうになった話
- 【アプリ】Spotifyを使ってみての感想
- reCAPTCHA(リキャプチャ)v3とは
- プログラミングの考え方1:反復処理
- プログラミングの考え方2:分岐処理
- 【Java】クラスライブラリ、パッケージについて調べた
- Android Studioのエラーメッセージの文字化けを解消する
- jQuery本体の中身を見る
- GitHubにAtomの設定をバックアップする
- テキストエディタの遍歴と使い分け
- Linux Mintのインストール
- LinuxにNode.jsをインストールする
- LinuxにVisual Studio Codeをインストールする
- Node.jsとVS CodeでHTML・CSSの開発環境を作る
- 高校数学の学び直し
- 高校数学の学び直しその2
- JDKのインストール
- 高校数学の学び直しその3
- 「Amazonゴールデンウィークセール2023」で楽しく過ごす方法!おうち時間や旅行にぴったりの商品を紹介!