HTML

【HTML】input / textarea

■ input placeholder属性 From HTML5 * テキスト入力欄に、初期表示する内容を指定する type属性 type="range" <input id="brightness" type="range" value="0" min="-100.0" max="100.0" step="0.1" /> type="number" <input id="brightness" type="number" value="0" /> サンプル https://blogs.yahoo.co.jp/dk521123/37818958.html

Web Components

■ Web Components * HTML をカプセル化してパーツ化する 【1】Custom Elements * 好きなタグ名を作成する機能 【2】Shadow DOM * 外に影響しないようにする機能 【3】HTML Imorts * 外部JSファイルを動的に読み込む機能 【4】HTML Template * 要素をテン…

【HTML5】 Canvas ~ ブラウザ上に図を描く ~

■ はじめに * Canvas を使って、画像に線を引いてみる。 => 結構、簡単にできる!! ■ サンプル 例1:画像にラインを引く <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h1>Demo for canvas</h1> <canvas id="sample" width="1000" height="1000"></canvas> <script> function draw(targetId, targetImage, lineCo…</body></html>

【HTML5】【JS】 クライアントサイドの検証処理/バリデーション ~ HTML5+JS編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37666873.html で、検証処理が安定しなかったので、クライアントサイドでのバリデーションを考えてみた ■ クライアント側でのバリデーション方法 【1】 HTML5 + JavaScript でバリデーション ★ 今回は、こっ…

【JS】【HTML5】Web Storage に Class を保存し、ロードする

■ サンプル チェックボックスのデータをインスタンス化し、保存する <html lang="jp"> <head> <meta charset="utf-8"> <title>Demo</title> <head> <body> <span id="message">Hello</span> <input id="saving-data-checkbox" type="checkbox" onchange="save();"> <label>Save data</label> </body></head></meta></head></html>

【HTML5】WebSoket ~ 入門編 ~

サンプル * WebSoket版 の Hello World 的なものを作ってみる クライアント側 (HTML + JavaScript) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>WebSocket Sample</title> <script src="">http://code.jquery.com/jquery-latest.min.js"> <script> $(function(){ // WebSocket作成 var webSocket = n…</meta></head></html>

【HTML5】WebRTC ~ 基本編 / PeerServer・PeerJS ~

■ 用語整理 PeerJS * 「WebRTC」機能をラップするJavaScriptライブラリ * MIT License デモサイト http://cdn.peerjs.com/demo/chat.html を2台のブラウザ(例えば、ChromeとFirefox)でやり取りすれば 気軽にデモの確認ができる PeerServer(peerjs-server…

【HTML5】Web Notifications API ~ 入門編 ~

■ Web Notifications API Notification : 通知 * 簡単にデスクトップ通知が実装可能 デモとサンプル https://davidwalsh.name/notifications-api Web Push APIとの違い Web Notifications API * 画面上に通知を表示する機能 Web Push API * サーバから通知を…

【HTML5】WebRTC ~ 入門編 ~

■ 用語整理 WebRTC (Web Real-Time Communication) * Webブラウザ上で、音声/映像などのデジタルデータをリアルタイムにやり取りするための規格 * W3CとIETFという二つの団体で標準化 * P2Pでブラウザ間通信 利用例 * ブラウザ間の以下の機能が実装可能 + ボ…

【HTML5】Web Notifications API ~ 基本編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37244153.html の続き Notificationあれこれ 【1】Web Notifications APIがサポートされているブラウザか確認 【2】指定した時間で通知を閉じる 【3】クリックイベントを拾う 【1】Web Notifications API…

【CSS】z-indexプロパティ / positionプロパティ

■z-index * ボックスの重なりの順序を指定する * 0を基準として、値が大きいものほど上になる。 注意 [1] z-indexが効かない場合がある http://d.hatena.ne.jp/masomi79/20131125/1385392242 より ~~~~~~~ 1) 親要素がposition:static;もしくはposit…

【CSS】DIVタブ(ブロック)からはみだした場合の対処

■ 対処策 1) overflowで、領域内に収まりきらない場合の対処を指定する 2) flowで、ボックスを左/右に寄せて、逆側にテキストなどを回り込ませる 3) word-break:break-allで自動折り返しを行う 参考文献 * 「word-break:break-allで自動折り返しを行う」 htt…

