HTML5/CSS3のニュースやTIPSなどのまとめ (2020年9月27日)
（＊価格は掲載時のものです。購入時にご確認ください。）
（＊価格は掲載時のものです。購入時にご確認ください。）
HTML5のvideoをタグをはじめて使ってみました！ 参考になったサイトはこちら。丁寧にまとめてくださっていて、大変助かりました。 再生速度とループの設定－JavaScript入門（HTML5編） 個人的に感動した機能は、２つありました。 (1) 動画の再生時間範囲指定機能 srcで動画ファイルを指定するのですが、ファイル名に続けて、「t=開始時間,終了時間」を指定することができました。開始時間は秒単位で指定します。 この機能により、手動で何度も同じ場面を指定して再生する手間が無くなりそうです。 (2) 2倍速再生、0.5倍速再生機能 javascriptにて、再生速度も指定できるようでした。 ダンス練習なら0.5倍速で、学習サイトなら倍速で成果を上げることができそうですね！！ サンプル <h3>動画１</h3> <video id="movie1" src="/mp4/movie.mp
GitHub - susam/invaders: A 1980s-arcade-style game written using HTML5, Canvas, and Web Audio
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
項目1 項目2 項目3 データが登録されていません 仕事で、上のようなテーブル（データがないときに、データがない旨のメッセージを表示する）に列を追加したら 項目1 項目2 項目3 追加された項目 データが登録されていません このようにテーブルが欠けるバグがあった。 <td colspan="4">登録されていません</td> 項目1 項目2 項目3 項目4 登録されていません こうすれば直るけれど、列を追加した際に同様のバグがまた混入するのでメンテナンス性が悪い。 <td colspan="100%">登録されていません</td> 項目1 項目2 項目3 項目4 登録されていません ググったらcolspan="100%"で行けると言っている人がいて、一見すると良さそうだけれど <td colspan="50%">登録されていません</td> 項目1 項目2 項目3 項目4 登録されていませ
（＊価格は掲載時のものです。購入時にご確認ください。）
どうも、katです。 かなり久しぶりの投稿となります！ 今回は、html5でEFOのようなリアルタイムバリデーション（入力チェック）を超簡単に入れる方法について説明していきます。 リアルタイムバリデーションとは？ 通常、バリデーション と言いますと「送信」や「登録」などのボタンを押した後に「この項目は必須です」や「数字で入力してください」などのエラーメッセージが表示されるもののことを言います。 リアルタイムバリデーションとは、「送信」や「登録」などのボタンを押す前からエラーがある場合はエラーメッセージが表示されることを言います。 例えば、画像のように入力した直後にエラーが表示されるイメージです。 ソースコード それでは具体的なソースコードを見ていきましょう。 難しそうなことをやっているようですが、実装自体は下記のhtmlとjavascriptのみです。 ・html <!-- ↓必須項目のテ
HTML5とHTML Living Standardとの違いとは？学習方法や資格も解説 | AKKODiS（アコーディス）コンサルティング株式会社
HTML5とHTML Living Standardとの違いとは？学習方法や資格も解説 公開日：2021.07.30 スキルアップ HTML5は、W3Cという機関が定めたHTMLの勧告のことですが、2021年1月28日に廃止されました。Webエンジニアにとっては、すでに知られたニュースです。しかし、IT業界以外の人の中には、初めて知ったという人もいるのではないでしょうか。 そこで今回は、現在有効なHTML5が廃止された経緯とHTML Living standardとの違い、今後のHTMLにおける勉強方法について解説します。
HTML5プロフェッショナル認定試験 レベル2に合格したので これまでの学習スタイルであったり、学習方法などまとめて 同じ資格試験の合格を目指している方や、 これから取得に向けて勉強を始める方の 参考になる記事になればよいなと思います。 HTML5プロフェッショナル認定試験とは 特定非営利活動法人エルピーアイジャパンが主催する民間資格です。 HTML5プロフェッショナル認定試験にはレベル1とレベル2が存在し、 それぞれ出題範囲が異なりますが、レベル１の説明については割愛します。 レベル２の出題範囲 2.1 JavaScript 2.1.2 ES6（ECMAScript2015）以降の新機能(Ver2.5) 2.2 WebブラウザにおけるJavaScript API 2.3 グラフィックス・アニメーション 2.4 マルチメディア 2.5 ストレージ 2.6 通信 2.7 デバイスアクセス 2
HTML5で動画を再生する際にはvideoタグを利用します。しかし、このvideoタグはごく基本的な機能しかなく、使い勝手はよくありません。そこで、外部のライブラリを使って機能を追加するのが基本です。 今回紹介するOpenPlayerJSもそんなHTML5用の動画プレーヤーになります。 OpenPlayerJSの使い方 デモです。任意の動画URLを指定できます。 動画を再生中です。 再生速度を変更できます。 動画だけでなく、音楽ファイルにも対応しています。 OpenPlayerJSは機能はそれほど多くありません。再生、音量調整、動画再生速度設定、そしてフルスクリーン表示くらいです。また、広告動画を指定することで、広告を再生後に動画を再生できるようにもなります。その意味では動画を収益化したいサイトなどど導入しやすそうです。 OpenPlayerJSはTypeScript製のオープンソース・ソ
（＊価格は掲載時のものです。購入時にご確認ください。）
GitHub - bestmediaplayer/mediaplayer: Free Open Source No-Download HTML5 Media Player for Video, Music, Audio, Android, iPhone, FLV, MP4, WEBM
I truly believe this media player can become BIGGER than VLC Media Player. Why? Because this is the first fully browser-based app that can play every single video type out there. Just like VLC...but in the browser. The other two popular ones, VLC Media Player and Windows Media Player, require downloads. And then there are bunch of Javascript Media Players for MP4 but that's basically it. For FLV f
使い勝手がなかなか良いHTML5のテンプレート 参考になったのはこちらの記事「WEBデザインラボ」さんが公開してくれているテンプレートです。 これの３カラムバージョンをお借りしました。 表示サンプル
JavaScript HTML5 Canvas Animated Background by OnAir | Nov 10, 2017 | HTML/CSS, JavaScript Examples Let us now talk about the role of animation in the graphic industry. Indeed, animation has a lot to play in digitizing the world. Designers have developed various 2d and 3d projections systems. With the paramount view to facilitating users to give them an amazing experience. HTML5 canvas element act
AnimateCCで “ブロック崩し” を作ってみるよ！[ドラッグ操作pressmove] [当たり判定hitTest] [子の追加addChild] [ムービークリップの幅高さnominalBounds] HTML5 Canvas入門（スマホ対応）CreateJS
Animate CC で “ブロック崩し” のサンプルを作ってみるよ！ 今回はゲーム作りです。いくつも動く要素があって、状況が刻一刻と変化するwebアプリを作りましょう。 ↓完成したサンプルです↓ タップすると画面に表示されます 003breakout ver20181206 基本的な構成を考える とりあえず今回はブロック崩しに最低限必要な要素のみを作りたいと思います。本来ならスコア表示やレベルアップ、アイテム獲得などがありますが今日のところは割愛します。 ドラッグ（スワイプ）してラケットを動かす（画面の中ならどこでも可） [START]ボタンを押してゲーム開始 ボールは一つ ボールがラケットに当たる位置によって角度が変わる ブロックは 9×4、ボールが当たるとブロックが消えて、ボールが跳ね返る ブロックが全部崩れたらクリアでゲーム終了 ボールが画面下に落ちたら失敗でゲーム終了 タイトル画
![AnimateCCで “ブロック崩し” を作ってみるよ！[ドラッグ操作pressmove] [当たり判定hitTest] [子の追加addChild] [ムービークリップの幅高さnominalBounds] HTML5 Canvas入門（スマホ対応）CreateJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/6505959552871874fde6a1e2eb72792c062d38bd/height=288;version=1;width=512/https%3A%2F%2Ftanegame.com%2Fwp%2Fwp-content%2Fuploads%2F2018%2F11%2Fc12892fa0a76a53e284b1dc6368df483.png)
どうも、こうへいです。 今回の記事は、Javascript Tips!! ってことで、タイトル通りですが、HTML5のvideoタグに重い動画ファイルを読み込む際に、Javascriptを使って遅延ロードする方法です。 自動再生 & iOS12で動作確認しました。 コードはこんな感じ。 実装 <!-- まずはvideoタグを設置 --> <video id="video" muted webkit-playsinline playsinline loop autoplay></video> <!-- js実装 --> <script> function lazyLoadVideo () { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://mameko.jp/lazymov.mp4', true); xhr.responseT
GitHub - cstoquer/pixelbox: A sandbox framework to fast-prototype tile-based games in HTML5 and JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
（＊価格は掲載時のものです。購入時にご確認ください。）
イベント発生時の処理を記述する イベントに対応する処却を記述する方法は二つあります。 一つはイベントハンドラを利用する方法、もう一つは、イベントリスナーを処理する方法です。 画面に指が触れたときのイベント dom.ontouchstart = function(event) { // タッチイベントの処理を記述 }; domの部分には、ボタンなどのDOM (Document Object Modeil)要素を指定します。 イベントリスナーを利用する場合 dom.addEventListener("touchstart", function(event) { // タッチイベントの処理を記述 }, false); 第l引数にイベント名を、第2引数にイベント発生時に実行する処理を記述します。 イベント名は、イベントからonを取ったものです。例えば、「ontouchstart」であれば、 「to
特にがっつり遊ぶタイプのスマホゲームでは、端末を横にして遊ぶことが多いと思います。電車内などで立ちながら利用されることの多いニュース系のアプリやコンテンツは大抵の場合横向きですよね。今回はスマホの向きを検知し、見た目を変化する方法についてメモします。 スマホの回転検知 サンプル ソースコード 解説 端末の回転イベント 端末が横向きか縦向きか判定 フォントサイズを固定する 参考ページ スマホの回転検知 サンプル 以下のページから実際のサンプルを実行できます。iOSやAndroidが動作するスマホか、PC上で動作するシミュレーターなどでお試しください。 miku3.net 端末を回転させると向きによって背景色が変化します。 横向きの場合は「青」 縦向きの場合は「橙(ダイダイ)」 合わせて以下の情報も回転される度に更新されます 端末の角度 解像度(width x height) ソースコード <
![[HTML5] スマホの縦向き/横向きを検知する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e489d1728466e3dce19cdfe063574a96ea30ce1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061408761%2F1701622454)
NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に | IT Leaders
IT Leaders トップ ＞ テクノロジー一覧 ＞ ネットワーク ＞ 新製品・サービス ＞ NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に ネットワーク ネットワーク記事一覧へ [新製品・サービス] NTT東日本とIPA、「シン・テレワークシステム」にHTML5版、Mac/Chromebookから接続可能に 2021年8月5日(木)日川 佳三（IT Leaders編集部） リスト NTT東日本は2021年8月5日、契約不要、ユーザー登録不要で利用できる無料のシンクライアント型VPNシステム「シン・テレワークシステム」に「HTML5版」を追加すると発表した。Windowsだけでなく、MacやChromebookなどからも、Webブラウザ（HTML5）を使って接続できるようになる。 NTT東日本と独立行政法人情報処理推進機構（I
（＊価格は掲載時のものです。購入時にご確認ください。）
『アンダーテール』や『VA-11 Hall-A』で採用されたゲームエンジン「Game Maker」が料金プランをお得に変更、買い切りも可能に。PCやモバイル、Web（HTML5）向けの買い切りプラン（約1万4000円）が登場し、非営利目的において無料プランの機能が充実
『アンダーテール』や『VA-11 Hall-A』で採用されたゲームエンジン「Game Maker」が料金プランをお得に変更、買い切りも可能に。PCやモバイル、Web（HTML5）向けの買い切りプラン（約1万4000円）が登場し、非営利目的において無料プランの機能が充実 YoYo Gamesは11月21日、ゲームエンジン「Game Maker」の料金プランを刷新した。 無料プランの利用可能な機能が拡張され、その他サブスクリプション型プランを刷新。さらに、PCやモバイル向けに買い切り型のプランも登場した。 📢 From today, GameMaker will be free for non-commercial use on all platforms (excluding console). To further meet your needs, we are introducing
（＊価格は掲載時のものです。購入時にご確認ください。）
こんにちは、WEBの佐野です。 今回は、html5のCanvasを使ったお絵描とき出来るコンテンツを作成してみました。 実装機能は、線の太さ・色を変更・画像ダウンロードなどシンプルなものになっているので、ぜひこれを改良しながら面白いお絵描きコンテンツを作ってみてください！ 完成形のサンプル まずは今回の完成品になります。 See the Pen WNexBQw by otwo (@otwo) on CodePen. 要点のいくつかを後述しますが、コピペ用のコードはこちら。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>お絵描き DEMO/title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">/script> <
HTML5 is not a new thing. We have been using several features of it since the initial release(January 2008). As part of #100DaysOfCode initiative, I have taken a close look at the HTML5 feature list again. See what I found? I haven't really used a bunch of it so far! In this article, I am listing down ten such HTML5 features that I haven't used much in the past but found useful now. I have also cr
この動画は NHKクリエイティブ・ライブラリー素材サイトからダウンロードして使用しています。 ＊音声ファイルは「音の素材集 - ©OVER RISE」のCD-ROMから使用しています。 ＊この音声の著作権は、OVER RISEにあります。 track要素で、<video>に字幕などを表示する <video>要素内に入れて、字幕を表示したサンプルです。 HTMLはこちら ↓ <video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360"> <source src="video/uchiage.webmsd.webm" type="video/webm"> <source src="video/uchiage.mp4" type="video/mp4"> <track src="track.vtt
<div style="width: 300px; max-width: 100%; background-color: white; border: 3px solid black; color: rgb(51,51,51); padding: 20px; text-align: center;">最新映画紹介</div> これがstyle属性ですね。htmlのstyleという 属性 の 値 としてCSSを直接書きます。 で、すげー見づれぇ (=`ｪ´=;) となるわけよ。 見辛い・編集困難という問題もあるのですが。 じゃあサンプルの「最新映画紹介」をこうしたい場合どうする ↓ 上記は 疑似要素 と呼ばれるCSSを利用しています。 そして 疑似要素はstyle属性内に書くことができません。 疑似要素というのは本来「htmlに存在しないもの」を作り出しますので、「htmlに存在する」要素に
※GitHubスターは2020.1.26時点 Video.js がスター数1位。かなり多くのサイトで使われているようです。 (公式サイトによると450,000以上のWebサイト) データスタジアムの運営しているサービスでも利用しています。 Plyr もスター数はかなりありますね。機能豊富で開発も活発のようです。 Shaka Player はGoogle製ということで期待ができます。Google I/O 2019でもセッションがあったとの事。 【視聴メモ】 Anatomy of a Web Media Experience (Google I/O ’19) プロプライエタリの3つについてはGoogle Trendsで比較してみると、JW Player が圧倒的でした。 その他にNexPlayer、bitmovin Playerといったものもあります。 Plyr ここでは Plyr の特徴をざ
Why You Should Choose HTML5 article Over section — Smashing Magazine
Browsers’ visual display of headings nested inside <section> elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies. In this article, Bruce Lawson explains what use we have of <section> and how authors should mark up headings that are hugely important to AT users. A few days ago, I was
GitHub - oklemenz/PrinceJS: Prince of Persia reimplementation written in HTML5 / JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
HTML5ベースのMMORPG「MAD WORLD」のαテストが実施中。PCブラウザですぐに参加可能 ライター：Kim Dong Wook JANDI SOFTは，HTML5ベースのMMORPG「MAD WORLD」のαテストを2021年10月31日18：00まで実施している。 今回のテストは，2022年にグローバルサービスを開始するために，システムの安定性やゲームの基本的な要素，サーバー運営の技術的検証などが目的とのこと。テストには，公式サイト（リンク）からすぐに参加でき，PCブラウザのみサポートされている。また，現在は英語と韓国語のみの対応となっている。 「MAD WORLD」公式サイト 関連記事一覧へ関連記事 HTML5ベースのMMORPG「MAD WORLD」のαテストが実施中。PCブラウザですぐに参加可能 HTML5ベースの韓国産2D MMORPG「MAD WORLD」の最新画像
しらぎく麻雀をプレイする しらぎくモバイル麻雀をプレイする しらぎくモバイル麻雀での台湾麻将について。 『しらぎく麻雀』でプレイ出来る台湾麻将(十六張麻将)について。 『しらぎくモバイル麻雀』でのでの台湾麻将については別記事をご覧ください。 フィーチャフォン向け『しらぎくモバイル麻雀』Flash 版では台湾麻将はプレイ出来ません。 台湾麻将に関するご質問も併せてご覧ください。 台湾麻将(十六張麻将)とは。 台湾麻将とは、台湾独自の麻雀です。 十六張麻将の別名通り、手牌は十三枚ではなく十六枚となります。 台湾麻将も、日本の麻雀同様さまざまなローカルルールがありますが、今回は中華麻将競技協会のルールを参考にして開発しました。 台湾麻将の特徴。 台湾麻将(十六張麻将)には、以下の特徴があります。 手牌は十六枚 槓(カン)がない限り手牌は十六枚、和了時には十七枚となります。 すなわち、和了時の形は
GitHub - jagenjo/litegraph.js: A graph node engine and editor written in Javascript similar to PD or UDK Blueprints, comes with its own editor in HTML5 Canvas2D. The engine can run client side or server side using Node. It allows to export graphs as JSONs
Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture) Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...) Optimized to support hundreds of nodes per graph (on editor but also on execution) Customizable theme (colors, shapes, background) Callbacks to personalize every action/drawing/event of nodes Su
出版社：オライリージャパン、著：Mario Casciaro / Luciano Mammino、翻訳： 武舎広幸／阿部和也 (nokindle)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【HTML5】videoタグが超便利！ - タイガー！タイガー！じれったいぞー！（SE編）
colspan="100%"の罠 ―W3CのHTML5仕様書を読んでみた― - あなたとあなたの話がしたい
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年5月10日)
【jquery】【超簡単】EFOの様なリアルタイムバリデーションを入れる方法【html5】｜KATのブログ
実務未経験でHTML5プロフェッショナル認定試験 レベル2に一発合格した - Qiita
)
OpenPlayerJS - 軽量なHTML5動画プレーヤー
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年11月10日)
【HTML5】Floatレイアウトのテンプレート｜WEBデザイン - プログラミング未経験者の備忘録
JavaScript HTML5 Canvas Animated Background - OnAirCode
html5 videoタグの重い動画をJSを使って遅延ロードする方法【自動再生 iOS動作確認済】
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年3月24日)
ときどきWEB | HTML5とJavaScriptでＰＣ・スマホのマルチタッチ対応してやんよ!!!
[HTML5] スマホの縦向き/横向きを検知する - ねこの足跡R
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年5月16日)
HTML5/CSS3のニュースやTIPSなどのまとめ (2020年2月16日)
Canvasを使ってお絵描きと画像の保存をしてみる【HTML5】 - 株式会社オーツー｜スタッフブログ
10 useful HTML5 features, you may not be using
track要素で字幕を表示する-サンプル：ほんっとにはじめてのHTML5とCSS3
html5.2ではstyle要素をbody内に書けるようになりました
HTML5 動画プレイヤー 8選 / CMAF再生にトライ | データスタジアム株式会社
HTML5ベースのMMORPG「MAD WORLD」のαテストが実施中。PCブラウザですぐに参加可能
台湾麻将(十六張麻将) - HTML5 麻雀『しらぎく麻雀』
HTML5/CSS3のニュースやTIPSなどのまとめ (2019年11月18日)