IttheBest
読者になる
住所
出身
ハンドル名
Itさん
ブログタイトル
IttheBest
ブログURL
https://www.it-the-best.com
ブログ紹介文
IT関連の情報を発信します。 主に、HTML、CSS、JavaScriptのプログラミング。そのほか、ソフトウェア開発, はてなブログカスタマイズも。
自由文
-
更新頻度(1年)

60回 / 150日(平均2.8回/週)

ブログ村参加:2019/05/26

Itさんの人気ランキング

  • IN
  • OUT
  • PV
今日 10/21 10/20 10/19 10/18 10/17 10/16 全参加数
総合ランキング(IN) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 975,668サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
ブログブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 11,563サイト
ブログアクセスアップ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,232サイト
ブログ初心者 圏外 圏外 圏外 圏外 圏外 圏外 圏外 3,803サイト
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,821サイト
IT技術メモ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,096サイト
今日 10/21 10/20 10/19 10/18 10/17 10/16 全参加数
総合ランキング(OUT) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 975,668サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
ブログブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 11,563サイト
ブログアクセスアップ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,232サイト
ブログ初心者 圏外 圏外 圏外 圏外 圏外 圏外 圏外 3,803サイト
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,821サイト
IT技術メモ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,096サイト
今日 10/21 10/20 10/19 10/18 10/17 10/16 全参加数
総合ランキング(PV) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 975,668サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
ブログブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 11,563サイト
ブログアクセスアップ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,232サイト
ブログ初心者 圏外 圏外 圏外 圏外 圏外 圏外 圏外 3,803サイト
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,821サイト
IT技術メモ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 1,096サイト

Itさんのブログ記事

1件〜30件

新機能の「ブログリーダー」を活用して、Itさんの読者になりませんか?

