IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

2019-01-01から1年間の記事一覧

【JS】要素中央の位置(座標)を取得する | JavaScript | jQuery

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】でiPhoneのスイッチのようなトグルボタンを設置する | CSS+JavaScript | iosスイッチ

CSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。webページではなかなか見…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

今回も冬をテーマにした画像のパズルです。 とてもきれいな写真で、水面に反射した景色がさらに美しくさせます。 画像の半分が反転しているような形になっているので、想像力が良い方は元の画像が見えてくるかもしれません。 ブラウザで遊べる、脳トレスライ…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

今回も冬をテーマにした画像のパズルです。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 Photo by Aaron Wilson on Unsplash ヒント…

【パズル】脳トレ ― スライドパズル - テーマ 冬 【ブラウザゲーム】

秋も終わり、冬になり本格的に寒くなってきました。冬と言えば寒さ、雪が思い浮かびます。今回のパズルはそんな冬をテーマにした画像です。 ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動さ…

カテゴリー別にすべての記事一覧を表示する | 全カテゴリー別記事一覧ページ | はてなブログカスタマイズ

カテゴリー別アーカイブ | 全カテゴリー別記事一覧ページ | サイトマップページ...カスタマイズ概要一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。サイト内記事探索が一つのページで可能になるため…

【パズル】脳トレ ― スライドパズル : Photo by Noah Silliman on Unsplash【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 ヒント:元の画像を見る Photo by Noah Silliman on Unsplash 評価別クリア時間目安 Ex…

【パズル】脳トレ ― スライドパズル Level:7【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、似たようなピースが多くつながりもわかりずらいためかなり難しくなっていると…

虹色に色が変わるアニメーションスタイルの設定 | animation | CSS | HTML

HTMLで虹色に色が変わるアニメーションスタイルを設定する方法です。 @keyframes規則を使用することでアニメーションを作成することができます。@keyframes [ 名前 ]{ [ 作動するタイミング ]{ スタイル } }@keyframes規則についての詳細は「@keyframes - CS…

【パズル】脳トレ ― スライドパズル Level:6【ブラウザゲーム】

ブラウザで遊べる、脳トレスライドパズル(Slide Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。 欠けているピースは右下です。 今回は、ピースのつながりがわかりずらいため難しくなっています。 ヒント:元の画像を…

【パズル】脳トレ ― スライドパズル Level:5【ブラウザゲーム】

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

【パズル】脳トレ ― スライドパズル Level:4【ブラウザゲーム】

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

【パズル】脳トレ ― スライドパズル Level:3【ブラウザゲーム】

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

【パズル】脳トレ ― スライドパズル Level:2 【ブラウザゲーム】

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

【パズル】脳トレ ー スライドパズル Level:1 【ブラウザゲーム】

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

URLの入力だけで任意の場所に【おすすめ記事】を表示する「はてなブログモジュール」の作成 | はてなブログカスタマイズ

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

はてなブログでJavaScript/HTMLコードを記述する方法-スマホ対応版 | はてなブログカスタマイズ方法

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

はてなブログで【Googleアドセンス】の審査が通らない方へ - ドメインに「www」はつけるべきか?

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

【jQuery】要素検索エラーにより知らないid「sizzle...」が生成される不思議な現象の謎

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

JavaScriptに静的変数はない?staticはクラス内静的メソッドを定義するキーワードである 【JavaScript】

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

コードフォーマッター | コード公開のため組み込みも可 | 【JavaScript】| コード整形ツール Code formatter

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

パンくずリスト生成ツール | SEO対策 | Google検索

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

正規表現 | HTMLタグのみを取得する | JavaScript

正規表現による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>

濁点・半濁点文字を一文字ずつに変換する【濁点・半濁点自動変換ツール】 - 【JavaScript】

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

【ゲーム】タイピング(フリック入力)練習ゲーム【ことわざ】 ー ちょっとした暇つぶしに...

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

【CSS】背景パターン 一風変わったおしゃれな柄物背景 -サンプル一覧- | 【WEBデザイン】

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

iPhoneで【Safari】のバージョンを確認する - userAgent情報の確認

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

複数の文字列をそれぞれ別の文字列に置換する方法 -正規表現【JavaScript】

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

【はてなブログカスタマイズ】2ステップでホーム画面にシェアボタン(あとで読む系)を表示させる - スマホからでも簡単カスタマイズ

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

【HTML】画像やアイコン・文字などを反転させる - scale()を使った方法

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