【JS】【HTML5】Web Storage を、使いやすくする

はじめに http://blogs.yahoo.co.jp/dk521123/35649554.html のサンプルを極力共通化する。 サンプル 「テキストボックス」「ラジオボタン」「セレクトボックス」「セレクトボックス(複数)」「チェックボックス」を保存する <html> <head> <meta charset='UTF-8'> <script src="">http://code.jquery.com/jque</meta></head></html>…

【JS】【HTML5】Web Storage (ウェブ ストレージ)

■ はじめに クライアント側にデータを保存したい場合、クッキーがある しかし、以下の関連記事 http://blogs.yahoo.co.jp/dk521123/28437833.html で書いたように、容量が少ない。 ~~~~ * Cookie の有効・無効の設定はブラウザで行うことができる * ブラ…

【CSS】 アイコン を 表示する ~ Font Awesome ~

■ はじめに * アイコンを探してたのだが、商用OKなフリーでなかなかいいのがなかった。 CSSベースででき、かつ、色も付けられるツール Font Awesome があったので試してみる。 ■ Font Awesomeとは? * アイコンフォント * 商用利用可能(詳細は、以下の「ラ…

【HTML】HTML ~ SVG要素 ~

■ はじめに https://dk521123.hatenablog.com/entry/2015/10/07/000426 の D3.jsでは、SVG要素を知ってた方が理解し易いので 今回は、SVG要素を扱う。 目次 【1】SVG (Scalable Vector Graphics) 【2】サンプル 例1:簡単な棒グラフ 【3】SVG要素と図形 …

【HTML】frameset / frame について

frameset / frame サンプル <html> <frameset rows="20%,*,20%"> <frame name="header" scrolling="no" noresize src="./header.html"> <frameset cols="30%,*"> <frame name="menu" src="./menu.html"> <frame name="main" src="./main.html"> </frameset> <frame name="footer" scrolling="no" noresize src="./footer.html">…</frame></frame></frameset></html>

【HTML】【CSS】要素を重ねるには...

■ サンプル1:画像を2つ重ねる場合 <html> <body> <h1>サンプル1</h1> <div style="position: relative;"> <img src="./ImageA.jpg" alt="重ねる画像" style="position:absolute;"/> <img src="./BaseImage.jpg" alt="ペース画像" /> </div> </body> </html> 補足:使用している主な技術:「position」 * absolute : 絶対位置 * relative : 相対位置(通常の位置を基準とした相対位置) * fixed : …

【HTML】Favicon (ファビコン) について

ファビコンについて * favorite icon(フェイバリット・アイコン:お気に入りアイコン)を略したもの(FAVorite ICON)で ウェブブラウザのブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに現れるアイコン。 * 画像のサイズは、16×16ピクセ…

【CSS】Font関連のCSS ~文字色 / 文字サイズetc~

■ Font関連 HTMLのソース例 <div class="sample">XXXX</div> CSSのソース例 div.sample { text-align:center; // 文字位置 padding:10px; // 空白サイズ font-weight:bold; // 太字 text-size:200%; // 文字サイズ background-color:#FFCACA; // 文字の背景色 } ■ 単位 【1】 em指定 /…

【HTML】HTML覚書

■ ファビコンを表示させる * 以下の関連記事を参照のこと http://blogs.yahoo.co.jp/dk521123/34521189.html ■ input / textarea * 以下の関連記事を参照のこと https://blogs.yahoo.co.jp/dk521123/37818882.html ■ リスト 【1】 ul:黒ポチ(・)の箇条書き…

【CSS】CSS を取り込むには...

■ HTML内部に記述する方法 * styleタグに書く 構文例 <style> h1 {color: red; } </style> ■ 外部CSSを取り込む方法 * 外部CSS「css1.css」を取り込んでいる 構文例 <link rel="stylesheet" href="./css1.css" type="text/css"> ■ 複数クラスを指定する方法 * CSSのクラス「bgcRed」と「fsSmall」をpタグに指定している 構文例 <p class="bgcRed fsSmall">赤くて</p></link>…