jQuery 独自メソッドを作る $(this).hoge();のように独自のメソッドを作りたい時の書き方のサンプルです。 $.fnと$.extendさえ押さえておけば自前のメソッドが作れます。 例えば下記はmyscrollというメソッドを作っています。 $.fnを付けて宣言し、$.extendで初... 2020-03-29 16:52:59
JS 波のアニメーション canvasを使ったアニメーションで波のような動きのサンプルです。 円弧の描画を繰り返して、波のようなアニメーションを実装しています。 実装にはjQueryを使っています。 HTML [[<canvas id="canvas_wav... 2020-03-28 22:57:39
CSS 幅固定レイアウト gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ... 2020-03-16 23:26:20
CSS tableを使わないgridの表 display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。... 2020-03-11 23:27:24
HTML コンテンツの表示・非表示 HTML5から追加されたタグでJavaScriptを使わないでコンテンツの表示・非表示を実装するサンプルです。 クリックすると隠れている要素を表示させるJSはよく実装します。 よくアコーディオンと呼ばれるUIですが、HTMLだけでも表現することが可能です。 なにも装... 2020-03-10 07:10:08
unix viでよく使うコマンド 一度離れるとすぐ忘れてしまうので、とにかくこれだけは思い出したいviのコマンドのメモです。 また使う頻度が上がってきたら追加したいと思います。 [[... 2020-03-08 22:22:09
JS 音が出るボタン ボタンを押すと音が出るサンプルです。 HTMLのaudioタグを使ったサンプルです。 下のボタンを押すと音がでます。 ピンポン HTMLはこちら [[<div id="de... 2020-02-27 22:09:39
JS 動画から静止画を作成 カメラから動画を表示し、その動画から画像を作成するサンプルです。 動画を表示するの続きになります。 動画から静止画を作成するサンプルです。 まず、動画を写すカメラを選択。 自分側のカメラの映像を表示 向こう側の... 2020-02-24 10:11:29
SVG 円柱のサンプル SVGとdivを組み合わせて円柱を作るサンプルです。 SVGのellipseを使って楕円を作り、円柱を表現してみます。 CSSの角丸(border-radius)で頑張って作ることもできますが、個人的にはこの方が簡単に円柱を作れ... 2020-02-17 22:20:09
htaccess リライトとリダイレクト 絶対使うときがあるけど、いつも忘れてしまう「RewriteRule」のでメモしときます。 まず、RewriteEngineは必須で記述。 [[RewriteEngine On]] まずは、リライト [[RewriteRule ^sitemap.xml$ /sitemap/xml/]] 完全一致したらリ... 2020-02-16 22:49:09