人気のあるUIサンプル

• htaccess リライトとリダイレクト
• 絶対使うときがあるけど、いつも忘れてしまう「RewriteRule」のでメモしときます。 まず、RewriteEngineは必須で記述。 [[RewriteEngine On]] まずは、リライト [[RewriteRule ^sitemap.xml$ /sitemap/xml/]] 完全一致したらリ...
• 2020-02-16 22:49:09

• SVG 円柱のサンプル
• SVGとdivを組み合わせて円柱を作るサンプルです。 SVGのellipseを使って楕円を作り、円柱を表現してみます。 CSSの角丸（border-radius）で頑張って作ることもできますが、個人的にはこの方が簡単に円柱を作れ...
• 2020-02-17 22:20:09

• JS　動画から静止画を作成
• カメラから動画を表示し、その動画から画像を作成するサンプルです。 動画を表示するの続きになります。 動画から静止画を作成するサンプルです。 まず、動画を写すカメラを選択。 自分側のカメラの映像を表示 向こう側の...
• 2020-02-24 10:11:29

• JS 音が出るボタン
• ボタンを押すと音が出るサンプルです。 HTMLのaudioタグを使ったサンプルです。 下のボタンを押すと音がでます。 ピンポン HTMLはこちら [[<div id="de...
• 2020-02-27 22:09:39

• unix viでよく使うコマンド
• 一度離れるとすぐ忘れてしまうので、とにかくこれだけは思い出したいviのコマンドのメモです。 また使う頻度が上がってきたら追加したいと思います。 [[...
• 2020-03-08 22:22:09

• HTML コンテンツの表示・非表示
• HTML5から追加されたタグでJavaScriptを使わないでコンテンツの表示・非表示を実装するサンプルです。 クリックすると隠れている要素を表示させるJSはよく実装します。 よくアコーディオンと呼ばれるUIですが、HTMLだけでも表現することが可能です。 なにも装...
• 2020-03-10 07:10:08

• CSS tableを使わないgridの表
• display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。...
• 2020-03-11 23:27:24

• CSS 幅固定レイアウト
• gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ...
• 2020-03-16 23:26:20

• JS 波のアニメーション
• canvasを使ったアニメーションで波のような動きのサンプルです。 円弧の描画を繰り返して、波のようなアニメーションを実装しています。 実装にはjQueryを使っています。 HTML [[<canvas id="canvas_wav...
• 2020-03-28 22:57:39

• jQuery 独自メソッドを作る
• $(this).hoge();のように独自のメソッドを作りたい時の書き方のサンプルです。 $.fnと$.extendさえ押さえておけば自前のメソッドが作れます。 例えば下記はmyscrollというメソッドを作っています。 $.fnを付けて宣言し、$.extendで初...
• 2020-03-29 16:52:59