ハンドル名
Itさん
ブログタイトル
IttheBest
更新頻度
60回 / 150日(平均2.8回/週)
読者になる
IttheBest
  • 【jQuery】要素検索エラーにより知らないid「sizzle...」が生成される不思議な現象の謎

    先日、HTML要素に「"」と「'」(ダブルクォーテーション、シングルクオーテーション)を含むクラス名を設定して、jQueryの要素検索でそのクラス名を指定して取得しようとしたときのことです。実行すると、Syntax error, unrecognized expressionとconsoleに表示されました。ふとその要素を見てみると知りもしないIDが設定されていました!そのIDは、「sizzle」と10ケタ以上の数字を合わせたものでした。(id="sizzle123456.....")理解できずにソースコードを見返して自分で設定しているのかを確認しましたが、もちろんそのような処理は書かれておらず、気になって「jQuery sizzle」とGoogleで調べてみました。検索結果のタイトルには「jQuery」と「sizzle」のキーワードが存在するものがあり、jqueryに関連するものだとわかりひとまず安心しました。 そして、検索結果内のひとつのページをのぞいてみると、「sizzle」についてこのようなことが書かれていました。SizzleとはjQueryで要素検索を行うためのモジュールであるどうやら、sizzleはjQueryのモジュールの名前らしいです。ですが、どうして要素検索をしてエラーとなった要素にIDが設定されたのかは謎です。公式ドキュメントを調べれば情報が載っていると思いますが...以上、jQueryの面白い発見でした。

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

    結論 JavaScriptに静的変数を定義するキーワードはない。staticはクラス内メソッドを静的メソッドとして定義するキーワードである。 しかし、JavaScriptで静的変数(独自)を実装する方法はある模様。 参考文献 developer.mozilla.org developer.mozilla.org 先日、JavaScriptの静的変数について調べて、JavaScriptには静的変数はないことがわかりました。 調べたきっかけは、JavaScriptのクラス構文を記述するために、公式ドキュメントを見ながらコーディングをしていたときです。 勘違いでstatic変数があると思い込み、st…

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

    Photo by Chris Ried on Unsplash コード整形ツール HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) ※注意:一般的なHTMLコードに適しています(整形が不完全な部分もあるとおもいます...) inputに整形したいHTMLコードを入力(貼り付け)します。(初期表示のテキストはサンプルです。) outputに整形されたHTMLコードが表示されます。 input <!--sample--> <div id="code-formatter"…

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

    パンくずリスト生成ツールBreadcrumb list creation tool入力欄にパンくずのリンク先のURL、パンくずリスト名を入力することで、コードが生成されます。...パンくずリストとはGoogle検索では、検索結果にパンくずリストが表示されます。パンくずリストはそのページがサイト階層内のどこに位置するのかを示します。メリット...パンくずリストを表示することは、「アクセス数アップ」、「サイト回遊率向上」に期待できます。また...検索結果の順位向上につながり、SEO対策としても効果的です。...コードを確認する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"> <!-- Method 1 (preferred) --> <a itemprop="item" href="htt…

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

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

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

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

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

    現在あなたが使用しているブラウザのユーザーエージェント情報 上記のuserAgent情報から判明したあなたがお使いのSafariのバージョンは です。 // {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","item":"https://www.it-the-best.com"},{"@type":"ListItem","position":2,"name":"ツール","item":"https:…

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

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

  • ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】

    JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 JavaScript - コピー方法 DEMO 入力欄 textarea sample text 112358130000000 copy copy 貼り付け用 入力欄以外 p sample text copy 貼り付け用 div sample text copy 貼り付け用 コード function copy(id) { var copyText = document.getElementById(id); va…

  • 【はてなブログカスタマイズ】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ébaud Faix on Unsplash <p>5</p><figure class="figure-image figure-image-fotolife mceNonEditable" title="Photo by Th…

  • 意外と簡単なMyシェアボタンの作成 -- 難しくて困るのは素材を集めることでした。

    シェアボタン制作 素材集め ボタン作成 リンク設定 リンク詳細設定 完成品 SNSシェアボタン作成は手を付けてみると意外と簡単でしたが、SNSアイコンやボタンスタイルなどの素材集めが案外難しくて困るPointでした。 当記事は、SNSシェアボタンの作成からアイコンやスタイルに使用した素材についてまとめたものです。 シェアボタン制作 はてなブックマーク・Facebook・ツイッター・tumblr・ライン・Pocketの各SNSのシェアボタン制作の素材からScript処理まで。 素材集め 各SNSのロゴ/アイコンのダウンロードサイトのリンクと、ロゴ/アイコンに近いHTMLカラーコード。 はてなブッ…各SNSの素材を使用したボタンの作成(はてなブックマーク・ライン以外はFont Awesomeからアイコンを使用しています)。...

  • 【はてなブログカスタマイズ】長くなったカテゴリーモジュールを開閉可能にする【CSS+JavaScript】

    概要前回、CSSだけではてなブログのカテゴリーモジュールに開閉機能を付けるカスタマイズ記事を投稿しました。今回の記事もカテゴリーモジュールに開閉機能を付けるカスタマイズになりますが、今回はCSSだけでなくCSS+JavaScriptによるカスタマイズになります。前回のCSSによる開閉機能は、CSSのマウスホバーをイベントとしていたためPC向けの機能としてカスタマイズをしました。今回は、クリック(タッチデバイスの場合タップ)をイベントに動作させるためスマホ(タッチデバイス)にも同様な動作が処理されるものになります。

  • 【CSS】のみで長くなったカテゴリーモジュールを開閉可能にする【はてなブログカスタマイズ】

    はてなブログを長いことやっていると、記事も多くなりカテゴリーの種類も多くなると思います。そんななかサイドバーにはてなモジュールのカテゴリーを設定していると、ズラーっとしたに長いカテゴリーリンクのリストができてしまうと思います。そんな長くなったカテゴリーリンクのリストにCSSだけで開閉機能を付けて、コンパクトにするはてなブログのカスタマイズになります。CSSだけで開閉機能を実現するには、マウスオーバー(マウスホバー)時に表示/非表示を切り替えて開閉させる方法をとります。しかし、スマートフォンなどタッチデバイスでのマウスオーバーはタップしたときに動作します。ですが意図しない動作になりがちなため、今回はPC向けの開閉機能のカスタマイズをしたいと思います。

  • 【見本あり】ドラッグスクロール可能なリストを1行で実現する -オプションでエンドレススクロールも可能-【jQueryPlugin】| listmousedragscroll.js

    スマートフォンのようになぞるようにしてスクロールができるjQueryPluginです。一行でマウスドラッグによるスクロールが可能なリストが実現できます。オプションには横幅、縦幅の指定や無限スクロール(endless scroll)の設定などができます。...使用方法からDEMO、メソッド・オプションの記載あり。更新情報2019-09-16https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js、 https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.js

  • 数字変換ツール - 話題のフィボナッチ数列の流れに乗って数字で遊ぶ - | Google試験にも出題された説がある数列の法則をもとにした数字生成

    フィボナッチ数列0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...先日、ドラマ「あなたの番です」の12話でフィボナッチ数列に関する話題が...今回は、そんなフィボナッチ数列のように面白い数列の法則にちなんだ数字変換ツールを作成しました。Googleの試験でも出てきたことがあると言われている数列1, 11, 12, 1121, 122111, 112213... 「12」は、「1が一つと2が一つ」1121「122111」は、「1が一つと2が二つと1が三つ」112213...数字変換ツール入力:出力:

  • 【読者になるボタン】をCSSだけで「立体感」のある押しボタンにカスタマイズする | はてなブログカスタマイズ

    読者になるボタンカスタマイズ不可能な読者になるボタンはてなブログの 設定 > 詳細 にある「読者になるボタン」はiframe要素なのでカスタマイズができません。カスタマイズ可能な読者になるボタンなので当サイトでは、サイドバーにある「プロフィールモジュール」の「読者になるボタン」を使ってカスタマイズをしました。サイドバーに表示される「読者になるボタン」はiframe要素でないためスタイルのカスタマイズ

  • slideToggle() - たった1行でできる表示/非表示の切り替え | jQuery Introduction

    slideToggle()slideToggle()メソッドはHTML要素の表示/非表示を切り替える時に使います。1行だけで表示/非表示を切り替えることができるのでとても便利です。...jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best...$("tag.classname").slideToggle();...demo素早い(0.3s)遅い(2.0s)表示/非表示切り替え後の処理...例...公式Document.slideToggle() | jQuery API Documentation

  • jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】

    jQuery使用方法読み込み外部から読み込む方法(CDN)jQuery:Google:Microsoft:「jQuery(公式)」「Google」「Microsoft」が公開しているjQueryファイルを読み込んでjQueryを使用します。三つのいずれかをheadタグ内に記述してjQueryを使用することができます。

  • toggleClass() - 条件式を書かずにクラスの追加/削除をする | jQuery Introduction

    toggleClass()このメソッドは、引数に指定されたクラスの追加または削除を行います。条件式を書くことなく容易にクラスの切り替えができます。例クラス"sample2"の追加と削除(クラスの切り替え) 追加$("div.sample1").toggleClass("sample2")

  • opacity - 透明度を変更し画像などをぼかす -hover処理あり- | CSS Introduction

    opacityCSSのopacityプロパティはHTML要素の透明度を変更することができ、画像にぼかしをいれたり透明にしたりすることができます。マウスオーバー時に画像をぼかすことで、画像の強調表示も可能です。opacity: 透明度(0.0~1.0); ...見本、例(html,css)あり...opacityを使ったWEBデザイン系の記事はコチラ...

  • transform:scale() - マウスホバー時に写真などを縮小/拡大する | CSS Introduction

    transform:scale()関数をマウスホバー時に設定して写真などの要素を強調表示させる。transform:scale()transformプロパティのscale()関数は、要素の大きさを水平方向と垂直方向に対して変更することができます。要素をマウスホバー時に拡大/縮小することで強調表示させることができます。transform: scale(x,y);...DEMO(見本)、例あり

  • 【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

    スライダーの値をリアルタイムに取得HTMLのinput要素のtype:rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(推奨設置場所:headタグ内)...DEMO/例あり

  • 簡単1行!階層リストに折りたたみ機能をつける【jQueryPlugin】| HTML-JS-サンプルあり

    階層リストをたった一行で折りたたみ可能にする【jQueryPlugin】HTML-JavaScript(JS)-jQueryプラグイン-サンプルありjQueryとプラグインファイル...DEMO...使用方法「HTMLUListElement」には入れ子になったリスト(階層リスト)のトップリスト(最上位)を指定します。「ul」,「ol」,「menu」それぞれに対応しています。オプション1.強調表示 : set_listFolding( { "hover" : "true" } ) マウスオーバ(マウスの重なり)で透明度を変えるオプションになります。引数に「 {"hover":"true"} 」を指定します。("true"はtrueでも可能)開閉可能なリストをわかりやすくするために閉じている階層リストだけが強調表示されます。

  • GoogleAdSense広告のコードを改変してレスポンシブ対応にする方法 |【Google AdSense】

    GoogleAdSense(グーグル アドセンス)広告を固定サイズで掲載すると画面サイズ(ページレイアウト)に応じたレスポンシブサイズでなくなり、画面からはみ出したデザインになる可能性があります。当記事は、それを防ぐためにGoogleAdSenseの固定サイズの広告ユニットをレスポンシブ対応させるための方法を記した記事です。レスポンシブ対応の方法は様々あるのでその一部になります。GoogleAdSense広告は、主に自動広告と広告ユニットに分けられます。...レスポンシブ対応Google AdSenseの広告だからと言って特別な方法をとることはなく、通常のHTML要素のように画面サイズに伴って表示非表示またはサイズを切り替えるだけです。ここで、気になるのがGoogle広告に手を加えることはポリシー違反になるのではないかということです。

  • 記事の目次をサイドバーに表示して記事を読みやすくしよう!【はてなブログカスタマイズ】

    今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。記事が長い場合に効果的です。記事の目次を表示するには、記事編集画面で入力補助ツールバーから「目次」ボタンをクリックします。という文字が入力され、この文字の位置に記事の目次が表示されます。記事の見出しが目次として表示されます。サイドバーに表示本題のサイドバーに表示する方法ですが、私は、HTML要素のクローンを生成して表示する方法をとりました。サイドバーには事前に、HTMLモジュールを一番下に設置しておきます。

  • JavaScript/CSSコード圧縮 便利簡単な無料圧縮ツール【Minifier】

    JavaScript/CSSコードの圧縮が簡単にできる無料圧縮ツール【Minifier】の紹介記事になります。リンクJavaScript MinifierCSS Minifier使用方法圧縮 コードを貼り付けてボタンを押すだけで簡単に圧縮することができます。JavaScript Minifier左側のテキストエリアに圧縮したいコードを貼り付けます。「Minify」という青いボタンを押します。圧縮されたコードが、右側のテキストエリアに表示されます。CSSも同様の作業で圧縮することができます。CSS MinifierAPI APIも用意されており、各言語で実装できます。

  • 【CSS】背景と文字の組み合わせ -キレイめカラー- |【WEBデザイン】

    個人的に相性が良いと思った背景色と文字色の組み合わせを、備忘録として書き記している記事です。 「salmon」「white,#555」 「salmon」「white,#555」 background-color: salmon;color: white; background-color: salmon;color: #555;

  • 【CSS】背景パターン --サンプル集-- | 【WEBデザイン】

    投稿日:2019/07/19 CSSだけでできる柄物の背景を、備忘録として書き記した記事です。 ドット柄 ドット柄 <div class="style1"></div> .style1{ background-color: #04bd41; background-image: linear-gradient(45deg, #00ad39 25%, #04bd41 25%,transparent 75%, #04bd41 75%); background-size: 10px 10px; background-position: 0px 0px,3px 3px; } {"@context":"h…

カテゴリー一覧
商用