ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
動画と音声のコンテンツ - ウェブ開発の学習 | MDN
<video> や <audio> タグの基本的な構文 動画と音声の特定の属性（コントロールやミュートなど） <source> 要素を使用してさまざまな動画または音声ソースを提供すること。 キャプションや字幕などのテキストトラックを使用方法の基本。 オンラインの動画や音声の最初の登場は、 Flash や Silverlight といった独占的なプラグインベースの技術によって可能となりました。これらはどちらもセキュリティやアクセシビリティの問題があり、現在では廃れています。 HTML のネイティブのソリューションである <video> と <audio> 要素と JavaScript が利用できるようになったからです。それらを操作するための API があります。ここでは、 JavaScript については触れません。 HTML で実現できる基本的な基礎知識だけを紹介します。 音声/動画ファイ
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. Operate The JSON collection can be sorted, searched/filtered, and paginated/sliced. Write
HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」:phpspot開発日誌
Dynatable.js - jQuery plugin for HTML5 JSON interactive tables and more HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 JSONからtable、tableからJSON形式に変換でき、実装できるテーブルもソートしたり件数を絞り込めたり検索できたりと、リッチにしてくれ、かつシンプルなデザインで使いやすいテーブルが作れるライブラリです。 tableはデータと密接な関係にあることが多いですから、こういうライブラリは結構使えそうです。 関連エントリ テーブルを折りたたみ可能なツリー型グリッドに変換できる「TreeGrid」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 テーブル行をインクリメンタル検索できるようにするjQueryプラグイン
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 –
Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
HTML5/JavaScriptによる電子書籍風フリップアニメーション·Turn.js MOONGIFT
Turn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。 電子書籍というとePubファイルが有名ですが、HTML5でも実現は可能です。特に紙をめくった時のようなフリップアニメーションが欲しい時にはTurn.jsを使ってみましょう。 デモです。幾つかのサンプル書籍が掲載されています。 開きました。 フリップしています。 別な書籍。マウスをもっていくと端が折れ曲がります。 こんな感じで斬新な表示も。 マガジン風の使い方もできます。 デモ動画です。 Turn.jsではめくる操作はもちろんのこと、拡大表示もサポートされています。デスクトップブラウザはもちろん、iPhone/iPadによる操作も可能です。コンテンツはAjaxによる動的取得にも対応しています。一部HTML5非対応ブラウザでも使えるようになっており、対応ブラウザはIE8からとなって
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
Canvas Tutorial - Introduction
Welcome! In this tutorial, we're going to create a breakout clone that you can play in your browser, using javascript and the <canvas> element. In order to use this tutorial, you'll need a browser that supports the <canvas> element. Before you read any further, click on the "run code" button on the left to play the game that we'll end up creating. On every page, you'll be able to click the "run co
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
A Creative Year: Distinctive Web Designs of 2012 | Codrops
An inspirational collection of the most impressive and distinctive web designs from the year 2012. 2012 was clearly an interesting year design-wise. The responsive boom in web design gave birth to brilliant redesigns; clever layouts emerged with a focus on clear typography and impactful, contrasty colors. Large background images with a mood-setting character and sharp edges on unusual shapes were
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
いちばんシンプルなHTML5のベースを用意 | necozine
私は、例えばjavascriptをどう動かしたらいいかと理解する時、テキストエディタを使って最低限のコードでサンプルを試します。 そんな時の、ベースとなるHTMLのコードを紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> <!-- /*css*/ --> </style> <scr
mizzz.jp
mizzz.jp 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
スマートフォン向けのHTML5製フレームワーク・Lungo.js - かちびと.net
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
Liveweave HTMLエディター
Check out our Python playground! Python is the most popular general-purpose programming language in the world, widely used in Artificial Intelligence, Machine Learning, and Data Science projects. Supports popular Python libraries like Numpy, Matplotlib, SciPy, Pandas, and more! Share your public code with anyone, or make it private Features advanced auto-completion technology Try it now!
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
deconcepter.jp