登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
![HTML5時代が目前! 本気で学ぶJavaScript](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed39b5962a5d552c95b6d796db8f55e72d32943/height=288;version=1;width=512/https%3A%2F%2Fxtech.nikkei.com%2Fimages%2Fn%2Fxtech%2F2020%2Fogp_nikkeixtech_hexagon.jpg%3F20220512)
登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
HTML5 Canvasでグレースケール画像を自動生成 WebDesignerWallにて、HTML5 CanvasとjQueryでグレースケールを実現するチュートリアルが公開されている。画像にマウスを乗せると、グレースケールの画像がカラーになるというものだ。 HTML5 & jQuery Grayscale Demoより。グレースケールの画像にマウスを乗せると、カラーで表示される これまでこのようなユーザインタフェースを実現するには「カラーの画像」と「グレースケールの画像」の2種類を用意する必要があった。このチュートリアルではHTML5のCanvasを活用し、オリジナルの画像からグレースケールの画像を自動生成する方法を紹介している。ポートフォリオやWebアルバムなど、さまざまな場面で活用できそうだ。 本稿では、その方法を簡単に紹介していこう。 使い方 グレースケールの画像を自動生成したい
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5 SlidesはHTML製のオープンソース・ソフトウェア。2010年秋に仕様の確定が予定されているHTML5。ビデオタグなどの一部混乱はあるものの、大筋で仕様は固まってきており、SafariやGoogle Chromeなどは率先してHTML5に取り組んでいる。 HTML5に関するプレゼン HTML5で目玉機能になっているのがローカルストレージやオフラインアクセス、データベース、位置情報、SVG/Canvasなどだろう。そんなHTML5の魅力を知ることが出来るプレゼンテーションとしてHTML5 Slidesを紹介しよう。 HTML5 SlidesはHTMLで作られたプレゼンテーションだ。左右の矢印キーを使って読み進めることが出来、Ctrlキーと+/-キーで拡大、縮小表示ができる。内容はずばり、HTML5に関する説明で、プレゼンの途中でHTML5を試せるようになっている。 プレゼン上
40+ New Significant HTML5 And CSS3 Tips/Techniques/TutorialsPosts by MultyShades9 Comments CSS 3 and HTML 5 are able to change the way you design Web sites. Both include many new features and functions that one can not begin to see how they work. CSS3 is providing new techniques and advanced features in the design. These new features and design techniques make it much easier create a website. Here
close HTTP/1.1 206 Partial Content Content-Length: 62275 Content-Range: bytes 0-62274/62275 Content-Type: text/html; charset=utf-8 Server: Apache/2.2.15 (Red Hat) X-Backend-Server: node30 Vary: Accept-Encoding Cache-Control: max-age=900, public Date: Fri, 04 Mar 2011 02:30:54 GMT Expires: Fri, 04 Mar 2011 02:45:54 GMT Accept-Ranges: bytes Last-Modified: Wed, 02 Mar 2011 21:05:05 GMT Connection: Ke
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5:ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
6 January, 2011 The real HTML5 boilerplate Written by Harry Roberts on CSS Wizardry. Table of Contents Assumptions Gone to our heads? The real HTML5 boilerplate Addendum Update There has been a lot of talk lately about a certain HTML5 boilerplate… the HTML5 Boilerplate. A boilerplate is a starting point, it’s a base. It’s a codebase from which things are built with only the necessary and relevant
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of W
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
Inspiration 12 Fun & Clever Examples of HTML5 Nathan WellerJanuary 28, 201112 Comments011.5k Last week, the future of the web got a logo. Just another reminder that, love it or hate it, HTML5 is here to stay and it IS the new standard. We’ve done some cool round-ups on here before that give several great examples of new sites made with HTML5. Instead of a repeat performance I thought I’d hunt d
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ!」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な�Flash CS5拡張ツールを作ってみたので紹介します。 まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。 タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。 生成手順は次のとおり ( ↑ ) Flashの編集画面 ( ↑ ) 拡張機能を[コマンド]から呼び出す。すると変換が自動的に行われる。 ( ↑ ) 変換されたJavaScriptコードを生成、これをHT
HTML5 is an advanced version of the HTML language which supports audio-visual elements. This means when you use HTML5 to build your app or website, you will be able to run JavaScript as it supports it. It allows your websites or application to be more powerful and diverse. Canvas graphing is one of the major trends in the web design world today. With the use of HTML5, developers have been able to
この10年間ほどで、Webの世界はめまぐるしい変化を遂げ、いまなお進化を続けています。情報発信としてのWebサイトだけではなく、サービス提供、開発支援のツールなども増加し、Webは様々な利用をされるようになりました。この特集では、この先の10年につながる今後のWebとそれを支える注目技術を紹介していきます。ですが、その前に、まずこれまでにWebがどのように変化してきたか。近代史を振り返ります。 2000年ごろから「Flash」を活用したサイトが増え始め、Webサイトは表現的にも華々しいものとなっていきました。それまでの無機質なインタフェースだけでなく、情緒的な演出として、また直感的な操作を促す効果として、随所に使われるようになってきています。この傾向は徐々に強まっていき、2007年には「Silverlight」も登場しました。 並行して、「JavaScript」も脚光を浴びました。以前はW
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く