サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Wikipedia
lab.syncer.jp
ヒント使い方フォームに調べたいURLアドレスを入力して、「確認」をクリックして下さい。それが短縮URLなどの転送URLの場合、リンクの流れと、最終的に到達するウェブページの情報を表示します。スクリーンショットは、初めて取得する時は時間がかかります。リンク先が不安な場合ウェブページにアクセスするのが不安な場合、そのURLアドレスをコピーして、Googleなどで検索してみましょう。そのURLアドレスに対する評判を書いたウェブページなどがヒットすると思うので、それらのページを参考に判断するといいでしょう。
2017/10/07 getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。 概要名前getElementsByClassName所属DocumentIDLHTMLCollection getElementsByClassName(DOMString classNames);仕様書https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname説明引数(classNames)には、対象のclass属性を指定します。半角スペースで区切って複数の値を指定でき、その場合はAND条件となる。 返り値は、要素の集合であるHTMLCollectionです。 チュートリアルgetElementsByClassName()は、class属性を指定して要素を取得します。 <
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化してあるスタイルシートのコードに、インデントや改行を付けて見やすく整形するツールです。他サイトのCSSを分析したい時、間違えてMinify前のコードを消してしまった時などにご利用下さい。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
2017/06/22 マウスでホバーした時にリンク色をゆっくりと変えるには、transitionプロパティを利用します。 サンプルコード1.0sは1.0秒という意味です。transitionは、要素にかかる変化の開始から終了までの秒数を設定するプロパティです。 a { transition: 1.0s ; }デモ色変更の開始から終了までの時間をtransitionプロパティで1.0秒に設定しました。1.0の部分を変更すれば時間を調整できます。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> a { transition: 1.0s ; color: blue ; } a:hover { color: red ; } </style> </head> <body> <b><a href="https://example
作成 作成した画像を、ここでダウンロードできます。 ヒント使い方集中線を入れたい画像を、フォームで指定して下さい。マウスデバイスの方はドラッグ&ドロップでも大丈夫です。「オプション」の項目で、集中線の色と、透明度を指定して下さい。「画像の作成」をクリックすると、集中線が入った画像が作成されるので、保存して下さい。集中線の調整プレビューエリアにある、2つの円は動かすことができます。茶色い円が中心座標、青い円が円周座標となって円が形成されます。形成された円を強調するように、集中線が引かれます。お好みの位置、大きさを調整して下さい。円をクリックすると、集中線のパターンを変更できます。お気に入りの配置になるまで、クリックしてみて下さい。プライバシーについて当サービスは全て、ユーザーの端末(ローカル環境)でのみ処理が行われ、サーバーに画像がアップロードされることがありません。従って、利用した画像は、
ローカライズ住所などの表記を、各言語に変更できます。 アラビア語ブルガリア語ベンガル語カタロニア語チェコ語デンマーク語ドイツ語ギリシャ語英語英語 (オーストラリア)英語 (英国)スペイン語バスク語ペルシャ語フィンランド語フィリピン語フランス語ガリシア語グジャラート語ヒンディー語クロアチア語ハンガリー語インドネシア語イタリア語ヘブライ語日本語カンナダ語韓国語リトアニア語ラトビア語マラヤーラム語マラーティー語オランダ語ノルウェー語ポーランド語ポルトガル語ポルトガル語 (ブラジル)ポルトガル語 (ポルトガル)ルーマニア語ロシア語スロバキア語スロベニア語セルビア語スウェーデン語タミル語テルグ語タイ語タガログ語トルコ語ウクライナ語ベトナム語中国語 (簡体字)中国語 (繁体字)ヒント使い方地図を動かして、真ん中の十字マークを目的の場所に合わせて下さい。その場所の位置座標が表示されます。位置座標は世界測
公開日: 2015/08/28 | 更新日: 2017/05/29 Minify処理などで難読化したJavaScriptのコードに、インデントや改行を付けて、分析したり確認しやすく整形するツールです。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
2017/06/22 JavaScriptでスクロールさせるには、scrollTo()、scrollBy()などのメソッドを利用します。 サンプルコード// 絶対指定 scrollTo( 0, 100 ) ; // 相対指定 scrollBy( 0, 100 ) ;デモ絶対位置で指定ページ上の指定した座標位置にスクロールするには、scrollTo()というメソッドを利用します。ブラウザ画面の左上部分が合わさる位置座標を指定して下さい。横スクロールが発生するページはあまりないので、第1引数には0を指定することが多いでしょう。毎回、必ず同じ位置までスクロールします。
2017/06/22 「100%から4pxを引いた数を設定したい」など、計算式を値に設定したい場合は、calc関数を利用します。 サンプルコードcalc()の括弧内に計算式を指定します。演算記号の左右には半角スペースを入れる必要があります。 div { width: calc( 100% - 50px ) ; }デモ%とpxの組み合わせ「100%から50pxを引いた数値」をwidthプロパティに指定する例です。このように具体的に指定できない値を算出できるのが特徴です。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> div { width: calc( 100% - 50px ) ; background: peachpuff ; } </style> </head> <body> <div>100%から50px引い
2017/10/08 getElementById()は、NonElementParentNodeのメソッドです。id属性を指定して要素を取得します。 概要名前getElementById所属NonElementParentNodeIDLElement? getElementById(DOMString elementId);仕様書https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid説明引数(elementId)には、対象のid属性を指定します。 返り値はElementです。存在しない場合はnullです。 チュートリアルgetElementById()は、id属性を指定して要素を取得します。 <p id="hoge">SYNCER</p>var elements = document.getElementB
2017/06/21 JavaScriptの作成に役立つ、サンプルコード集です。 一覧2点の座標の中点を求める方法2点の座標の中点を求める公式を、JavaScriptで表現します。2点の座標の角度を求める方法2点の座標の角度を求める公式を、JavaScriptで表現します。2点の座標の距離を求める方法2点の座標の距離を求める公式を、JavaScriptで表現します。Blob(File)からData URIを作成する方法Blob(File)をData URIの文字列に変換します。CMYKをCMYに変換する方法カラーコードをCMYKからCMYに変換します。CMYをCMYKに変換する方法カラーコードをCMYからCMYKに変換します。CMYをRGBに変換する方法カラーコードをCMYからRGBに変換します。要素に適用されているCSSの値を取得する方法要素に適用されているスタイルシートの値を取得します
2017/06/22 PHPでtime()、strtotime()を使って取得できるUNIXタイムスタンプ。これをJavaScriptを使って取得します。 サンプルコードDateオブジェクトのgetTime()を実行すると、その時点でのUNIXタイムスタンプを取得できます。取得できるのはミリ秒単位なので、秒単位に直すには1000で除算(割り算)し、Math.floor()などで少数以下をなくしましょう。 // Dateオブジェクトを作成 var date = new Date() ; // UNIXタイムスタンプを取得する (ミリ秒単位) var a = date.getTime() ; // UNIXタイムスタンプを取得する (秒単位 - PHPのtime()と同じ) var b = Math.floor( a / 1000 ) ;Dateオブジェクトのコンストラクタに引数を指定すると、
2016/03/02 iTune StoreやApp Storeのアイコン画像を検索できるウェブサービスです。デザインの研究などにご利用下さい。 検索ジャンルとキーワードを選択して検索を実行して下さい。 iPhoneiPadMac映画音楽ポッドキャストミュージックビデオオーディオブックショートフィルムTV番組電子書籍ebook 結果検索結果がここに表示されます。目的のアイコンをクリックすると、サイズ別に確認できます。 ヒント使い方「アプリ(iPhone、iPad、Mac)」「音楽」「映画」など、探したいアイコンのカテゴリを選択して下さい。次に、入力フォームに、探したいアイコンの具体的なキーワードを入力して下さい。「検索」のボタンを押してしばらく待つと、条件にヒットしたアイコンの一覧が表示されます。アイコンをクリックすると、「アプリの情報ページのURL」「サイズ別のアイコンのURL」を確認で
ヒントExifをチェックする画像を1つ選択すると「Exifの確認」という項目に、画像に付いたExifの一覧が表示されます。位置情報が含まれている場合は、地図上に撮影場所がマーカーで表示されます。Exifを削除する下記のサービスで、写真に紐付いているExifを削除できます。 Exif削除ツール写真に紐付いた位置情報などのExifを削除するツールです。スマホでの操作にも対応しています。プライバシーについて利用した画像は、当サイトのサーバーにはアップロードされません。あなたのパソコン、またはスマホの端末内(ローカル環境)でのみ処理が行われます。サイトの運営者を含めて、他人があなたの画像を知ることはできないので安心して下さい。 注意事項端末によっては正常に動作しない可能性があります。開発者はiPhone6、Nexus5で動作確認をしています。このサービスを利用して起こったいかなる不具合にも、開発者
2017/06/22 要素の位置座標を取得するには、getBoundingClientRect()というメソッドを利用します。 サンプルコード要素の位置座標を取得するには、対象要素のgetBoundingClientRect()というメソッドを利用します。このメソッドで取得できるのは「ビューポート(画面内)」における位置なので、スクロール量によって値が変わります。 // 要素の位置座標を取得 var clientRect = targetElement.getBoundingClientRect() ; // 画面の左端から、要素の左端までの距離 var x = clientRect.left ; // 画面の上端から、要素の上端までの距離 var y = clientRect.top ;「ページ全体」における位置を取得するには、先ほどの値に現在のスクロール量を加えましょう。 // ページ
2017/06/22 現在のURLに関する情報を取得するにはlocationオブジェクトの各プロパティを参照します。 サンプルコード// url var url = location.href ; // host var host = location.hostname ; // path var path = location.pathname ; // query var query = location.search ; // protocol var protocol = location.protocol ;デモこのページのurlを取得しています。 var url = location.href ; var host = location.hostname ; var path = location.pathname ; var query = location.search ;
公開日: 2015/08/28 | 更新日: 2017/05/29 HTMLコードに適切なインデントと改行を付けて、確認しやすく整形するサービスです。ソースコードの整理、分析などにご利用下さい。 変換「変換前」のフォームに、コードを入力するか、ファイルをドロップして下さい。「変換後」のフォームに変換結果が表示されます。
公開日: 2015/04/29 | 更新日: 2017/08/17 画像の好きな部分を指定して、カラーコードを抽出できるウェブサービスです。スマホでの操作にも対応！そして画像をサーバーにアップロードせずローカル環境だけで処理できるので、プライバシー面でも安心してご利用いただけます。 画像の色を調べるクリックすると、選択中の色をメモに追加します。スマホの場合、ピンチイン、ピンチアウトでズームできます。 画像の色一覧カラーコードをクリックするとクリップボードにコピーします。「メモ」をクリックすると、色をメモに追加します。 メモした色の一覧カラーコードをクリックするとクリップボードにコピーします。「削除」をクリックすると、色をメモから削除します。 ヒント画像の設定フォームに目的の画像を指定して下さい。PCの場合は、ドラッグ&ドロップでも大丈夫です。しばらく待つと画像が表示されます。画像を変更する
公開日: 2015/08/27 | 更新日: 2017/08/15 はてブスターチェッカーは、はてなブックマークのコメントに付けられたスターの合計獲得数をチェックできるサービスです。イエロースターだけではなく、カラースターの内訳も確認できます。 確認調べたいユーザーのidを指定して下さい。
2017/06/22 先頭と末尾、指定位置など、様々な条件を付けて配列から要素を削除します。 サンプルコードslice()以外は元の配列が変更される点にご注意下さい。 var arr = [ "S", "Y", "N", "C", "E", "R", ] ; // 先頭を削除 arr.shift() ; // 末尾を削除 arr.pop() ; // 途中を削除 arr.splice( 1, 1 ) ; // 両端を削除 var a = arr.slice( 1, 4 ) ;デモ先頭の要素を削除先頭の要素を削除するにはshift()というメソッドを利用します。元の配列が変更されます。
公開日: 2015/08/21 | 更新日: 2017/07/26 画像をbase64エンコードするツールです。ローカル環境で処理するため、画像を当サーバーにアップロードする必要がありません。 ヒント使い方左側(スマホの場合は上)の画像フォームに、base64エンコードしたい画像をセットして下さい。フォームをクリックすると、画像を選択できます。デスクトップPCをお使いの人は、ドラッグ&ドロップでも大丈夫です。画像を選択すると、右側(スマホの場合は下)のフォームに、その画像をbase64エンコードした結果が表示されます。このコードをそのまま、例えば、imgタグのsrc要素に指定すると、画像を表示させることができます。処理は全てローカルで行なわれます。従って、サーバーに画像がアップロードされることはないので、ご安心下さい。注意事項1MB以上の巨大なサイズの場合、出力結果のコードをコピーするまで
2017/06/22 JavaScriptを使って、文字の一部を置換したり削除する方法を説明します。利用するメソッドはreplace()です。 サンプルコード「う」を「く」に置換する例です。 var sourceStr = "ううううう" ; var a = sourceStr.replace( /う/g , "く" ) ;デモ置換 (文字列)「う」という文字を「く」に置換する例です。 置換後の文字(「く」の部分)を空文字にすれば削除できます。 var sourceStr = "あいうえおあいうえお" ; var a = sourceStr.replace( /う/g , "く" ) ;
2017/06/22 指定したディレクトリ内にある、全てのファイル名やファイルパスを取得します。まとめて読み込みたい場合などに便利です。 サンプルコード$dirに対象のディレクトリのパスを指定して下さい。 そのディレクトリ内のみを取得そのディレクトリにあるファイルのみを取得します。ディレクトリ内のディレクトリは無視されます。 <?php // ディレクトリのパス $dir = "/var/www/" ; if( is_dir( $dir ) && $handle = opendir( $dir ) ) { while( ($file = readdir($handle)) !== false ) { if( filetype( $path = $dir . $file ) == "file" ) { // $file: ファイル名 // $path: ファイルのパス } } }再帰的に取得
2017/06/22 ファイルをアップロードする前のプレビュー表示など、ユーザーがサーバーにアップロードしなくても画像をウェブページ上に表示する方法です。データURI形式で表示する方法と、Blob URLで表示する方法の2種類があります。 サンプルコードBlob URL、またはData URIを取得し、それをそのままimg要素のsrc属性に指定すれば表示できます。 <input id="target" type="file" multiple> Blob URL document.getElementById( "target" ).addEventListener( "change", function() { var fileList = this.files ; for( var i=0,l=fileList.length; l>i; i++ ) { var blobUrl = wi
2017/06/22 配列の先頭、末尾、指定位置など、様々な位置に要素を挿入します。 サンプルコード元の配列が変更されます。 var arr = [ "い", "う", "え", ] ; // 先頭に追加 arr.unshift( "あ" ) ; // 末尾に追加 arr.push( "お" ) ; // 途中に追加 arr.splice( 2, 2, "hoge" ) ;デモ先頭に要素を追加配列の先頭に要素を追加するには、unshift()というメソッドを利用します。第2引数、第3引数、と指定すれば、複数の要素を追加できます。元の配列が変更されます。
2017/06/22 JavaScriptを使って、PHPのdate関数のように日時、曜日を取得します。 サンプルコードDateオブジェクトの各メソッドを利用すれば、年月日、時分秒、曜日を取得できます。曜日は0が日曜、6が土曜として、0〜6までの数値です。月は0から始まるため、1を加算します。 var date = new Date () ; var year = date.getFullYear() ; // 年 var month = date.getMonth() + 1 ; // 月 var day = date.getDate() ; // 日 var hour = date.getHours() ; // 時 var minute = date.getMinutes() ; // 分 var second = date.getSeconds() ; // 秒 var dayOf
2017/06/22 画像などにホバーした時、透過させるにはopacityプロパティを利用します。色が薄くなることで「クリックできる」ということをユーザーに伝えられますね。 サンプルコードopacityには0(透明)〜1(不透明)の間で透明度を指定します。0.5を指定すると半透明になります。 img:hover { opacity: 0.5 ; }デモopacityopacityプロパティに0〜1の数値を指定します。0が完全透明で、1が完全不透明です。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> img:hover { opacity: 0.5 ; } </style> </head> <body> <p>ホバーすると透過します。</p> <img src="/author.svg" width="150" he
次のページ
このページを最初にブックマークしてみませんか？
『SYNCER | 知識と感動を同期するブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
