ページの表示・非表示状態を取得するPage Visibility API - へっぽこプログラマーの日記
HTML5 Advent Calendarの1日目です。 本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。 http://atnd.org/events/21987 私は、とりあえず1日目なので軽く、堅くPage Visibility APIというマイナーな仕様について解説したいと思います！ Page Visibility APIとは Page Visibility APIは、ページの表示状態を取得するAPIです。document.h
The Future of Drag and Drop APIs
Note: React DnD 1.0 is finally released. This article is the manifesto behind it. Front-end development matures. We used to keep state in global variables and DOM. Then we wired our apps with message buses and used fine-grained events to translate model changes into DOM updates. Now is the dawn of the next-generation frameworks that embrace top-down data flow, treat DOM as a remote rendering engin
HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ | Stronghold Archive
HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ どうもこんばんは。Toshikuraです。今回のTipsは【HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ】です。以前「HTML5 audio 音源の拡張子やブラウザの対応状況」という記事でも一部書きましたが、本記事はより具体的な続編です。タイトルでは”等”と省略しましたが、音の再生、一時停止、特定時間への移動、スキップ、リセット、ミュート、再生速度の上げ下げ、再生時間の取得、合計時間の取得、ボリュームの指定、jQueryを使ったオリジナルプログレスバーの設定、はたまた再生中やボリューム変更等のタイミング取得が対象になります。 はじめに まずはじめに、HTML5でのaudioタグの基本的な記述です。このタグにloopやcon
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
ドラッグ＆ドロップ－HTML5のAPI、および、関連仕様
■ドラッグ＆ドロップとは ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。 ドラッグ＆ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすいでしょう。 ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと、 ドロップ操作はその動かしたデータをドロップ先の要素内に配置することです。 ■HTML側では、ドラッグする要素にdraggable属性を指定する HTML側では、ドラッグする要素にdraggable属性を指定します。 draggable属性の値
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
LIGデザイナーオススメの便利なWEBサービス・ツール＆サイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザイナーチームマネージャーのひろです。 最近、息子のアンパンマンのハマり具合に困惑しています。 アンパンマンが、画面に現れるやいなや大興奮。 軽い近所迷惑状態です(@_@;) クリスマスプレゼントは、間違いなくアンパンマングッズでしょうね（笑） さて、今回は、LIGのデザイナーが、普段からWeb制作を行うにあたり、便利に活用しているWebサービスやWebサイトを紹介したいと思います。完全保存版です！Bookmark間違いなしです！！ デザインするときに役立つWEBサービス５選 960 Grid System 横幅960px用にグリッドが引かれたpsdを何パターンかDLできるWebサービス。 http://960.gs/ Gridulator グリッドデザインには必須のグリッドラインを手軽に作れちゃうWebサービス。 PNGを書き出せるのでとても便利です！ http://gridulato
現場で使える効果的なHTML&CSS構造設計（Effective HTML&CSS）
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
sichoru.net
sichoru.net このドメインを購入する。 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
よくある3つのデザインから考える、マークアップの最適解
Web制作においてHTMLのマークアップには絶対の正解というものがありません。ページを制作しているとき、特にセマンティクスを意識したとき「このマークアップで正しいのだろうか」と悩むことがあると思います。 そんなマークアップについて考えるイベント「MarkupCafe」がhtml5jマークアップ部の主催のもと開催されました。「MarkupCafe」では参加者同士がチームに分かれ、お題となるデザインに対して議論し、自分たちならこうマークアップするといった考えを発表し合いました。 本記事では「MarkupCafe」で出された”フッター”、”パンくずリスト”、”求人情報”の3つのお題をもとに、Web制作におけるマークアップの捉え方、誤った使い方をしがちな要素などについて考え、マークアップの最適解を探ります。 ※html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わる
50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ - あのねノート。
2013-09-16 50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ やり方 適当プログラミング解説シリーズ はじめに。 ラングトンのアリ(Langton's ant)を知っていますか？ラングトンのアリはWikipediaのラングトンのアリによると、以下のように記述されています。 ラングトンのアリ（英: Langton's ant）は、クリストファー・ラングトンが発明した単純な規則で記述される2次元チューリングマシンである。 実際の3匹のラングトンのアリの早送りされた動きです。 一見複雑そうに見えますが、ルールはたったこれだけです。(上のgifでは色のあるマスが白のマスとしています。) 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、
無職のプログラミング HTML5 Audio オブジェクトを JavaScript で制御する方法
HTML5 の Audio オブジェクトについて調べたことをまとめる。 なお、本エントリでは Audioタグについては記述しない。 ＜注意＞以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。 目次 1. HTMLAudioElement オブジェクトの作成 2. HTML5 Audio およびコーデックのサポートチェック 3. 再生する Audio ファイルの指定 4. Audio ファイルの再生、一時停止、停止 5. Audio ファイルの音量変更 6. サンプルプログラム 1. HTMLAudioElement オブジェクトの作成 参考ページ： audio 要素 - HTML5 タグリファレンス - HTML5.JP JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。 作成方法は以下の2通り /
最近話題になったイケてるWebサービス・アプリ11選（2013年7月編）
こんにちは。 もうすぐ8月ということで、7月中に話題になったwebサービスやアプリを11個ほどご紹介します。 IFTTT IFTTTとは、Webサービスやアプリのアクションを連携させて一連の処理にしてしまうサービスです。 「もし明日が雨だったらGmailにメールを送る」といったことも可能です。サービスの名称は「If this, then that（これをすれば、あれをする）」を略したもの。たとえばスマートフォンでとった写真を自動的にDropboxにアップロード、ブログへ投稿すると自動的にツイートする設定などなど考えられるレシピは無限大。 自分でレシピを投稿したり、他ユーザーの作成したレシピを見ることもできます。エンジニア思考っぽいのサービスですが、どんどん私生活の一部分としてに入り込んできそうですね。 SUVACO（スバコ） ソーシャル・ホームデザイン・サイトです。 家づくり・インテリアに
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -
「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO
Page not found - FullStackOptimization
IBM Developer
