知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します）。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jquery.scrollable ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。 Fi
Web Design Wallのエントリー「jQuery Tutorials for Designers」から、JavaScriptのライブラリ「jQuery」が視覚的にどのように動作するかデモと共に解説してる10のチュートリアルを紹介します。
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 ListNav リストの高機能なナビゲーションを作成。 Scroll your HTML ホイールにも対応した高機能なスクロールする
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
Webページに掲載する面倒な表（テーブル）の作成を楽にしたい――。以前、本サイトではExcelファイルを簡単にHTML（Tableタグ）に変換するExcelアドイン「XLS2HTMLTable」を紹介した（関連記事）。XLS2HTMLTableはとても便利なツールだが、それでも表が大量に必要な時にはやはり手間がかかる。 今回はさらに楽をできて便利なアイテムを紹介しよう。それが、CSVファイル（カンマ区切りテキスト）を読み込み、Tableに整形して表示するJavaScriptライブラリ「jquery.csv2table.js」だ。 JavaScript関連の著書も多い高橋登史朗氏が作った「jquery.csv2table.js」は、名前のとおりjQueryのプラグインとして動作するもので、HTMLにわずか数行のスクリプトを書き加えるだけで使える手軽なライブラリだ。さっそく実際にjquery.
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jqzoom 画像の一部をズーム。 Shadowbox 複数のJavaScriptライブラリに対応したLightbox。 Faceb
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
むだ毛について気になる季節 毎年、春の終わりになると、むだ毛について気になるようになります。特に、夏になると、半そでやノースリーブを着る機会が増えます。そうなると、やはり、わきの下のむだ毛が気になるようになってくるのです。また、夏になると、素足でハーフパンツなどをはくことが多くなります。この場合には、ひざ下のむだ毛が気になるのです。そして、お風呂に入った時などに、自分でむだ毛の自己処理をおこなっています。 カミソリを使っての脱毛 むだ毛については、たいてい、カミソリを利用して自己処理をおこなっています。カミソリを利用する場合に、一番、気をつけていることは、やはり、安全についてです。ケガをしないように気をつけながら、カミソリを使っています。また、カミソリの使用は、皮膚にとって刺激になることもあります。したがって、肌に直接カミソリをあてるのではなく、必ず、石鹸の泡などと一緒に処理しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
