MDN Web Docs
Resources for Developers, by Developers Documenting CSS, HTML, and JavaScript, since 2005. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { { { { } } } } { { { { } } } } { { { { } } } } { { { { }
setTimeout() vs ハッカー、仁義なき戦い - 株式会社CFlatの明後日スタイルのブログ
早速ですが、以下のHTMLを見て下さい……。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>サンプル1</title> <style> #counter { font-size: 3em; font-family: monospace; color: blue; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> (function(){ $(document).ready(function() { $('#start').on('click', function(){ var counter = 0; $
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
『ドットインストール』と『runstant』って実は相性良いんじゃね？って話 - Qiita
あぁ, 罪だ... 気づいてしまった... 『ドットインストール』と『runstant』の相性の良さに... 先日, 公開した runstant ですがこれは HTML, CSS, JavaScript を編集, 実行できます. ドットインストールにあるWeb系のレッスンは, 大抵この３つを扱えれば事足ります. そしてなんといってもどちらもログイン不要で使うことが出来ます!! これは組み合わせて使うしかないでしょ! 今までにこれほど気軽にプログラミングを実行しながら学べる環境があったでしょうか？ いやなかったです!(あったらコメントください!) これはもう, ごはん×明太子, 牛乳×バームクーヘン, 風呂上がり×ガリガリ君, 夏×TUBE, 原田社長×ベネッセ以来の革命かもしれない... ってことでどう使うかまとめてみました. 参考になれば幸いです. 試しに作ってみた AngularJS
PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め
PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め 畠田 喜丈（株式会社ニューフォリア） アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。 アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。 基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。 アプリカンの開発に必要なもの エディタ 好奇心 アプリカンの開発には、IDEを
ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です - Qiita
はじめに JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作ってGitHub Pagesを作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。 FirefoxのBugzillaを見ていたら、984796 – SVG path getTotalLength returns large incorrect numberでたまたま見つけた bl.ocks.org - aboutが便利だったので紹介します。 使い方 index.html というファイル名でGistを作成します。 あとは、GistのURLの https://gist.github.com を http://bl.ocks.org に置き換えてアクセスすれば表示されます。 bl.ocks.org - aboutに上げられている https://gist.github.co
The Web Standards Project
The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all. Skip to content InterAct: Web Standards CurriculumInterAct is a living, open curriculum based upon web standards and best practices, designed to teach students the skills of the web professional. InterAct Learning TracksThe InterAct curriculum framework has
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
HTML5 and CSS3 - Adobe - The Expressive Web - Beta
The Expressive Web is an Adobe-curated resource website for the advocacy, support, and advancement of HTML5 and CSS3 web development.Copyright © 2011 Adobe Systems incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of User and Online Privacy Policy. Resources About Adobe and HTML5
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Ajaxと組み合わせて便利なHistory APIを使おう - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
Private Presentation
Private content!This content has been marked as private by the uploader.
はてなブログ編集画面JSのページャ見どころ紹介 #pagernight - hitode909の日記
昨日，ページャNightという勉強会で，はてなブログのJSの見どころを紹介するLTをした．(昨日の日記)． 資料公開しようかと思ったのだけど，発表資料そのまま公開しても意味不明なので，エントリに書き直すことにした． たとえば，このLGTM画像は発表資料の1枚目で，もし発表資料をそのまま公開したら，こういう謎の画像を解説もないまま見ることになっていたはず． JSのページャいっぱいある はてなブログの編集画面には編集サイドバーというのがあって，写真とかAmazon検索とかTwitterとかinstagramとかあれこれ貼れるようになってる． Amazon検索しても画面遷移するわけじゃなくて，ウェブ2.0という感じで，XHRでJSONを取ってきて，HTMLを組み立てて表示，クリックすると選択，貼り付けを押すとエディタに挿入される，という仕組み． 編集サイドバーから貼れるサービスは10種類くらいあ
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
これから始めるJavaScriptの基礎と全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #06」【ゲスト寄稿】 - BRIDGE（ブリッジ）
これから始めるJavaScriptの基礎と全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #06」【ゲスト寄稿】 編集部注：本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy（テックアカデミー）による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。 前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくため
初心者でも分かる！モーダルウィンドウの作り方
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js：HTML5アプリ作ろうぜ！（12）（1/2 ページ） ダイアログ／アラート／Notification（通知）を見栄え良く簡単に使用できるJavaScriptライブラリ「ALERTIFY.js」の概要と基本的な使い方をサンプルを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、API、またそれらを組み合わせたサンプルアプリを解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するライブラリは「ALERTIFY.js」です。 ALERTIFY.jsとは 「ALERTIFY.js」は見栄えの良いダイアログ／アラート／Notification（通知）を簡単に使用できるライブラリです。短時間で既存のWebサイト／WebアプリのHTMLに記述できるのも魅力です。また、コントロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodyHouse | Web Design Nuggets
