サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
syncer.jp
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】Node.parentElement - 親要素</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/Node/parentElement/"> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script> <script> window.addEventListener( "load", function (
// 要素を取得 var inputElement = document.getElementById( "target" ) ; // 処理を定義 var action = function() { // 処理内容 } // イベントを設定 ( addEventListener ) inputElement.addEventListener( "input", action ) ; // イベントを削除 inputElement.removeEventListener( "input", action ) ; // 要素を取得 var inputElement = document.getElementById( "target" ) ; // イベントを設定 ( oninput ) inputElement.oninput = function() { // 処理内容 } // イベン
公開日: 2017/02/09 span要素は意味を持たないインライン要素です。ある範囲に、意味付けはしたくないけどデザイン目的でclass属性を適用したい場合などに便利です。利用する時は、他により適切な要素がないかを確認するようにしましょう。 概要名前spanカテゴリーFlow contentPhrasing contentPalpable content配置できる場所Phrasing contentが期待される場所。コンテンツモデルPhrasing content。タグの省略開始タグも終了タグも省略できません。DOM InterfaceHTMLSpanElement仕様書https://html.spec.whatwg.org/multipage/semantics.html#the-span-element属性グローバル属性全てのタグで利用できるグローバル属性を指定できます。 説明意
公開日: 2016/12/22 htmlspecialcharsは、例えばタグとして利用される<、>など、HTMLにおいて特殊な意味を持つ文字だけを対象に、HTMLエンティティに変換する関数です。 構文 string htmlspecialchars ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = ini_get("default_charset") [, bool $double_encode = true ]]] ) パラメータ$string対象の文字列。 $flags初期値: ENT_COMPAT | ENT_HTML401 変換する特殊文字の種類。 ENT_COMPATダブルクォートを含め、シングルクォートを含めない。ENT_QUOTESシングルクォート、ダブルクォートの
JavaScript // イベントの設定 (onafterprint) window.onafterprint = function ( event ) { // ... } // イベントの設定 (addEventListener) window.addEventListener( "afterprint", function ( event ) { // ... } ) ; HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】WindowEventHandlers.onafterprint - 印刷用のダイアログを閉じた時に発火</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/
分かりやすいように、デザインを排除したシンプルなアコーディオンです。親メニュー名をクリックすることで、子メニューが開閉します。 メニュー1 子メニュー 1-1 子メニュー 1-2 メニュー2 子メニュー 2-1 子メニュー 2-2
公開日: 2017/02/09 small要素は、注釈や細目を表す要素です。具体的には、著作権や免責事項、法的規制などの情報をマークアップするのに適しています。文字を小さくするために利用してはいけません。 概要名前smallカテゴリーFlow contentPhrasing contentPalpable content配置できる場所Phrasing contentが期待される場所。コンテンツモデルPhrasing content。タグの省略開始タグも終了タグも省略できません。DOM InterfaceHTMLElementデフォルトのスタイルsmall { font-size: smaller; }仕様書https://html.spec.whatwg.org/multipage/semantics.html#the-small-element属性グローバル属性全てのタグで利用できるグロ
投稿日:2016/01/19 / 更新日:2016/01/19 Androidでアプリをインストールする方法を初心者向けに説明します。無料アプリと有料アプリの違いや、有料アプリの場合の購入方法など、ご確認下さい。 アプリのインストールに関して、初心者の方が疑問に思いそうな点をQ&A方式でまとめています。 インストールに必要なものは?Androidのアプリをインストールするには、「Googleのアカウント」が必要です。アカウントを、Androidに登録して下さい。アカウントの作成方法は、下記記事の「アカウントを設定する手順」を参考にして下さいね。 アプリのインストールは無料?アプリによって違います。後述しますが、アプリの購入画面に移動して、料金を確認して下さい。 有料アプリをインストールするには?有料のアプリを購入するには、クレジットカード、またはプリペイドカードの登録が必要です。現金で購入
投稿日:2016/03/03 / 更新日:2016/03/03 d3.jsのselection.enter()は、関連付けたデータの数に対して、実際に存在する要素が足りなかった場合、その差分だけプレースホルダー状態(処理を適用できる状態)のオブジェクトを作成するメソッドです。「足りない分を補填する」というイメージで支障はないと思います。 // ul要素を選択 d3.select( "ul" ) // ul要素の中の、li要素を選択状態にする (まだ存在しない) .selectAll( "li" ) // 存在しないli要素にデータ(5個)を関連付ける .data( [ "1個目のLI", "2個目のLI", "3個目のLI", "4個目のLI", "5個目のLI" ] ) // 存在しないli要素を選択しているd3.selectionオブジェクトに対して[enter()]を実行する .en
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】HTMLInputElement.selectionStart - 選択範囲の開始位置のオフセット</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLInputElement/selectionStart/"> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script> <script> windo
公開日: 2016/12/18 array_columnは、多次元配列から、特定のカラムだけで構成された新しい配列を返す関数です。 構文 パラメータ$input対象の多次元配列。7以降ではオブジェクトにも対応。 $column_keyキー名を指定。nullを指定した場合は配列全体を返す。第3引数と組み合わせると意味がある。 $index_key初期値: null キー名を指定すると、その値が、新しい配列の各要素のキー名となる。 返り値array 指定したカラムで構成された新しい配列。 サンプルコード特定のカラムを抜き出す例えば、下記の多次元配列からscoreだけで構成された配列を作成してみます。第2引数に対象となるカラムのキー名を指定します。 php <?php // 配列 $queue = [ [ "date" => "2015/11/1" , "score" => 100 , "col
公開日: 2016/12/22 get_adjacent_post()は、隣接する前後の記事を取得する関数です。 構文 mixed get_adjacent_post( bool $in_same_term = false, array|string $excluded_terms = '', bool $previous = true, string $taxonomy = 'category' ) パラメータ$in_same_term初期値: false 同じタームの記事に限定して取得するか。 $excluded_terms初期値: '' 取得の対象外とするタームのID。複数ある場合は、カンマ区切りの文字列、または配列で指定する。 $previous初期値: true 前の投稿を取得する場合はtrue、次の投稿を取得する場合はfalseを指定する。 $taxonomy初期値: 'cat
投稿日:2016/02/22 / 更新日:2016/02/22 スタイルシートのbackground-sizeは、背景画像のサイズを指定するためのプロパティです。
data-*とは、要素に任意の属性名と値を付加するための属性です。カスタムデータ属性とも言います。開発者はdata-に続けて、自由に属性名と値を決められます。専らJavaScriptから要素にアクセスする時の、処理の振り分けに有用です。グローバル属性と同じく、全ての要素にカスタムデータ属性を付加することができます。 例えば、下記は、data-color、data-count、data-color-hairというカスタムデータ属性を作って、要素に付加した例です。このように、data-に続けて自由に属性名を作ることができます。属性名に、大文字を使うことはできません。 HTML <p data-color="red">今日はいい天気だ。</p> <p>現在、猫が撫でられた回数は、<span data-count="0">0</span>回だ。</p> <p>私の髪の毛は、現在は<span dat
公開日: 2017/02/23 Nodeは、要素(Element)やテキスト(Text)、コメント(Comment)などを表すオブジェクトです。 概要名前Node継承EventTargetNode実装実装するインターフェイスはありません。IDL[Exposed=Window] interface Node : EventTarget { const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const unsigned short TEXT_NODE = 3; const unsigned short CDATA_SECTION_NODE = 4; const unsigned short ENTITY_REFERENCE_NODE = 5; // historical const u
<div id="target" class="box"><img src="/snow-mountain.jpg" width="240" height="180"></div> <p class="output">scrollTop: <span id="x">0</span> / scrollLeft: <span id="y">0</span></p> <p id="error" class="error none"></p> <p><button id="fire" class="button">実行</button></p> <p><button id="reset" class="button">リセット</button></p> .output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px
この記事では、Instagramのパスワードを設定する方法とその注意点、また、パスワードを忘れてしまった場合に再発行する方法を説明しています。 一度使用したパスワードは設定できない…パスワードを変更する時に、必ず知っておきたいルールがあります。それは、Instagramでは、過去に設定したことのあるパスワードを利用できないということです。例えば、現在のパスワードが1234だったとして、これを4321に変更したとします。すると、もう一度変更する時に、1234を設定できないということです。図のように、「使用したことがないパスワードを作成してください」と、怒られてしまいます。 いいね!やコメントの情報をいち早くキャッチできる便利な機能の反面、何かをしている最中に割り込む形で表示されたりすると、ちょっと鬱陶しいなって思ってしまいますよね…。 この章では、パスワードを変更する手順を説明します。iPh
要はパスワードのことパスコードのサンプルパスコードとは、「iPhoneを使い始める時に毎回入力しなければならないパスワード」のことです。それだけ。シンプルですよね。例えば、iPhoneに人に見られたくない情報が入っている時などに設定しておきます。パスコードを設定することで、家や学校でiPhoneを放置している時に、勝手に他人が盗み見しようとしても、あなたが設定したパスワードを入力できなければ、iPhoneを操作することができないようになります。
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】HTMLInputElement.valueAsNumber - Number型としての値</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLInputElement/valueAsNumber/"> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script> <script> window.add
Authorization: OAuth id=599624452280754178,include_entities=true,include_my_retweet=true,oauth_consumer_key=:consumer_key,oauth_nonce=0.29759600+1484727473,oauth_signature_method=HMAC-SHA1,oauth_timestamp=1484727473,oauth_token=:access_token,oauth_version=1.0,oauth_signature=IO9wT2tAoa34zTqdKsowK5Aneus%3D JSON {"created_at":"Sat May 16 17:16:24 +0000 2015","id":599624452280754178,"id_str":"5996244
公開日: 2016/12/18 array_padは、ある配列から指定した長さの新しい配列を作り、長さが足りない分は指定した値で埋める関数です。 構文 パラメータ$array対象の配列。 $size埋める要素数を指定する。正の数なら右側から、負の数なら左側が埋められる。 $value第1引数の配列の要素数が、第2引数で指定した数より少ない場合に埋める値。 返り値array 指定した配列を指定長にして、足りない分を第2引数、第3引数の条件通りに埋めた新しい配列。 サンプルコード配列を指定長の長さに埋める要素数が3個の配列から、要素数が5個の配列を作ります。足りない2個の要素は、第3引数で指定した値になります。
公開日: 2016/12/17 extractは、指定した配列から変数を作成する関数です。連想配列のキーが変数名、値が値としてシンボルテーブルにインポートされます。 構文 パラメータ&$array対象の配列。 $flags初期値: EXTR_OVERWRITE 既に同名の変数があったり、数値キーを変数にしようとした時の挙動を調整できます。デフォルトでは、既に同名の変数があった場合は上書きします。 EXTR_OVERWRITE衝突があった場合、上書きをする。EXTR_SKIP衝突があった場合、上書きをしない。EXTR_PREFIX_SAME衝突があった場合、prefixを付けた新しい変数を作る。EXTR_PREFIX_ALL衝突に関わらず、全て、prefixを付けた新しい変数を作る。EXTR_PREFIX_INVALID数値など、無効な変数名の場合にのみprefixを付ける。EXTR_IF_
「描画」のボタンを押すと、左側のキャンパスに適当な図形を描画します。次に「toDataURI()」のボタンを押すと、キャンパスの内容をデータURIに変換して、右側のimg要素のsrc属性に指定します。表示された画像はブラウザで保存することができます。JPEG、webpは仕様上、透過部分が黒くなります。webpはChrome以外ではサポートされていないため、デフォルトのPNGに変換されます。 <div id="parent"> <div><canvas id="target"></canvas></div> <div><img id="output" src=""></div> </div> <p><a id="method1">描画</a></p> <p><a id="method2">toDataURI()</a></p> <p><a id="method3">toDataURI( "i
公開日: 2017/02/09 header要素はヘッダーを表す要素です。見出し、概要、投稿日など、コンテンツに関する案内をまとめます。著者、関連リンク、ライセンスなどの補足情報はfooter要素に含めて下さい。 概要名前headerカテゴリーFlow contentPalpable content配置できる場所Flow contentが期待される場所。コンテンツモデルFlow content。ただし、header要素、footer要素、main要素の祖先になってはいけない。タグの省略開始タグも終了タグも省略できません。DOM InterfaceHTMLElementデフォルトのスタイルheader { display: block; }仕様書https://html.spec.whatwg.org/multipage/semantics.html#the-header-element属性
公開日: 2017/02/09 colgroup要素は、列のグループを表す要素です。この要素を使えば、テーブルで、縦方向に串刺しにしてスタイルを適用できます。 概要名前colgroup (Column group)カテゴリーなし。配置できる場所table要素の子要素として、caption要素よりも後で、かつ、thead要素、tbody要素、tfoot要素、またはtr要素よりも前に配置すること。コンテンツモデルspan属性を持つ場合、子要素を持ってはいけない。span属性を持たない場合、0個以上のcol要素、および、template要素。タグの省略最初の子要素がcol要素で、かつ、終了タグを省略した別のcolgroup要素が直前に存在しない場合、開始タグを省略できる。空白文字、またはコメントが後にない場合、終了タグを省略できる。DOM InterfaceHTMLTableColElement
APIを使って、WOEIDのデータを取得する方法を初心者向けに説明します。
<p><a href="" target="_blank">新しいウィンドウで開く</a></p> <ol> <li><a href="#section-1">1章</a></li> <li><a href="#section-2">2章</a></li> <li><a href="#section-3">3章</a></li> <li><a href="#section-4">4章</a></li> <li><a href="#section-5">5章</a></li> </ol> <h2 id="section-1">1章</h2> <h2 id="section-2">2章</h2> <h2 id="section-3">3章</h2> <h2 id="section-4">4章</h2> <h2 id="section-5">5章</h2> <p class="output">発
仕様書https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement 説明reportValidity()は、input要素の入力内容の検証を実行します。検証エラーがある場合にだけ、invalidイベントが発生すると共に、検証エラーのメッセージが表示されます。 HTML <form action="./form.php"> <input id="hoge" name="fuga" required> <button>内容を送信</button> </form> JavaScript // 要素の取得 var element = document.getElementById( "hoge" ) ; // イベントの設定 element.addEventListener( "invalid", function ( eve
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>【デモ】HTMLMediaElement.playbackRate - 再生速度</title> <link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/HTMLMediaElement/playbackRate/"> <meta content="width=device-width,initial-scale=1.0" name="viewport"> <script src="https://demo.syncer.jp/js/demo-web_api_interface.js"></script> <script> window.addEventListe
次のページ
このページを最初にブックマークしてみませんか?
『Syncer|知識と感動をみんなと共有するブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く