2019-12-01から1ヶ月間の記事一覧
jQueryでHTML要素の中央位置(座標)を取得します。var left = $(element).offset().left; var top = $(element).offset().top; var width = $(element).width(); var height = $(element).height(); offsetCenterLeft = left+(width/2); offsetCenterTop = to…
CSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見…
今回も冬をテーマにした画像のパズルです。 とてもきれいな写真で、水面に反射した景色がさらに美しくさせます。 画像の半分が反転しているような形になっているので、想像力が良い方は元の画像が見えてくるかもしれません。 ブラウザで遊べる、脳トレスライ…
今回も冬をテーマにした画像のパズルです。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 Photo by Aaron Wilson on Unsplash ヒント…
秋も終わり、冬になり本格的に寒くなってきました。冬と言えば寒さ、雪が思い浮かびます。今回のパズルはそんな冬をテーマにした画像です。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動さ…
カテゴリー別アーカイブ | 全カテゴリー別記事一覧ページ | サイトマップページ...カスタマイズ概要一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。サイト内記事探索が一つのページで可能になるため…
ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 ヒント:元の画像を見る Photo by Noah Silliman on Unsplash 評価別クリア時間目安 Ex…
ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、似たようなピースが多くつながりもわかりずらいためかなり難しくなっていると…
HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。 @keyframes規則を使用することでアニメーションを作成することができます。@keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }@keyframes規則についての詳細は「@keyframes - CS…
ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、ピースのつながりがわかりずらいため難しくなっています。 ヒント:元の画像を…