HTML5 & JavaScript でビデオプレーヤーをサクッと作ろう！
どうも、こんにちは。江嵜です！ 今日は HTML5 と JavaScript でビデオプレーヤーを作ってみましょう！ 「Web でビデオプレーヤーなんて作ろうと思ったら、結構めんどくさいんじゃないの？」とお思いのアナタ！ HTML5 からは全然そんなことないんです！ほんの数十分でビデオプレーヤーを作れてしまいますよ。 案ずるより産むが…で、とりあえずコード書いてみましょう！ 今回作るもの 今回、こんな感じのものを作ってみましょう。 操作はシンプルに、動画を操作するための Start・Stop・Pause。 あとはフルスクリーン表示と、動画読み込み用のボタンを配置しました。 それと動画の下にあるプログレスバーですね。 こちらも操作可能ですよ。 コーディング！ 今回は HTML, JavaScript, そしてデザインの為の CSS が必要ですね。 あと、動画選択前に表示しておく画像が 1 枚
五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第二回 CSSの構造このページの最終更新日：2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
ドロップ領域を目立たせる－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] ドロップ領域を目立たせる このページでは、ドロップ先を目立たせる方法について見ていきます。 どこにドロップすればいいか分かりにくい場合、 目立たせてあげると親切な場合があります。 ドロップ領域を目立たせるサンプルスクリプト ドロップ先を目立たせるには、 dragenterイベントでスタイルを変更してやります。 その後、dropイベントでスタイルを戻します。 またドラッグ要素がドロップエリアから外れた時のために、 dragleaveイベントでもスタイルを戻す処置を入れておきます。 以下のサンプルでは、下列の4分の1のエリアだけドロップできるようにしています。 上列の赤正方形がそのエリアに入った場合に、背景色をピンクに変えるようにしています。 ＜サンプル＞ このサンプルのスクリプトは以下の通りです。 <div id="dragarea"> <
[JavaScript][CSS] パタパタもどき
反転フラップ式案内表示機もどき 反転フラップ式（ソラリー式）発車案内表示機をCSSとJavaScriptを用いて再現してみました。 発車時刻Departure Time 種別Type 行き先Destination
モバイル端末のブラウザ画面サイズとMedia Queries
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。 調べついでにメディアクエリーも書いてみた。 下に調べた各端末のサイズを表で晒してるんですけど、 端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット という具合にざっくりグループ分けできるようでした。 landscapeは単純に値が逆になるのかというとそうではなく、 特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。 アスペクト比がはiPhoneが3:2でAndroid端末は16:9、 タブレット端末の場合はiPadは4:3でAndroid端末は16:10 viewport で width=device-width,initial-scale=1,ma
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[移動しました]Webフォントによるちらつきをなくす方法（ネット低速環境も考慮） - Qiita![[移動しました]Webフォントによるちらつきをなくす方法（ネット低速環境も考慮） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/74c1022808f8b33db801221f68a60926bed2280a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU3JUE3JUJCJUU1JThCJTk1JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJTVEV2ViJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgxJUFCJUUzJTgyJTg4JUUzJTgyJThCJUUzJTgxJUExJUUzJTgyJTg5JUUzJTgxJUE0JUUzJTgxJThEJUUzJTgyJTkyJUUzJTgxJUFBJUUzJTgxJThGJUUzJTgxJTk5JUU2JTk2JUI5JUU2JUIzJTk1JUVGJUJDJTg4JUUzJTgzJThEJUUzJTgzJTgzJUUzJTgzJTg4JUU0JUJEJThFJUU5JTgwJTlGJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgyJTgyJUU4JTgwJTgzJUU2JTg1JUFFJUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zMmJmMTA1OGRmZjgzMmVhMGQ0YzBiZWU0NjVhMDc4ZQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGlyb3NzeWk3MyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGM2ZjE0MGI2ZmM3NGI5N2NmNjRlZDc4YWE0NGQ1MGM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D0c650e9bce22d7c3e4b72a8eec96a535)
ondragoverイベント - JavaScript（ジャバスクリプト）リファレンス
CSS3で作られたスライスされた画像が3D回転しながら切り替わるエフェクト「Slicebox」
CSS3だけで作られたスライド調の画像切り替えエフェクト４種