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)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、ピースのつながりがわかりずらいため難しくなっています。 ヒント：元の画像を…

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 ヒント：元の画像を見る Level：5 Photo by Michael Liao on Unsplash

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ヒント：左上にはバツ印が写った画像のピースが入ります。 Level：4

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。 前回までとは違い、ピースに番号が振らていないため少し難しくなっています。 Level：３

ブラウザで遊ぶことができる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ピースをスライドさせて、左上から右に数字が順番になるように完成させてください。 Level：2

ブラウザで遊ぶことができる、脳トレスライドパズル(Slide Puzzle)ゲームです。 ピースをスライドさせて、左上から右に数字が順番になるように完成させてください。 Level：１

URLを入力するだけの簡単作業で、おすすめの記事を表示させる「はてなモジュール」を作成するはてなブログカスタマイズです。はてなブログおすすめ記事モジュールの目的。希望する場所に希望する記事の一覧を表示するためのはてなブログモジュールを作成する…

はてなブログをカスタマイズするのに必要な作業として、HTMLコードの記述があります。この作業は特に難しくはありませんが、スマホからはてなブログをカスタマイズする方法は、PCとは違うので当記事に記します。...スマホのブラウザからもheadに要素を追加に…

最近、はてなブログでGoogleAdsense(グーグルアドセンス)の審査がいつになっても通らないという記事をいくつか見かけたので、私が試してうまくいった情報を共有します。GoogleAdsenseに登録するサイトのURLに「www」はいらないはてなブログで独自ドメインを…

先日、HTML要素に「"」と「'」(ダブルクォーテーション、シングルクオーテーション)を含むクラス名を設定して、jQueryの要素検索でそのクラス名を指定して取得しようとしたときのことです。実行すると、Syntax error, unrecognized expressionとconsoleに表…

結論 JavaScriptに静的変数を定義するキーワードはない。staticはクラス内メソッドを静的メソッドとして定義するキーワードである。 しかし、JavaScriptで静的変数(独自)を実装する方法はある模様。 参考文献 developer.mozilla.org developer.mozilla.org …

Photo by Chris Ried on Unsplash コード整形ツール HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) ※注意：一般的なHTMLコードに適しています(整形が…

パンくずリスト生成ツールBreadcrumb list creation tool入力欄にパンくずのリンク先のURL、パンくずリスト名を入力することで、コードが生成されます。...パンくずリストとはGoogle検索では、検索結果にパンくずリストが表示されます。パンくずリストはその…

正規表現によるHTMLタグのみの抽出 属性の取得を行わないHTMLタグのみを抽出する正規表現です。 str.match(/<([\w]*?>|\/[\w]*?>|[\w]* |\/[\w]* )/g) <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> </li></ol>

コード ひらがなの濁点・半濁点文字をそれぞれ一文字ずつに分ける(変換する)処理コード。また、文字と濁点・半濁点を一文字にする処理、その両方の処理もあり。ツール 上記のコードを実装したツール。文字を入力しボタンを押すだけで簡単に文字列の変換をし…

暇つぶし用のゲームに、タイピング練習ゲームを開発しました。 PCで遊ぶ場合は、ローマ字入力設定でタイピング練習ができます。スマホの場合は、かな入力設定で日本語入力のフリック入力練習ができます。

CSSだけでできる柄物の背景を、備忘録として書き記している記事です。ドット柄を表現できる背景色のCSS一覧・緑-水玉(濃緑)・カーボン素材風・青..光沢のある背景色のCSS一覧・青・赤

現在あなたが使用しているブラウザのユーザーエージェント情報 上記のuserAgent情報から判明したあなたがお使いのSafariのバージョンは です。 // {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","posi…

複数の文字列を同一の文字列に置換する 複数の文字列をそれぞれ別の文字列に置換する 複数の文字列を同一の文字列に置換する 例 「apple,banana」を「cucumber」に置換する。 var str="apple2 banana3 orange8 cucumber0" str=str.replace(/(apple)|(banana)…

今回のはてなブログカスタマイズは、ホーム画面の記事一覧にシェアボタン(後で読む系)を搭載するカスタマイズです。ホーム画面にシェアボタンを表示させる当カスタマイズで表示させるシェアボタンは、はてなブックマーク・Pocketです。これらのボタンはシェ…

Photo by Devin Avery on Unsplash scale()を使ったHTML要素を反転させる方法 コード 見本 通常 反転 上下反転 scale()を使ったHTML要素を反転させる方法 [HTML] [CSS] [スタイル] コード transform:scale(-1,1); 見本 通常 通常 HTML CSS JS 5 Photo by Thi…