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; } </
Webフォントによるちらつきをなくす方法（ネット低速環境も考慮） - Qiita
2022/07/26追記 Loading画面を使用したい場合はこちら！！ はじめに AdobeやGoogleが用意しているWebフォント、本当に便利ですよね。 スタイリッシュなフォントを、CSSやJavascriptの数行を追加するのみで使用できる優れものです。 ですが欠点として、Webフォントを読み込みブラウザに反映させるのに若干ラグがあるために、文字幅の変更が発生することから、 サイトが一瞬ちらついて表示されているように見えます。 これには「Flash Of Unstyled Text (FOUT)」という名前も付いているようです。 具体例：https://helpx.adobe.com/jp/typekit/using/font-events.html このちらつきをなんとかする方法ですが、すごく参考になるサイトがあって、 Webフォントの読み込み完了後、htmlタグに.wf-act
[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ページを開く
Loading...
ondragoverイベント - JavaScript（ジャバスクリプト）リファレンス
CSS3で作られたスライスされた画像が3D回転しながら切り替わるエフェクト「Slicebox」
CSS3だけで作られたスライド調の画像切り替えエフェクト４種