HTML5とCSS3のオンラインサンプルが良い感じ | Web活メモ帳
Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。 HTML5 & CSS3 Tools and Tutorials パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。 以下に使っている様子を載せてみます。 ↑設定した項目を選択します。 まずはBox Propertiesを試してみます。 ↑設定可能な項目が表示されます。 パラメータをグリグリいじれちゃいます。 ↑設定した内容はリアルタイムにプレビュー表示されました。 使用するコードと対応するブラウザも教えてくれます。 違うものも試してみましょう。 ↑Videoを設定している所です。 動画ファイルはURLを直接入力して設定します。 ↑プレビューです。 細かいブラウザのバージョンも教えてくれました。 他にも設定可能な項目はたくさんありました。 興味のある方は
Canvasを使ってスタイリッシュなテキストが描画できる「CanvasText」 | Web活メモ帳
HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、 テキストをリッチに表示したりするなどの細かな使い方もできたりします。 CanvasTextというJavaScriptライブラリを使うと、 HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。 使い方 //インスタンスを作成 var CanvasText = new CanvasText; //共通の処理を記述 CanvasText.config({ canvasId: "canvas", fontFamily: "Verdana", fontSize: "14px", fontWeight: "normal", fontColor: "#000", lineHeight: "12" }); //blueクラスを作成して、属性を指定 CanvasText.defineCl
HTML5でAudioを便利に使うライブラリ「Buzz」 | Web活メモ帳
HTML5に対応しているブラウザであれば、再生、一時停止、停止、ボリュームコントロールのようなアクションを制御する事ができるようになります。 それ以外にも、オーディオのループや再生時間の取得、イベントの取得などなど、 色々なAPIが用意されています。 対応しているファイル形式 ファイル形式はOgg、Mp3、Wav、Aacの４種類に対応しているようです。 音声の再生には以前はFlashが必須でしたが、こういったライブラリで手軽に設置できるようになって来たのが嬉しいですね。 ブラウザによっては動作しないものもあるようですが、 フェードイン/フェードアウトも実装されていました。 デモも非常に面白いサイトに出来上がっていました。 こういった便利なライブラリは覚えておくといつか使えそうです。 詳細&ダウンロードは下のリンクからどうぞ。
最近知ったHTML5で作られたWordPressテーマいろいろ | Web活メモ帳
最近知ったHTML5で作られたWordPressテーマをを備忘録的にまとめておきます。 デザイン済みテーマ、カスタマイズ用のシンプルテーマ、IE6でもデザインが崩れないテーマなど色々ありました。 Constellation Theme iPhoneやiPad用に表示が最適化されているHTML5製のWordPressテーマ HTML5Press おすすめ投稿をスライダで表示する事が出来ます。 画面を下にスクロールさせると、ページTOPへ戻るがフェードインしながら表示されるテーマです。 Free Dream HTML5 WordPress Theme IE６でも表示可能なテーマ。 960 pxのワイドレイアウトです。 TwentyTen Five WordPress3のデフォルトテーマである「Twenty Ten」をHTML5に対応させたテーマです。 デザインやスタイルは「Twenty Ten
わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
HTML5でダイアグラム図を作成できる「Diagramo」 | Web活メモ帳
システム設計にはかかせないダイアグラムですが、いざ作るとなった時は以外と面倒なものです。 WEB上でさくっと作れる事で簡単に共有もできるので良さそうです。 PNGやGIFとして書き出しも可能です。 操作もドラッグ&ドロップで直感的にできるようになっていました。 興味のある方はぜひ使ってみてください。
HTML5とjQueryで作られたビデオプレイヤー「jMediaelement」 | Web活メモ帳
「jMediaelement」はHTML5とjQueryで作られたビデオプレイヤーです。 カスタマイズを前程に作られているようで、各ボタンを操作した際のイベントの設定など細かくできるようになっていました。 Youtubeの動画も再生できるようです。 デモ 対応動画形式 ogg (theora/vorbis), mp4/mov (H.264), WebM (VP8/vorbis), FLV 複数対応しているようで、movやflvなど再生できるようです。 デザインにはjQuery UIを使用しているようですので、テーマの変更など簡単にできそうですね。 興味のある方はぜひダウンロードしてみてください！
html5とcss3の美しいデモ | Web活メモ帳
美しいグラフが表示されるのですが、マウススクロールすると全体が動くようになります。 デモ ホイールを取得する部分は以下のようなコードになっています。 jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) { var newval, num = $('div.css-chart p').css('padding-left'); delta = delta || e.detail || e.wheelDelta; if (delta> 0 || e.which == 38) { newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1); } else if (delta <0 || e.which == 40) { newval = parseFloat(nu
HTML5で作られた美しいサイト12 | Web活メモ帳
HTML5は全てのブラウザでサポートされているわけではないですが、すでにいくつかのサイトが対応しています。HTML5で完成されたサイトを集めた12 Beautiful HTML5 Web Design Showcases « Geng Gao | the Blog | Design, Software, Gadgets blogというエントリーのご紹介。 どのサイトもJavaScriptやCSSを上手に使用して各ブラウザでレイアウトがくずれないように調整されています。 ざっといくつかご紹介。 詳しくは以下 Slim Kiwi サイト全体とブログも全てhtml5で構成されています。 Apple AppleはすでにSafari4やiPadのページなどがhtml5化していました。html5を推進しているだけに、おそらくこれからサイト内の全てのコンテンツがhtml5化して行くのではないでしょうか。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのみで作れるアイコン配布サイト「One Div」 | Web活メモ帳
インスピレーションを刺激するhtml5で作られたサイト集25 | Web活メモ帳
HTML5のスライドショー | Web活メモ帳